feat:功能完成
guoyixuan
2 months ago
parent
494b5cba69
commit
49a2bedc31
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,200 +0,0 @@
|
||||
(function(){
|
||||
class Lut {
|
||||
|
||||
constructor( colormap, count = 32 ) {
|
||||
|
||||
this.isLut = true;
|
||||
|
||||
this.lut = [];
|
||||
this.map = [];
|
||||
this.n = 0;
|
||||
this.minV = 0;
|
||||
this.maxV = 1;
|
||||
|
||||
this.setColorMap( colormap, count );
|
||||
|
||||
}
|
||||
|
||||
set( value ) {
|
||||
|
||||
if ( value.isLut === true ) {
|
||||
|
||||
this.copy( value );
|
||||
|
||||
}
|
||||
|
||||
return this;
|
||||
|
||||
}
|
||||
|
||||
setMin( min ) {
|
||||
|
||||
this.minV = min;
|
||||
|
||||
return this;
|
||||
|
||||
}
|
||||
|
||||
setMax( max ) {
|
||||
|
||||
this.maxV = max;
|
||||
|
||||
return this;
|
||||
|
||||
}
|
||||
|
||||
setColorMap( colormap, count = 32 ) {
|
||||
|
||||
this.map = ColorMapKeywords[ colormap ] || ColorMapKeywords.rainbow;
|
||||
this.n = count;
|
||||
|
||||
const step = 1.0 / this.n;
|
||||
const minColor = new THREE.Color();
|
||||
const maxColor = new THREE.Color();
|
||||
|
||||
this.lut.length = 0;
|
||||
|
||||
// sample at 0
|
||||
|
||||
this.lut.push( new THREE.Color( this.map[ 0 ][ 1 ] ) );
|
||||
|
||||
// sample at 1/n, ..., (n-1)/n
|
||||
|
||||
for ( let i = 1; i < count; i ++ ) {
|
||||
|
||||
const alpha = i * step;
|
||||
|
||||
for ( let j = 0; j < this.map.length - 1; j ++ ) {
|
||||
|
||||
if ( alpha > this.map[ j ][ 0 ] && alpha <= this.map[ j + 1 ][ 0 ] ) {
|
||||
|
||||
const min = this.map[ j ][ 0 ];
|
||||
const max = this.map[ j + 1 ][ 0 ];
|
||||
|
||||
minColor.setHex( this.map[ j ][ 1 ], THREE.LinearSRGBColorSpace );
|
||||
maxColor.setHex( this.map[ j + 1 ][ 1 ], THREE.LinearSRGBColorSpace );
|
||||
|
||||
const color = new THREE.Color().lerpColors( minColor, maxColor, ( alpha - min ) / ( max - min ) );
|
||||
|
||||
this.lut.push( color );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// sample at 1
|
||||
|
||||
this.lut.push( new THREE.Color( this.map[ this.map.length - 1 ][ 1 ] ) );
|
||||
|
||||
return this;
|
||||
|
||||
}
|
||||
|
||||
copy( lut ) {
|
||||
|
||||
this.lut = lut.lut;
|
||||
this.map = lut.map;
|
||||
this.n = lut.n;
|
||||
this.minV = lut.minV;
|
||||
this.maxV = lut.maxV;
|
||||
|
||||
return this;
|
||||
|
||||
}
|
||||
|
||||
getColor( alpha ) {
|
||||
|
||||
alpha = THREE.MathUtils.clamp( alpha, this.minV, this.maxV );
|
||||
|
||||
alpha = ( alpha - this.minV ) / ( this.maxV - this.minV );
|
||||
|
||||
const colorPosition = Math.round( alpha * this.n );
|
||||
|
||||
return this.lut[ colorPosition ];
|
||||
|
||||
}
|
||||
|
||||
addColorMap( name, arrayOfColors ) {
|
||||
|
||||
ColorMapKeywords[ name ] = arrayOfColors;
|
||||
|
||||
return this;
|
||||
|
||||
}
|
||||
|
||||
createCanvas() {
|
||||
|
||||
const canvas = document.createElement( 'canvas' );
|
||||
canvas.width = 1;
|
||||
canvas.height = this.n;
|
||||
|
||||
this.updateCanvas( canvas );
|
||||
|
||||
return canvas;
|
||||
|
||||
}
|
||||
|
||||
updateCanvas( canvas ) {
|
||||
|
||||
const ctx = canvas.getContext( '2d', { alpha: false } );
|
||||
|
||||
const imageData = ctx.getImageData( 0, 0, 1, this.n );
|
||||
|
||||
const data = imageData.data;
|
||||
|
||||
let k = 0;
|
||||
|
||||
const step = 1.0 / this.n;
|
||||
|
||||
const minColor = new THREE.Color();
|
||||
const maxColor = new THREE.Color();
|
||||
const finalColor = new THREE.Color();
|
||||
|
||||
for ( let i = 1; i >= 0; i -= step ) {
|
||||
|
||||
for ( let j = this.map.length - 1; j >= 0; j -- ) {
|
||||
|
||||
if ( i < this.map[ j ][ 0 ] && i >= this.map[ j - 1 ][ 0 ] ) {
|
||||
|
||||
const min = this.map[ j - 1 ][ 0 ];
|
||||
const max = this.map[ j ][ 0 ];
|
||||
|
||||
minColor.setHex( this.map[ j - 1 ][ 1 ], THREE.LinearSRGBColorSpace );
|
||||
maxColor.setHex( this.map[ j ][ 1 ], THREE.LinearSRGBColorSpace );
|
||||
|
||||
finalColor.lerpColors( minColor, maxColor, ( i - min ) / ( max - min ) );
|
||||
|
||||
data[ k * 4 ] = Math.round( finalColor.r * 255 );
|
||||
data[ k * 4 + 1 ] = Math.round( finalColor.g * 255 );
|
||||
data[ k * 4 + 2 ] = Math.round( finalColor.b * 255 );
|
||||
data[ k * 4 + 3 ] = 255;
|
||||
|
||||
k += 1;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ctx.putImageData( imageData, 0, 0 );
|
||||
|
||||
return canvas;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const ColorMapKeywords = {
|
||||
|
||||
'rainbow': [[ 0.0, 0x0000FF ], [ 0.2, 0x00FFFF ], [ 0.5, 0x00FF00 ], [ 0.8, 0xFFFF00 ], [ 1.0, 0xFF0000 ]],
|
||||
'cooltowarm': [[ 0.0, 0x3C4EC2 ], [ 0.2, 0x9BBCFF ], [ 0.5, 0xDCDCDC ], [ 0.8, 0xF6A385 ], [ 1.0, 0xB40426 ]],
|
||||
'blackbody': [[ 0.0, 0x000000 ], [ 0.2, 0x780000 ], [ 0.5, 0xE63200 ], [ 0.8, 0xFFFF00 ], [ 1.0, 0xFFFFFF ]],
|
||||
'grayscale': [[ 0.0, 0x000000 ], [ 0.2, 0x404040 ], [ 0.5, 0x7F7F80 ], [ 0.8, 0xBFBFBF ], [ 1.0, 0xFFFFFF ]]
|
||||
|
||||
};
|
||||
THREE.Lut = Lut;
|
||||
})()
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,167 +0,0 @@
|
||||
var Stats = function () {
|
||||
|
||||
var mode = 0;
|
||||
|
||||
var container = document.createElement( 'div' );
|
||||
container.style.cssText = 'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000';
|
||||
container.addEventListener( 'click', function ( event ) {
|
||||
|
||||
event.preventDefault();
|
||||
showPanel( ++ mode % container.children.length );
|
||||
|
||||
}, false );
|
||||
|
||||
//
|
||||
|
||||
function addPanel( panel ) {
|
||||
|
||||
container.appendChild( panel.dom );
|
||||
return panel;
|
||||
|
||||
}
|
||||
|
||||
function showPanel( id ) {
|
||||
|
||||
for ( var i = 0; i < container.children.length; i ++ ) {
|
||||
|
||||
container.children[ i ].style.display = i === id ? 'block' : 'none';
|
||||
|
||||
}
|
||||
|
||||
mode = id;
|
||||
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
var beginTime = ( performance || Date ).now(), prevTime = beginTime, frames = 0;
|
||||
|
||||
var fpsPanel = addPanel( new Stats.Panel( 'FPS', '#0ff', '#002' ) );
|
||||
var msPanel = addPanel( new Stats.Panel( 'MS', '#0f0', '#020' ) );
|
||||
|
||||
if ( self.performance && self.performance.memory ) {
|
||||
|
||||
var memPanel = addPanel( new Stats.Panel( 'MB', '#f08', '#201' ) );
|
||||
|
||||
}
|
||||
|
||||
showPanel( 0 );
|
||||
|
||||
return {
|
||||
|
||||
REVISION: 16,
|
||||
|
||||
dom: container,
|
||||
|
||||
addPanel: addPanel,
|
||||
showPanel: showPanel,
|
||||
|
||||
begin: function () {
|
||||
|
||||
beginTime = ( performance || Date ).now();
|
||||
|
||||
},
|
||||
|
||||
end: function () {
|
||||
|
||||
frames ++;
|
||||
|
||||
var time = ( performance || Date ).now();
|
||||
|
||||
msPanel.update( time - beginTime, 200 );
|
||||
|
||||
if ( time >= prevTime + 1000 ) {
|
||||
|
||||
fpsPanel.update( ( frames * 1000 ) / ( time - prevTime ), 100 );
|
||||
|
||||
prevTime = time;
|
||||
frames = 0;
|
||||
|
||||
if ( memPanel ) {
|
||||
|
||||
var memory = performance.memory;
|
||||
memPanel.update( memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576 );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return time;
|
||||
|
||||
},
|
||||
|
||||
update: function () {
|
||||
|
||||
beginTime = this.end();
|
||||
|
||||
},
|
||||
|
||||
// Backwards Compatibility
|
||||
|
||||
domElement: container,
|
||||
setMode: showPanel
|
||||
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
Stats.Panel = function ( name, fg, bg ) {
|
||||
|
||||
var min = Infinity, max = 0, round = Math.round;
|
||||
var PR = round( window.devicePixelRatio || 1 );
|
||||
|
||||
var WIDTH = 80 * PR, HEIGHT = 48 * PR,
|
||||
TEXT_X = 3 * PR, TEXT_Y = 2 * PR,
|
||||
GRAPH_X = 3 * PR, GRAPH_Y = 15 * PR,
|
||||
GRAPH_WIDTH = 74 * PR, GRAPH_HEIGHT = 30 * PR;
|
||||
|
||||
var canvas = document.createElement( 'canvas' );
|
||||
canvas.width = WIDTH;
|
||||
canvas.height = HEIGHT;
|
||||
canvas.style.cssText = 'width:80px;height:48px';
|
||||
|
||||
var context = canvas.getContext( '2d' );
|
||||
context.font = 'bold ' + ( 9 * PR ) + 'px Helvetica,Arial,sans-serif';
|
||||
context.textBaseline = 'top';
|
||||
|
||||
context.fillStyle = bg;
|
||||
context.fillRect( 0, 0, WIDTH, HEIGHT );
|
||||
|
||||
context.fillStyle = fg;
|
||||
context.fillText( name, TEXT_X, TEXT_Y );
|
||||
context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT );
|
||||
|
||||
context.fillStyle = bg;
|
||||
context.globalAlpha = 0.9;
|
||||
context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT );
|
||||
|
||||
return {
|
||||
|
||||
dom: canvas,
|
||||
|
||||
update: function ( value, maxValue ) {
|
||||
|
||||
min = Math.min( min, value );
|
||||
max = Math.max( max, value );
|
||||
|
||||
context.fillStyle = bg;
|
||||
context.globalAlpha = 1;
|
||||
context.fillRect( 0, 0, WIDTH, GRAPH_Y );
|
||||
context.fillStyle = fg;
|
||||
context.fillText( round( value ) + ' ' + name + ' (' + round( min ) + '-' + round( max ) + ')', TEXT_X, TEXT_Y );
|
||||
|
||||
context.drawImage( canvas, GRAPH_X + PR, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT, GRAPH_X, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT );
|
||||
|
||||
context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, GRAPH_HEIGHT );
|
||||
|
||||
context.fillStyle = bg;
|
||||
context.globalAlpha = 0.9;
|
||||
context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, round( ( 1 - ( value / maxValue ) ) * GRAPH_HEIGHT ) );
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
export default Stats;
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue