Skip to content

Commit 3443f9c

Browse files
yomboprimemrdoob
yomboprime
authored and
mrdoob
committed
Minor fixes to GPUComputationRenderer and its demos: (mrdoob#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.
1 parent e0f9175 commit 3443f9c

File tree

4 files changed

+86
-73
lines changed

4 files changed

+86
-73
lines changed

‎examples/js/GPUComputationRenderer.js

Lines changed: 28 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,9 @@ function GPUComputationRenderer( sizeX, sizeY, renderer ) {
129129
dependencies: null,
130130
renderTargets: [],
131131
wrapS: null,
132-
wrapT: null
132+
wrapT: null,
133+
minFilter: THREE.NearestFilter,
134+
magFilter: THREE.NearestFilter
133135
};
134136

135137
this.variables.push( variable );
@@ -163,15 +165,16 @@ function GPUComputationRenderer( sizeX, sizeY, renderer ) {
163165
var variable = this.variables[ i ];
164166

165167
// Creates rendertargets and initialize them with input texture
166-
variable.renderTargets[ 0 ] = this.createRenderTarget( variable.wrapS, variable.wrapT );
167-
variable.renderTargets[ 1 ] = this.createRenderTarget( variable.wrapS, variable.wrapT );
168+
variable.renderTargets[ 0 ] = this.createRenderTarget( sizeX, sizeY, variable.wrapS, variable.wrapT, variable.minFilter, variable.magFilter );
169+
variable.renderTargets[ 1 ] = this.createRenderTarget( sizeX, sizeY, variable.wrapS, variable.wrapT, variable.minFilter, variable.magFilter );
168170
this.renderTexture( variable.initialValueTexture, variable.renderTargets[ 0 ] );
169171
this.renderTexture( variable.initialValueTexture, variable.renderTargets[ 1 ] );
170172

171173
// Adds dependencies uniforms to the ShaderMaterial
172174
var material = variable.material;
173175
var uniforms = material.uniforms;
174176
if ( variable.dependencies !== null ) {
177+
175178
for ( var d = 0; d < variable.dependencies.length; d++ ) {
176179

177180
var depVar = variable.dependencies[ d ];
@@ -196,7 +199,7 @@ function GPUComputationRenderer( sizeX, sizeY, renderer ) {
196199

197200
uniforms[ depVar.name ] = { value: null };
198201

199-
material.fragmentShader = "\nuniform sampler2D " + depVar.name + ";\n" + variable.material.fragmentShader;
202+
material.fragmentShader = "\nuniform sampler2D " + depVar.name + ";\n" + material.fragmentShader;
200203

201204
}
202205
}
@@ -213,17 +216,21 @@ function GPUComputationRenderer( sizeX, sizeY, renderer ) {
213216
var currentTextureIndex = this.currentTextureIndex;
214217
var nextTextureIndex = this.currentTextureIndex === 0 ? 1 : 0;
215218

216-
for ( var i = 0; i < this.variables.length; i++ ) {
219+
for ( var i = 0, il = this.variables.length; i < il; i++ ) {
217220

218221
var variable = this.variables[ i ];
219222

220223
// Sets texture dependencies uniforms
221-
var uniforms = variable.material.uniforms;
222-
for ( var d = 0; d < variable.dependencies.length; d++ ) {
224+
if ( variable.dependencies !== null ) {
223225

224-
var depVar = variable.dependencies[ d ];
226+
var uniforms = variable.material.uniforms;
227+
for ( var d = 0, dl = variable.dependencies.length; d < dl; d++ ) {
225228

226-
uniforms[ depVar.name ].value = depVar.renderTargets[ currentTextureIndex ].texture;
229+
var depVar = variable.dependencies[ d ];
230+
231+
uniforms[ depVar.name ].value = depVar.renderTargets[ currentTextureIndex ].texture;
232+
233+
}
227234

228235
}
229236

@@ -273,19 +280,22 @@ function GPUComputationRenderer( sizeX, sizeY, renderer ) {
273280
};
274281
this.createShaderMaterial = createShaderMaterial;
275282

276-
this.createRenderTarget = function( wrapS, wrapT, sizeXTexture, sizeYTexture ) {
277-
278-
wrapS = wrapS || THREE.ClampToEdgeWrapping;
279-
wrapT = wrapT || THREE.ClampToEdgeWrapping;
283+
this.createRenderTarget = function( sizeXTexture, sizeYTexture, wrapS, wrapT, minFilter, magFilter ) {
280284

281285
sizeXTexture = sizeXTexture || sizeX;
282286
sizeYTexture = sizeYTexture || sizeY;
283287

288+
wrapS = wrapS || THREE.ClampToEdgeWrapping;
289+
wrapT = wrapT || THREE.ClampToEdgeWrapping;
290+
291+
minFilter = minFilter || THREE.NearestFilter;
292+
magFilter = magFilter || THREE.NearestFilter;
293+
284294
var renderTarget = new THREE.WebGLRenderTarget( sizeXTexture, sizeYTexture, {
285295
wrapS: wrapS,
286296
wrapT: wrapT,
287-
minFilter: THREE.NearestFilter,
288-
magFilter: THREE.NearestFilter,
297+
minFilter: minFilter,
298+
magFilter: magFilter,
289299
format: THREE.RGBAFormat,
290300
type: THREE.FloatType,
291301
stencilBuffer: false
@@ -319,12 +329,15 @@ function GPUComputationRenderer( sizeX, sizeY, renderer ) {
319329

320330
this.doRenderTarget( passThruShader, output);
321331

332+
passThruUniforms.texture.value = null;
333+
322334
};
323335

324336
this.doRenderTarget = function( material, output ) {
325337

326338
mesh.material = material;
327339
renderer.render( scene, camera, output );
340+
mesh.material = passThruShader;
328341

329342
};
330343

‎examples/webgl_gpgpu_birds.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,10 +108,10 @@
108108
const float SPEED_LIMIT = 9.0;
109109

110110
float rand(vec2 co){
111-
return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
111+
return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
112112
}
113113

114-
void main() {
114+
void main() {
115115

116116
zoneRadius = seperationDistance + alignmentDistance + cohesionDistance;
117117
separationThresh = seperationDistance / zoneRadius;

‎examples/webgl_gpgpu_protoplanet.html

Lines changed: 53 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151

5252
#define delta ( 1.0 / 60.0 )
5353

54-
void main() {
54+
void main() {
5555

5656
vec2 uv = gl_FragCoord.xy / resolution.xy;
5757

@@ -63,7 +63,7 @@
6363
float mass = tmpVel.w;
6464

6565
if ( mass == 0.0 ) {
66-
vel = vec3( 0.0 );
66+
vel = vec3( 0.0 );
6767
}
6868

6969
// Dynamics
@@ -109,80 +109,80 @@
109109
if ( mass > 0.0 ) {
110110

111111

112-
float radius = radiusFromMass( mass );
112+
float radius = radiusFromMass( mass );
113113

114-
vec3 acceleration = vec3( 0.0 );
114+
vec3 acceleration = vec3( 0.0 );
115115

116-
// Gravity interaction
117-
for ( float y = 0.0; y < height; y++ ) {
116+
// Gravity interaction
117+
for ( float y = 0.0; y < height; y++ ) {
118118

119-
for ( float x = 0.0; x < width; x++ ) {
119+
for ( float x = 0.0; x < width; x++ ) {
120120

121-
vec2 secondParticleCoords = vec2( x + 0.5, y + 0.5 ) / resolution.xy;
122-
vec3 pos2 = texture2D( texturePosition, secondParticleCoords ).xyz;
123-
vec4 velTemp2 = texture2D( textureVelocity, secondParticleCoords );
124-
vec3 vel2 = velTemp2.xyz;
125-
float mass2 = velTemp2.w;
121+
vec2 secondParticleCoords = vec2( x + 0.5, y + 0.5 ) / resolution.xy;
122+
vec3 pos2 = texture2D( texturePosition, secondParticleCoords ).xyz;
123+
vec4 velTemp2 = texture2D( textureVelocity, secondParticleCoords );
124+
vec3 vel2 = velTemp2.xyz;
125+
float mass2 = velTemp2.w;
126126

127-
float idParticle2 = secondParticleCoords.y * resolution.x + secondParticleCoords.x;
127+
float idParticle2 = secondParticleCoords.y * resolution.x + secondParticleCoords.x;
128128

129-
if ( idParticle == idParticle2 ) {
130-
continue;
131-
}
129+
if ( idParticle == idParticle2 ) {
130+
continue;
131+
}
132132

133-
if ( mass2 == 0.0 ) {
134-
continue;
135-
}
133+
if ( mass2 == 0.0 ) {
134+
continue;
135+
}
136136

137-
vec3 dPos = pos2 - pos;
138-
float distance = length( dPos );
139-
float radius2 = radiusFromMass( mass2 );
137+
vec3 dPos = pos2 - pos;
138+
float distance = length( dPos );
139+
float radius2 = radiusFromMass( mass2 );
140140

141-
if ( distance == 0.0 ) {
142-
continue;
143-
}
141+
if ( distance == 0.0 ) {
142+
continue;
143+
}
144144

145-
// Checks collision
145+
// Checks collision
146146

147-
if ( distance < radius + radius2 ) {
148-
149-
if ( idParticle < idParticle2 ) {
147+
if ( distance < radius + radius2 ) {
150148

151-
// This particle is aggregated by the other
152-
vel = ( vel * mass + vel2 * mass2 ) / ( mass + mass2 );
153-
mass += mass2;
154-
radius = radiusFromMass( mass );
149+
if ( idParticle < idParticle2 ) {
155150

156-
}
157-
else {
151+
// This particle is aggregated by the other
152+
vel = ( vel * mass + vel2 * mass2 ) / ( mass + mass2 );
153+
mass += mass2;
154+
radius = radiusFromMass( mass );
155+
156+
}
157+
else {
158+
159+
// This particle dies
160+
mass = 0.0;
161+
radius = 0.0;
162+
vel = vec3( 0.0 );
163+
break;
158164

159-
// This particle dies
160-
mass = 0.0;
161-
radius = 0.0;
162-
vel = vec3( 0.0 );
163-
break;
165+
}
164166

165167
}
166-
167-
}
168168

169-
float distanceSq = distance * distance;
169+
float distanceSq = distance * distance;
170170

171-
float gravityField = gravityConstant * mass2 / distanceSq;
171+
float gravityField = gravityConstant * mass2 / distanceSq;
172172

173-
gravityField = min( gravityField, 1000.0 );
173+
gravityField = min( gravityField, 1000.0 );
174174

175-
acceleration += gravityField * normalize( dPos );
175+
acceleration += gravityField * normalize( dPos );
176176

177-
}
177+
}
178178

179-
if ( mass == 0.0 ) {
180-
break;
179+
if ( mass == 0.0 ) {
180+
break;
181+
}
181182
}
182-
}
183183

184-
// Dynamics
185-
vel += delta * acceleration;
184+
// Dynamics
185+
vel += delta * acceleration;
186186

187187
}
188188

@@ -253,7 +253,7 @@
253253

254254
float f = length( gl_PointCoord - vec2( 0.5, 0.5 ) );
255255
if ( f > 0.5 ) {
256-
discard;
256+
discard;
257257
}
258258
gl_FragColor = vColor;
259259

‎examples/webgl_gpgpu_water.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -341,8 +341,8 @@
341341
var material = new THREE.ShaderMaterial( {
342342
uniforms: THREE.UniformsUtils.merge( [
343343
THREE.ShaderLib[ 'phong' ].uniforms,
344-
{
345-
heightmap: { value: null },
344+
{
345+
heightmap: { value: null }
346346
}
347347
] ),
348348
vertexShader: document.getElementById( 'waterVertexShader' ).textContent,
@@ -437,7 +437,7 @@
437437
var x = i * 128 / WIDTH;
438438
var y = j * 128 / WIDTH;
439439

440-
pixels[ p + 0 ] = noise( x, y, 0 );
440+
pixels[ p + 0 ] = noise( x, y, 123.4 );
441441
pixels[ p + 1 ] = 0;
442442
pixels[ p + 2 ] = 0;
443443
pixels[ p + 3 ] = 1;

0 commit comments

Comments
 (0)