#Global Variables
var category
background ={
scene: {bgP: {}, bgF1:{}, bgF2:{}},
currImage: {imgP: null, imgF1: null, imgF2:null},
}
## 读取类别标签,每个标签插入一个按钮
getLabels(labelColorFile){ crateCategory(labelData)}
```
void readMeta(){
// 加载三种相机内参数
loadXmlIntrinsic();
void init();
autoLoad();
setupStat();
animate();
}
```
```
var controlHandler = {
orthographic: false,
meshView: false,
showAnnotation: true,
showCam: true,// 显示相机
imageOpacity: OPACITY.current,
activeView3D: 1,
autoCenter: true,
autoGround: true,
ptSizescaleFactor: 18,
dispMode: 0,
showInstance: true,
showStuff: true,
updateStuff: false,
planarStuff: false,
showTimer: true,
showFrame: false,
refineview: 0,
refinezoom: false,
//instanceMode: false,
};
```
```
function loadCameraParaMultiple(dir, filename) {
loadCameraParaSingle(dir, camList[i], i, modes[m], camList.length);
loadAllImgs(frame.frame_perspective, frame.frame_fisheye, frame.currImg);
}
```
## 顶点数组法显示点云
```
var particles = 500000;
var geometry = new THREE.BufferGeometry();
var positions = [];
var colors = [];
var color = new THREE.Color();
var n = 1000, n2 = n / 2; // particles spread in the cube
for ( var i = 0; i < particles; i ++ ) {
// positions
var x = Math.random() * n - n2;
var y = Math.random() * n - n2;
var z = Math.random() * n - n2;
positions.push( x, y, z );
// colors
var vx = ( x / n ) + 0.5;
var vy = ( y / n ) + 0.5;
var vz = ( z / n ) + 0.5;
color.setRGB( vx, vy, vz );
colors.push( color.r, color.g, color.b );
}
// color 和 position是默认的属性名称
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
geometry.computeBoundingSphere();
var material = new THREE.PointsMaterial( { size: 15, vertexColors: THREE.VertexColors } );
points = new THREE.Points( geometry, material );
scene.add( points );
```
## 将相机重建为一个几何体
```
var camGeo = new THREE.CylinderGeometry( 1, 0, 1.5, 4);
var singleCam = new THREE.Mesh( camGeo, new THREE.MeshBasicMaterial( { color: 0xffffff, transparent: true, opacity: 0.5}));
```
## 点云显示(顶点数组+ shader)
```
// 定义vertex shader
<script type="x-shader/x-vertex" id="vertexshader">
uniform float amplitude;
attribute float size; // 属性 与geometry.addAttribute对应
attribute vec3 customColor;
varying vec3 vColor;
void main() {
vColor = customColor;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_PointSize = size * ( 300.0 / -mvPosition.z );
gl_Position = projectionMatrix * mvPosition;
}
</script>
// 定义fragment shader
<script type="x-shader/x-fragment" id="fragmentshader">
uniform vec3 color;
uniform sampler2D texture;
varying vec3 vColor;
void main() {
gl_FragColor = vec4( color * vColor, 1.0 );
gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
}
</script>
// 定义materials
var material = new THREE.PointsMaterial( { size: 0.5, vertexColors: THREE.VertexColors } );
// 定义几何体
var geometry = new THREE.BufferGeometry();
var positions = new Float32Array( n_vertices * 3 );
var colors = new Float32Array( n_vertices * 3 );
var sizes = new Float32Array( n_vertices );
//临时变量
var vertex = new THREE.Vector3();
var color = new THREE.Color( 0xffffff );
for ( var i = 0; i < amount; i ++ ) {
vertex.x = ( Math.random() * 2 - 1 ) * radius;
vertex.y = ( Math.random() * 2 - 1 ) * radius;
vertex.z = ( Math.random() * 2 - 1 ) * radius;
vertex.toArray( positions, i * 3 );
// set color
if ( vertex.x < 0 ) {
color.setHSL( 0.5 + 0.1 * ( i / amount ), 0.7, 0.5 );
} else {
color.setHSL( 0.0 + 0.1 * ( i / amount ), 0.9, 0.5 );
}
color.toArray( colors, i * 3 );
// set point size
sizes[ i ] = 10;
}
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'customColor', new THREE.BufferAttribute( colors, 3 ) );
geometry.addAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );
```
#显示点云(顶点数组+shader2)
##文件shaderMaterial.js
```
PointCloudShader={
vertexShader:[
"uniform float size;",
"attribute vec3 customColor;",
"varying vec3 vColor;",
"varying float vAlpha;",
"void main()",
"{",
"vColor = customColor;",
"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
"gl_Position = projectionMatrix * mvPosition;",
"vAlpha = 1.0;",
"gl_PointSize = size;",
"}"
].join('\n'),
fragmentShader:[
"uniform vec3 color;",
"varying vec3 vColor;",
"varying float vAlpha;",
"void main() {",
"gl_FragColor = vec4(color*vColor, vAlpha );",
"}"
].join('\n')
}
```
## index.html文件
```
<script src='shaderMaterial.js'></script> // 引用文件
// ply 加载点云
var loader = new THREE.PLYLoader();
loader.load( './points.ply', function ( geometry ) {
var uniforms = {
size: { type: 'f', value: 1.0},
color: { value: new THREE.Color( 0xffffff ) }
};
// point cloud attributes-- array for each vertex
var attributes = {
customColor: { type: 'c', value: [] }
};
attributes.customColor.value = new Float32Array( geometry.attributes.position.count*3);
for ( var i = 0; i < attributes.customColor.value.length; i ++ ) {
attributes.customColor.value[ i] = geometry.attributes.color.array[i];
}
geometry.addAttribute( 'customColor', new THREE.BufferAttribute( attributes.customColor.value,3) );
// put the geomery into shader
shaderMaterial = new THREE.ShaderMaterial( {
uniforms: uniforms,
attributes: attributes,
vertexShader: PointCloudShader.vertexShader,
fragmentShader: PointCloudShader.fragmentShader
//alphaTest: 0.9,
//side: THREE.DoubleSide,
} );
var pointCloud = new THREE.PointCloud( geometry, shaderMaterial);
scene3D.add(pointCloud);
var center = pointCloud.geometry.boundingSphere.center;
// trackball的指向设置为网格的center
for (var v = 0; v < views.length; v++) {
views[v].controls.target.set(center.x, center.y, center.z);
views[v].controls.update();
}
});
```
##Three.js显示图像并调整曝光度
```
//Shader.js
PointCloudShader={
vertexShader:[
"uniform float size;",
"uniform int isColoring;",
"attribute vec3 defaultColor;",
"attribute vec3 realColor;",
"varying vec3 vColor;",
"varying float vAlpha;",
"void main()",
"{",
"if(isColoring==1){",
"vColor = realColor;",
"}" ,
"else{",
"vColor = defaultColor;",
"}",
"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
"gl_Position = projectionMatrix * mvPosition;",
"vAlpha = 1.0;",
"gl_PointSize = size;",
"}"
].join('\n'),
fragmentShader:[
"uniform vec3 color;",
"varying vec3 vColor;",
"varying float vAlpha;",
"void main() {",
"gl_FragColor = vec4(color*vColor, vAlpha );",
"}"
].join('\n')
}
ImageShader={
vertexShader:[
"varying vec2 vUv;",
"void main(){",
" vUv = uv;",
" gl_Position = projectionMatrix* modelViewMatrix*vec4(position,1.0);",
"}"
].join('\n'),
fragmentShader:[
"uniform sampler2D tDiffuse;",
"//uniform float exposure;",
"//uniform float brightMax;",
"varying vec2 vUv;",
"void main(){",
"vec4 color = texture2D(tDiffuse, vUv);",
"//gl_FragColor = vec4( pow( exposure * color.xyz, vec3( 0.474 ) ), 1.0 );",
"float Y = dot(vec4(0.30, 0.59, 0.11, 0.0), color);",
"float YD = exposure * (exposure/brightMax + 1.0) / (exposure + 1.0);",
"color *= YD;",
"gl_FragColor = vec4( color.xyz, 1.0 );",
"}"
].join('\n')
}
// HTML
<script src='shaders/shader.js'></script>
var material = new THREE.ShaderMaterial({
uniforms: {
tDiffuse: { value: new THREE.TextureLoader().load(imgFilePath)},
//exposure: { value: 0.125 },
//brightMax: { value: 0.5 }
},
vertexShader: ImageShader.vertexShader,
fragmentShader: ImageShader.fragmentShader,
depthTest: false,
depthWrite: false
});
```
var category
background ={
scene: {bgP: {}, bgF1:{}, bgF2:{}},
currImage: {imgP: null, imgF1: null, imgF2:null},
}
## 读取类别标签,每个标签插入一个按钮
getLabels(labelColorFile){ crateCategory(labelData)}
```
void readMeta(){
// 加载三种相机内参数
loadXmlIntrinsic();
void init();
autoLoad();
setupStat();
animate();
}
```
```
var controlHandler = {
orthographic: false,
meshView: false,
showAnnotation: true,
showCam: true,// 显示相机
imageOpacity: OPACITY.current,
activeView3D: 1,
autoCenter: true,
autoGround: true,
ptSizescaleFactor: 18,
dispMode: 0,
showInstance: true,
showStuff: true,
updateStuff: false,
planarStuff: false,
showTimer: true,
showFrame: false,
refineview: 0,
refinezoom: false,
//instanceMode: false,
};
```
```
function loadCameraParaMultiple(dir, filename) {
loadCameraParaSingle(dir, camList[i], i, modes[m], camList.length);
loadAllImgs(frame.frame_perspective, frame.frame_fisheye, frame.currImg);
}
```
## 顶点数组法显示点云
```
var particles = 500000;
var geometry = new THREE.BufferGeometry();
var positions = [];
var colors = [];
var color = new THREE.Color();
var n = 1000, n2 = n / 2; // particles spread in the cube
for ( var i = 0; i < particles; i ++ ) {
// positions
var x = Math.random() * n - n2;
var y = Math.random() * n - n2;
var z = Math.random() * n - n2;
positions.push( x, y, z );
// colors
var vx = ( x / n ) + 0.5;
var vy = ( y / n ) + 0.5;
var vz = ( z / n ) + 0.5;
color.setRGB( vx, vy, vz );
colors.push( color.r, color.g, color.b );
}
// color 和 position是默认的属性名称
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
geometry.computeBoundingSphere();
var material = new THREE.PointsMaterial( { size: 15, vertexColors: THREE.VertexColors } );
points = new THREE.Points( geometry, material );
scene.add( points );
```
## 将相机重建为一个几何体
```
var camGeo = new THREE.CylinderGeometry( 1, 0, 1.5, 4);
var singleCam = new THREE.Mesh( camGeo, new THREE.MeshBasicMaterial( { color: 0xffffff, transparent: true, opacity: 0.5}));
```
## 点云显示(顶点数组+ shader)
```
// 定义vertex shader
<script type="x-shader/x-vertex" id="vertexshader">
uniform float amplitude;
attribute float size; // 属性 与geometry.addAttribute对应
attribute vec3 customColor;
varying vec3 vColor;
void main() {
vColor = customColor;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_PointSize = size * ( 300.0 / -mvPosition.z );
gl_Position = projectionMatrix * mvPosition;
}
</script>
// 定义fragment shader
<script type="x-shader/x-fragment" id="fragmentshader">
uniform vec3 color;
uniform sampler2D texture;
varying vec3 vColor;
void main() {
gl_FragColor = vec4( color * vColor, 1.0 );
gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
}
</script>
// 定义materials
var material = new THREE.PointsMaterial( { size: 0.5, vertexColors: THREE.VertexColors } );
// 定义几何体
var geometry = new THREE.BufferGeometry();
var positions = new Float32Array( n_vertices * 3 );
var colors = new Float32Array( n_vertices * 3 );
var sizes = new Float32Array( n_vertices );
//临时变量
var vertex = new THREE.Vector3();
var color = new THREE.Color( 0xffffff );
for ( var i = 0; i < amount; i ++ ) {
vertex.x = ( Math.random() * 2 - 1 ) * radius;
vertex.y = ( Math.random() * 2 - 1 ) * radius;
vertex.z = ( Math.random() * 2 - 1 ) * radius;
vertex.toArray( positions, i * 3 );
// set color
if ( vertex.x < 0 ) {
color.setHSL( 0.5 + 0.1 * ( i / amount ), 0.7, 0.5 );
} else {
color.setHSL( 0.0 + 0.1 * ( i / amount ), 0.9, 0.5 );
}
color.toArray( colors, i * 3 );
// set point size
sizes[ i ] = 10;
}
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'customColor', new THREE.BufferAttribute( colors, 3 ) );
geometry.addAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );
```
#显示点云(顶点数组+shader2)
##文件shaderMaterial.js
```
PointCloudShader={
vertexShader:[
"uniform float size;",
"attribute vec3 customColor;",
"varying vec3 vColor;",
"varying float vAlpha;",
"void main()",
"{",
"vColor = customColor;",
"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
"gl_Position = projectionMatrix * mvPosition;",
"vAlpha = 1.0;",
"gl_PointSize = size;",
"}"
].join('\n'),
fragmentShader:[
"uniform vec3 color;",
"varying vec3 vColor;",
"varying float vAlpha;",
"void main() {",
"gl_FragColor = vec4(color*vColor, vAlpha );",
"}"
].join('\n')
}
```
## index.html文件
```
<script src='shaderMaterial.js'></script> // 引用文件
// ply 加载点云
var loader = new THREE.PLYLoader();
loader.load( './points.ply', function ( geometry ) {
var uniforms = {
size: { type: 'f', value: 1.0},
color: { value: new THREE.Color( 0xffffff ) }
};
// point cloud attributes-- array for each vertex
var attributes = {
customColor: { type: 'c', value: [] }
};
attributes.customColor.value = new Float32Array( geometry.attributes.position.count*3);
for ( var i = 0; i < attributes.customColor.value.length; i ++ ) {
attributes.customColor.value[ i] = geometry.attributes.color.array[i];
}
geometry.addAttribute( 'customColor', new THREE.BufferAttribute( attributes.customColor.value,3) );
// put the geomery into shader
shaderMaterial = new THREE.ShaderMaterial( {
uniforms: uniforms,
attributes: attributes,
vertexShader: PointCloudShader.vertexShader,
fragmentShader: PointCloudShader.fragmentShader
//alphaTest: 0.9,
//side: THREE.DoubleSide,
} );
var pointCloud = new THREE.PointCloud( geometry, shaderMaterial);
scene3D.add(pointCloud);
var center = pointCloud.geometry.boundingSphere.center;
// trackball的指向设置为网格的center
for (var v = 0; v < views.length; v++) {
views[v].controls.target.set(center.x, center.y, center.z);
views[v].controls.update();
}
});
```
##Three.js显示图像并调整曝光度
```
//Shader.js
PointCloudShader={
vertexShader:[
"uniform float size;",
"uniform int isColoring;",
"attribute vec3 defaultColor;",
"attribute vec3 realColor;",
"varying vec3 vColor;",
"varying float vAlpha;",
"void main()",
"{",
"if(isColoring==1){",
"vColor = realColor;",
"}" ,
"else{",
"vColor = defaultColor;",
"}",
"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
"gl_Position = projectionMatrix * mvPosition;",
"vAlpha = 1.0;",
"gl_PointSize = size;",
"}"
].join('\n'),
fragmentShader:[
"uniform vec3 color;",
"varying vec3 vColor;",
"varying float vAlpha;",
"void main() {",
"gl_FragColor = vec4(color*vColor, vAlpha );",
"}"
].join('\n')
}
ImageShader={
vertexShader:[
"varying vec2 vUv;",
"void main(){",
" vUv = uv;",
" gl_Position = projectionMatrix* modelViewMatrix*vec4(position,1.0);",
"}"
].join('\n'),
fragmentShader:[
"uniform sampler2D tDiffuse;",
"//uniform float exposure;",
"//uniform float brightMax;",
"varying vec2 vUv;",
"void main(){",
"vec4 color = texture2D(tDiffuse, vUv);",
"//gl_FragColor = vec4( pow( exposure * color.xyz, vec3( 0.474 ) ), 1.0 );",
"float Y = dot(vec4(0.30, 0.59, 0.11, 0.0), color);",
"float YD = exposure * (exposure/brightMax + 1.0) / (exposure + 1.0);",
"color *= YD;",
"gl_FragColor = vec4( color.xyz, 1.0 );",
"}"
].join('\n')
}
// HTML
<script src='shaders/shader.js'></script>
var material = new THREE.ShaderMaterial({
uniforms: {
tDiffuse: { value: new THREE.TextureLoader().load(imgFilePath)},
//exposure: { value: 0.125 },
//brightMax: { value: 0.5 }
},
vertexShader: ImageShader.vertexShader,
fragmentShader: ImageShader.fragmentShader,
depthTest: false,
depthWrite: false
});
```