From e1494a05556d0356f764b5993b995751325ebbc0 Mon Sep 17 00:00:00 2001 From: aardgoose Date: Mon, 29 May 2017 21:21:45 +0100 Subject: [PATCH 1/5] use scene.background for skybox rather than hand rolled version --- examples/webgl_nearestneighbour.html | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/examples/webgl_nearestneighbour.html b/examples/webgl_nearestneighbour.html index 0bbe42c57834cd..989da60aecbda2 100644 --- a/examples/webgl_nearestneighbour.html +++ b/examples/webgl_nearestneighbour.html @@ -96,22 +96,17 @@ controls.movementSpeed = 100; controls.lookSpeed = 0.1; - var textureLoader = new THREE.TextureLoader(); - - var materials = [ + var cubeTextureLoader = new THREE.CubeTextureLoader(); - new THREE.MeshBasicMaterial( { map: textureLoader.load( 'textures/cube/skybox/px.jpg' ) } ), // right - new THREE.MeshBasicMaterial( { map: textureLoader.load( 'textures/cube/skybox/nx.jpg' ) } ), // left - new THREE.MeshBasicMaterial( { map: textureLoader.load( 'textures/cube/skybox/py.jpg' ) } ), // top - new THREE.MeshBasicMaterial( { map: textureLoader.load( 'textures/cube/skybox/ny.jpg' ) } ), // bottom - new THREE.MeshBasicMaterial( { map: textureLoader.load( 'textures/cube/skybox/pz.jpg' ) } ), // back - new THREE.MeshBasicMaterial( { map: textureLoader.load( 'textures/cube/skybox/nz.jpg' ) } ) // front + cubeTextureLoader.setPath( 'textures/cube/skybox/' ); - ]; + var cubeTexture = cubeTextureLoader.load( [ + 'px.jpg', 'nx.jpg', + 'py.jpg', 'ny.jpg', + 'pz.jpg', 'nz.jpg', + ] ); - mesh = new THREE.Mesh( new THREE.BoxGeometry( 10000, 10000, 10000, 7, 7, 7 ), materials ); - mesh.scale.x = - 1; - scene.add(mesh); + scene.background = cubeTexture; // @@ -121,7 +116,11 @@ document.body.appendChild( renderer.domElement ); // create the custom shader + + var textureLoader = new THREE.TextureLoader(); + var imagePreviewTexture = textureLoader.load( 'textures/crate.gif'); + imagePreviewTexture.minFilter = THREE.LinearMipMapLinearFilter; imagePreviewTexture.magFilter = THREE.LinearFilter; From 3bbb8eee07bdfd875f5e59d3bf695e27d7bdc1cb Mon Sep 17 00:00:00 2001 From: aardgoose Date: Mon, 29 May 2017 21:32:15 +0100 Subject: [PATCH 2/5] coding style corrections --- examples/webgl_nearestneighbour.html | 50 ++++++++++++++++++---------- 1 file changed, 32 insertions(+), 18 deletions(-) diff --git a/examples/webgl_nearestneighbour.html b/examples/webgl_nearestneighbour.html index 989da60aecbda2..f3726a708e0946 100644 --- a/examples/webgl_nearestneighbour.html +++ b/examples/webgl_nearestneighbour.html @@ -63,8 +63,8 @@ void main() { - gl_FragColor = texture2D(tex1, gl_PointCoord); - gl_FragColor.r = (1.0 - gl_FragColor.r) * vAlpha + gl_FragColor.r; + gl_FragColor = texture2D( tex1, gl_PointCoord ); + gl_FragColor.r = ( 1.0 - gl_FragColor.r ) * vAlpha + gl_FragColor.r; } @@ -77,7 +77,7 @@ var objects = []; - var amountOfParticles = 500000, maxDistance = Math.pow(120, 2); + var amountOfParticles = 500000, maxDistance = Math.pow( 120, 2 ); var positions, alphas, particles, _particleGeom; var clock = new THREE.Clock(); @@ -88,7 +88,7 @@ function init() { - camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000000); + camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000000 ); scene = new THREE.Scene(); @@ -96,6 +96,8 @@ controls.movementSpeed = 100; controls.lookSpeed = 0.1; + + // add a skybox background var cubeTextureLoader = new THREE.CubeTextureLoader(); cubeTextureLoader.setPath( 'textures/cube/skybox/' ); @@ -132,12 +134,14 @@ vertexShader: document.getElementById( 'vertexshader' ).textContent, fragmentShader: document.getElementById( 'fragmentshader' ).textContent, transparent: true - }); + } ); //create particles with buffer geometry - var distanceFunction = function(a, b){ - return Math.pow(a[0] - b[0], 2) + Math.pow(a[1] - b[1], 2) + Math.pow(a[2] - b[2], 2); + var distanceFunction = function( a, b ) { + + return Math.pow( a[ 0 ] - b [0 ], 2 ) + Math.pow( a[ 1 ] - b[ 1 ], 2 ) + Math.pow( a[ 2 ] - b[ 2 ], 2 ); + }; positions = new Float32Array( amountOfParticles * 3 ); @@ -149,11 +153,14 @@ particles = new THREE.Points( _particleGeom, pointShaderMaterial ); - for (var x = 0; x < amountOfParticles; x++) { + for ( var x = 0; x < amountOfParticles; x ++ ) { + positions[ x * 3 + 0 ] = Math.random() * 1000; positions[ x * 3 + 1 ] = Math.random() * 1000; positions[ x * 3 + 2 ] = Math.random() * 1000; - alphas[x] = 1.0; + + alphas[ x ] = 1.0; + } @@ -162,10 +169,10 @@ // creating the kdtree takes a lot of time to execute, in turn the nearest neighbour search will be much faster kdtree = new THREE.TypedArrayUtils.Kdtree( positions, distanceFunction, 3 ); - console.log('TIME building kdtree', new Date().getTime() - measureStart); + console.log( 'TIME building kdtree', new Date().getTime() - measureStart ); // display particles after the kd-tree was generated and the sorting of the positions-array is done - scene.add(particles); + scene.add( particles ); window.addEventListener( 'resize', onWindowResize, false ); @@ -186,7 +193,7 @@ requestAnimationFrame( animate ); // - displayNearest(camera.position); + displayNearest( camera.position ); controls.update( clock.getDelta() ); @@ -194,38 +201,45 @@ } - function displayNearest(position) { + function displayNearest( position ) { // take the nearest 200 around him. distance^2 'cause we use the manhattan distance and no square is applied in the distance function - var imagePositionsInRange = kdtree.nearest([position.x, position.y, position.z], 100, maxDistance); + var imagePositionsInRange = kdtree.nearest( [ position.x, position.y, position.z ], 100, maxDistance ); // We combine the nearest neighbour with a view frustum. Doesn't make sense if we change the sprites not in our view... well maybe it does. Whatever you want. var _frustum = new THREE.Frustum(); var _projScreenMatrix = new THREE.Matrix4(); + camera.matrixWorldInverse.getInverse( camera.matrixWorld ); _projScreenMatrix.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse ); _frustum.setFromMatrix( _projScreenMatrix ); for ( var i = 0, il = imagePositionsInRange.length; i < il; i ++ ) { - var object = imagePositionsInRange[i]; + + var object = imagePositionsInRange[ i ]; var objectPoint = new THREE.Vector3().fromArray( object[ 0 ].obj ); - if (_frustum.containsPoint(objectPoint)){ + if ( _frustum.containsPoint( objectPoint ) ) { - var objectIndex = object[0].pos; + var objectIndex = object[ 0 ].pos; // set the alpha according to distance - alphas[ objectIndex ] = 1.0 / maxDistance * object[1]; + alphas[ objectIndex ] = 1.0 / maxDistance * object[ 1 ]; + // update the attribute _particleGeom.attributes.alpha.needsUpdate = true; + } + } + } init(); animate(); + From 9b636cef975fead98a48e214b654dc77e2636b8b Mon Sep 17 00:00:00 2001 From: aardgoose Date: Mon, 29 May 2017 21:36:59 +0100 Subject: [PATCH 3/5] more whitespace fixes --- examples/webgl_nearestneighbour.html | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/examples/webgl_nearestneighbour.html b/examples/webgl_nearestneighbour.html index f3726a708e0946..9e84ccc3f880e1 100644 --- a/examples/webgl_nearestneighbour.html +++ b/examples/webgl_nearestneighbour.html @@ -96,7 +96,6 @@ controls.movementSpeed = 100; controls.lookSpeed = 0.1; - // add a skybox background var cubeTextureLoader = new THREE.CubeTextureLoader(); @@ -121,7 +120,7 @@ var textureLoader = new THREE.TextureLoader(); - var imagePreviewTexture = textureLoader.load( 'textures/crate.gif'); + var imagePreviewTexture = textureLoader.load( 'textures/crate.gif' ); imagePreviewTexture.minFilter = THREE.LinearMipMapLinearFilter; imagePreviewTexture.magFilter = THREE.LinearFilter; @@ -138,7 +137,7 @@ //create particles with buffer geometry - var distanceFunction = function( a, b ) { + var distanceFunction = function ( a, b ) { return Math.pow( a[ 0 ] - b [0 ], 2 ) + Math.pow( a[ 1 ] - b[ 1 ], 2 ) + Math.pow( a[ 2 ] - b[ 2 ], 2 ); @@ -178,7 +177,7 @@ } - function onWindowResize() { + function onWindowResize () { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); @@ -188,7 +187,7 @@ controls.handleResize(); } - function animate() { + function animate () { requestAnimationFrame( animate ); @@ -201,7 +200,7 @@ } - function displayNearest( position ) { + function displayNearest ( position ) { // take the nearest 200 around him. distance^2 'cause we use the manhattan distance and no square is applied in the distance function var imagePositionsInRange = kdtree.nearest( [ position.x, position.y, position.z ], 100, maxDistance ); From f9b273d80e12c15356a31be8841d920f3793ef2b Mon Sep 17 00:00:00 2001 From: aardgoose Date: Tue, 30 May 2017 09:05:09 +0100 Subject: [PATCH 4/5] fixed function declarations --- examples/webgl_nearestneighbour.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/webgl_nearestneighbour.html b/examples/webgl_nearestneighbour.html index 9e84ccc3f880e1..902e3f9eea9e72 100644 --- a/examples/webgl_nearestneighbour.html +++ b/examples/webgl_nearestneighbour.html @@ -177,7 +177,7 @@ } - function onWindowResize () { + function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); @@ -187,7 +187,7 @@ controls.handleResize(); } - function animate () { + function animate() { requestAnimationFrame( animate ); @@ -200,7 +200,7 @@ } - function displayNearest ( position ) { + function displayNearest( position ) { // take the nearest 200 around him. distance^2 'cause we use the manhattan distance and no square is applied in the distance function var imagePositionsInRange = kdtree.nearest( [ position.x, position.y, position.z ], 100, maxDistance ); From 315e63685970967d7e1f5d5ddd226183b27a31a4 Mon Sep 17 00:00:00 2001 From: aardgoose Date: Tue, 30 May 2017 09:43:22 +0100 Subject: [PATCH 5/5] remove unused variables --- examples/webgl_nearestneighbour.html | 3 --- 1 file changed, 3 deletions(-) diff --git a/examples/webgl_nearestneighbour.html b/examples/webgl_nearestneighbour.html index 902e3f9eea9e72..ba0ca1c5c8bc26 100644 --- a/examples/webgl_nearestneighbour.html +++ b/examples/webgl_nearestneighbour.html @@ -72,11 +72,8 @@