From 3443f9c894cbe2a681843978e77b5b74fca98d1a Mon Sep 17 00:00:00 2001 From: Juan Jose Luna Espinosa Date: Sun, 12 Jun 2016 18:29:02 +0200 Subject: [PATCH] Minor fixes to GPUComputationRenderer and its demos: (#9118) - Added texture minifier and magnifier filters to variables. - Added missing null dependencies check in compute() - Two simple loop optimizations (store count in a variable) - Water demo: Improved noise appearance by raising noise z parameter. - Code formatting (indentation) and clean up. --- examples/js/GPUComputationRenderer.js | 43 +++++++---- examples/webgl_gpgpu_birds.html | 4 +- examples/webgl_gpgpu_protoplanet.html | 106 +++++++++++++------------- examples/webgl_gpgpu_water.html | 6 +- 4 files changed, 86 insertions(+), 73 deletions(-) diff --git a/examples/js/GPUComputationRenderer.js b/examples/js/GPUComputationRenderer.js index 2d3b08eed6..5632b4c158 100644 --- a/examples/js/GPUComputationRenderer.js +++ b/examples/js/GPUComputationRenderer.js @@ -129,7 +129,9 @@ function GPUComputationRenderer( sizeX, sizeY, renderer ) { dependencies: null, renderTargets: [], wrapS: null, - wrapT: null + wrapT: null, + minFilter: THREE.NearestFilter, + magFilter: THREE.NearestFilter }; this.variables.push( variable ); @@ -163,8 +165,8 @@ function GPUComputationRenderer( sizeX, sizeY, renderer ) { var variable = this.variables[ i ]; // Creates rendertargets and initialize them with input texture - variable.renderTargets[ 0 ] = this.createRenderTarget( variable.wrapS, variable.wrapT ); - variable.renderTargets[ 1 ] = this.createRenderTarget( variable.wrapS, variable.wrapT ); + variable.renderTargets[ 0 ] = this.createRenderTarget( sizeX, sizeY, variable.wrapS, variable.wrapT, variable.minFilter, variable.magFilter ); + variable.renderTargets[ 1 ] = this.createRenderTarget( sizeX, sizeY, variable.wrapS, variable.wrapT, variable.minFilter, variable.magFilter ); this.renderTexture( variable.initialValueTexture, variable.renderTargets[ 0 ] ); this.renderTexture( variable.initialValueTexture, variable.renderTargets[ 1 ] ); @@ -172,6 +174,7 @@ function GPUComputationRenderer( sizeX, sizeY, renderer ) { var material = variable.material; var uniforms = material.uniforms; if ( variable.dependencies !== null ) { + for ( var d = 0; d < variable.dependencies.length; d++ ) { var depVar = variable.dependencies[ d ]; @@ -196,7 +199,7 @@ function GPUComputationRenderer( sizeX, sizeY, renderer ) { uniforms[ depVar.name ] = { value: null }; - material.fragmentShader = "\nuniform sampler2D " + depVar.name + ";\n" + variable.material.fragmentShader; + material.fragmentShader = "\nuniform sampler2D " + depVar.name + ";\n" + material.fragmentShader; } } @@ -213,17 +216,21 @@ function GPUComputationRenderer( sizeX, sizeY, renderer ) { var currentTextureIndex = this.currentTextureIndex; var nextTextureIndex = this.currentTextureIndex === 0 ? 1 : 0; - for ( var i = 0; i < this.variables.length; i++ ) { + for ( var i = 0, il = this.variables.length; i < il; i++ ) { var variable = this.variables[ i ]; // Sets texture dependencies uniforms - var uniforms = variable.material.uniforms; - for ( var d = 0; d < variable.dependencies.length; d++ ) { + if ( variable.dependencies !== null ) { - var depVar = variable.dependencies[ d ]; + var uniforms = variable.material.uniforms; + for ( var d = 0, dl = variable.dependencies.length; d < dl; d++ ) { - uniforms[ depVar.name ].value = depVar.renderTargets[ currentTextureIndex ].texture; + var depVar = variable.dependencies[ d ]; + + uniforms[ depVar.name ].value = depVar.renderTargets[ currentTextureIndex ].texture; + + } } @@ -273,19 +280,22 @@ function GPUComputationRenderer( sizeX, sizeY, renderer ) { }; this.createShaderMaterial = createShaderMaterial; - this.createRenderTarget = function( wrapS, wrapT, sizeXTexture, sizeYTexture ) { - - wrapS = wrapS || THREE.ClampToEdgeWrapping; - wrapT = wrapT || THREE.ClampToEdgeWrapping; + this.createRenderTarget = function( sizeXTexture, sizeYTexture, wrapS, wrapT, minFilter, magFilter ) { sizeXTexture = sizeXTexture || sizeX; sizeYTexture = sizeYTexture || sizeY; + wrapS = wrapS || THREE.ClampToEdgeWrapping; + wrapT = wrapT || THREE.ClampToEdgeWrapping; + + minFilter = minFilter || THREE.NearestFilter; + magFilter = magFilter || THREE.NearestFilter; + var renderTarget = new THREE.WebGLRenderTarget( sizeXTexture, sizeYTexture, { wrapS: wrapS, wrapT: wrapT, - minFilter: THREE.NearestFilter, - magFilter: THREE.NearestFilter, + minFilter: minFilter, + magFilter: magFilter, format: THREE.RGBAFormat, type: THREE.FloatType, stencilBuffer: false @@ -319,12 +329,15 @@ function GPUComputationRenderer( sizeX, sizeY, renderer ) { this.doRenderTarget( passThruShader, output); + passThruUniforms.texture.value = null; + }; this.doRenderTarget = function( material, output ) { mesh.material = material; renderer.render( scene, camera, output ); + mesh.material = passThruShader; }; diff --git a/examples/webgl_gpgpu_birds.html b/examples/webgl_gpgpu_birds.html index 7ff39747ab..27c71fc065 100644 --- a/examples/webgl_gpgpu_birds.html +++ b/examples/webgl_gpgpu_birds.html @@ -108,10 +108,10 @@ const float SPEED_LIMIT = 9.0; float rand(vec2 co){ - return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453); + return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453); } - void main() { + void main() { zoneRadius = seperationDistance + alignmentDistance + cohesionDistance; separationThresh = seperationDistance / zoneRadius; diff --git a/examples/webgl_gpgpu_protoplanet.html b/examples/webgl_gpgpu_protoplanet.html index cf27b1c73b..5c1682beb6 100644 --- a/examples/webgl_gpgpu_protoplanet.html +++ b/examples/webgl_gpgpu_protoplanet.html @@ -51,7 +51,7 @@ #define delta ( 1.0 / 60.0 ) - void main() { + void main() { vec2 uv = gl_FragCoord.xy / resolution.xy; @@ -63,7 +63,7 @@ float mass = tmpVel.w; if ( mass == 0.0 ) { - vel = vec3( 0.0 ); + vel = vec3( 0.0 ); } // Dynamics @@ -109,80 +109,80 @@ if ( mass > 0.0 ) { - float radius = radiusFromMass( mass ); + float radius = radiusFromMass( mass ); - vec3 acceleration = vec3( 0.0 ); + vec3 acceleration = vec3( 0.0 ); - // Gravity interaction - for ( float y = 0.0; y < height; y++ ) { + // Gravity interaction + for ( float y = 0.0; y < height; y++ ) { - for ( float x = 0.0; x < width; x++ ) { + for ( float x = 0.0; x < width; x++ ) { - vec2 secondParticleCoords = vec2( x + 0.5, y + 0.5 ) / resolution.xy; - vec3 pos2 = texture2D( texturePosition, secondParticleCoords ).xyz; - vec4 velTemp2 = texture2D( textureVelocity, secondParticleCoords ); - vec3 vel2 = velTemp2.xyz; - float mass2 = velTemp2.w; + vec2 secondParticleCoords = vec2( x + 0.5, y + 0.5 ) / resolution.xy; + vec3 pos2 = texture2D( texturePosition, secondParticleCoords ).xyz; + vec4 velTemp2 = texture2D( textureVelocity, secondParticleCoords ); + vec3 vel2 = velTemp2.xyz; + float mass2 = velTemp2.w; - float idParticle2 = secondParticleCoords.y * resolution.x + secondParticleCoords.x; + float idParticle2 = secondParticleCoords.y * resolution.x + secondParticleCoords.x; - if ( idParticle == idParticle2 ) { - continue; - } + if ( idParticle == idParticle2 ) { + continue; + } - if ( mass2 == 0.0 ) { - continue; - } + if ( mass2 == 0.0 ) { + continue; + } - vec3 dPos = pos2 - pos; - float distance = length( dPos ); - float radius2 = radiusFromMass( mass2 ); + vec3 dPos = pos2 - pos; + float distance = length( dPos ); + float radius2 = radiusFromMass( mass2 ); - if ( distance == 0.0 ) { - continue; - } + if ( distance == 0.0 ) { + continue; + } - // Checks collision + // Checks collision - if ( distance < radius + radius2 ) { - - if ( idParticle < idParticle2 ) { + if ( distance < radius + radius2 ) { - // This particle is aggregated by the other - vel = ( vel * mass + vel2 * mass2 ) / ( mass + mass2 ); - mass += mass2; - radius = radiusFromMass( mass ); + if ( idParticle < idParticle2 ) { - } - else { + // This particle is aggregated by the other + vel = ( vel * mass + vel2 * mass2 ) / ( mass + mass2 ); + mass += mass2; + radius = radiusFromMass( mass ); + + } + else { + + // This particle dies + mass = 0.0; + radius = 0.0; + vel = vec3( 0.0 ); + break; - // This particle dies - mass = 0.0; - radius = 0.0; - vel = vec3( 0.0 ); - break; + } } - - } - float distanceSq = distance * distance; + float distanceSq = distance * distance; - float gravityField = gravityConstant * mass2 / distanceSq; + float gravityField = gravityConstant * mass2 / distanceSq; - gravityField = min( gravityField, 1000.0 ); + gravityField = min( gravityField, 1000.0 ); - acceleration += gravityField * normalize( dPos ); + acceleration += gravityField * normalize( dPos ); - } + } - if ( mass == 0.0 ) { - break; + if ( mass == 0.0 ) { + break; + } } - } - // Dynamics - vel += delta * acceleration; + // Dynamics + vel += delta * acceleration; } @@ -253,7 +253,7 @@ float f = length( gl_PointCoord - vec2( 0.5, 0.5 ) ); if ( f > 0.5 ) { - discard; + discard; } gl_FragColor = vColor; diff --git a/examples/webgl_gpgpu_water.html b/examples/webgl_gpgpu_water.html index c4ee415a80..9a63d0319d 100644 --- a/examples/webgl_gpgpu_water.html +++ b/examples/webgl_gpgpu_water.html @@ -341,8 +341,8 @@ var material = new THREE.ShaderMaterial( { uniforms: THREE.UniformsUtils.merge( [ THREE.ShaderLib[ 'phong' ].uniforms, - { - heightmap: { value: null }, + { + heightmap: { value: null } } ] ), vertexShader: document.getElementById( 'waterVertexShader' ).textContent, @@ -437,7 +437,7 @@ var x = i * 128 / WIDTH; var y = j * 128 / WIDTH; - pixels[ p + 0 ] = noise( x, y, 0 ); + pixels[ p + 0 ] = noise( x, y, 123.4 ); pixels[ p + 1 ] = 0; pixels[ p + 2 ] = 0; pixels[ p + 3 ] = 1; -- GitLab