Skip to content

Commit

Permalink
Always use strings for uniform names in examples
Browse files Browse the repository at this point in the history 
Uniforms of materials should be set and accessed by indexing with a string rather than using the dot operator.

This makes the code more compatible with JavaScript tools such as Closure compiler. If the uniform names are not strings, Closure compiler might try to optimize the uniform names, which would create a mismatch between the shader code and the JS code.

This commit should fix the majority of instances where uniforms were being accessed using the dot operator.
  • Loading branch information
@Oletus
Oletus committed Jan 1, 2019
1 parent a48ecad commit c3144a2
Show file tree
Hide file tree
Showing 36 changed files with 312 additions and 312 deletions.
74 changes: 37 additions & 37 deletions examples/js/objects/Fire.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ THREE.Fire = function ( geometry, options ) {

}

this.sourceMaterial.uniforms.sourceMap.value = this.internalSource;
this.sourceMaterial.uniforms[ "sourceMap" ].value = this.internalSource;
this.sourceMaterial.needsUpdate = true;

return this.sourceData;
Expand Down Expand Up @@ -121,7 +121,7 @@ THREE.Fire = function ( geometry, options ) {
// (0 -> 127 = 0.0 -> 1.0, 128 -> 255 = -1.0 -> 0.0 )
this.setSourceMap = function ( texture ) {

this.sourceMaterial.uniforms.sourceMap.value = texture;
this.sourceMaterial.uniforms[ "sourceMap" ].value = texture;

};

Expand Down Expand Up @@ -190,8 +190,8 @@ THREE.Fire = function ( geometry, options ) {
transparent: false
} );

this.diffuseMaterial.uniforms.oneOverWidth.value = oneOverWidth;
this.diffuseMaterial.uniforms.oneOverHeight.value = oneOverHeight;
this.diffuseMaterial.uniforms[ "oneOverWidth" ].value = oneOverWidth;
this.diffuseMaterial.uniforms[ "oneOverHeight" ].value = oneOverHeight;

this.diffuseMesh = new THREE.Mesh( this.fieldGeometry, this.diffuseMaterial );
this.fieldScene.add( this.diffuseMesh );
Expand All @@ -206,8 +206,8 @@ THREE.Fire = function ( geometry, options ) {
transparent: false
} );

this.driftMaterial.uniforms.oneOverWidth.value = oneOverWidth;
this.driftMaterial.uniforms.oneOverHeight.value = oneOverHeight;
this.driftMaterial.uniforms[ "oneOverWidth" ].value = oneOverWidth;
this.driftMaterial.uniforms[ "oneOverHeight" ].value = oneOverHeight;

this.driftMesh = new THREE.Mesh( this.fieldGeometry, this.driftMaterial );
this.fieldScene.add( this.driftMesh );
Expand All @@ -222,8 +222,8 @@ THREE.Fire = function ( geometry, options ) {
transparent: false
} );

this.projMaterial1.uniforms.oneOverWidth.value = oneOverWidth;
this.projMaterial1.uniforms.oneOverHeight.value = oneOverHeight;
this.projMaterial1.uniforms[ "oneOverWidth" ].value = oneOverWidth;
this.projMaterial1.uniforms[ "oneOverHeight" ].value = oneOverHeight;

this.projMesh1 = new THREE.Mesh( this.fieldGeometry, this.projMaterial1 );
this.fieldScene.add( this.projMesh1 );
Expand All @@ -239,8 +239,8 @@ THREE.Fire = function ( geometry, options ) {
} );


this.projMaterial2.uniforms.oneOverWidth.value = oneOverWidth;
this.projMaterial2.uniforms.oneOverHeight.value = oneOverHeight;
this.projMaterial2.uniforms[ "oneOverWidth" ].value = oneOverWidth;
this.projMaterial2.uniforms[ "oneOverHeight" ].value = oneOverHeight;

this.projMesh2 = new THREE.Mesh( this.fieldGeometry, this.projMaterial2 );
this.fieldScene.add( this.projMesh2 );
Expand All @@ -256,8 +256,8 @@ THREE.Fire = function ( geometry, options ) {
} );


this.projMaterial3.uniforms.oneOverWidth.value = oneOverWidth;
this.projMaterial3.uniforms.oneOverHeight.value = oneOverHeight;
this.projMaterial3.uniforms[ "oneOverWidth" ].value = oneOverWidth;
this.projMaterial3.uniforms[ "oneOverHeight" ].value = oneOverHeight;

this.projMesh3 = new THREE.Mesh( this.fieldGeometry, this.projMaterial3 );
this.fieldScene.add( this.projMesh3 );
Expand All @@ -280,31 +280,31 @@ THREE.Fire = function ( geometry, options ) {
transparent: true
} );

this.material.uniforms.densityMap.value = this.field1.texture;
this.material.uniforms[ "densityMap" ].value = this.field1.texture;

this.configShaders = function ( dt ) {

this.diffuseMaterial.uniforms.diffuse.value = dt * 0.05 * this.diffuse;
this.diffuseMaterial.uniforms.viscosity.value = dt * 0.05 * this.viscosity;
this.diffuseMaterial.uniforms.expansion.value = Math.exp( this.expansion * - 1.0 );
this.diffuseMaterial.uniforms.swirl.value = Math.exp( this.swirl * - 0.1 );
this.diffuseMaterial.uniforms.drag.value = Math.exp( this.drag * - 0.1 );
this.diffuseMaterial.uniforms.burnRate.value = this.burnRate * dt * 0.01;
this.driftMaterial.uniforms.windVector.value = this.windVector;
this.driftMaterial.uniforms.airSpeed.value = dt * this.airSpeed * 0.001 * textureHeight;
this.material.uniforms.color1.value = this.color1;
this.material.uniforms.color2.value = this.color2;
this.material.uniforms.color3.value = this.color3;
this.material.uniforms.colorBias.value = this.colorBias;
this.diffuseMaterial.uniforms[ "diffuse" ].value = dt * 0.05 * this.diffuse;
this.diffuseMaterial.uniforms[ "viscosity" ].value = dt * 0.05 * this.viscosity;
this.diffuseMaterial.uniforms[ "expansion" ].value = Math.exp( this.expansion * - 1.0 );
this.diffuseMaterial.uniforms[ "swirl" ].value = Math.exp( this.swirl * - 0.1 );
this.diffuseMaterial.uniforms[ "drag" ].value = Math.exp( this.drag * - 0.1 );
this.diffuseMaterial.uniforms[ "burnRate" ].value = this.burnRate * dt * 0.01;
this.driftMaterial.uniforms[ "windVector" ].value = this.windVector;
this.driftMaterial.uniforms[ "airSpeed" ].value = dt * this.airSpeed * 0.001 * textureHeight;
this.material.uniforms[ "color1" ].value = this.color1;
this.material.uniforms[ "color2" ].value = this.color2;
this.material.uniforms[ "color3" ].value = this.color3;
this.material.uniforms[ "colorBias" ].value = this.colorBias;

};

this.clearDiffuse = function () {

this.diffuseMaterial.uniforms.expansion.value = 1.0;
this.diffuseMaterial.uniforms.swirl.value = 1.0;
this.diffuseMaterial.uniforms.drag.value = 1.0;
this.diffuseMaterial.uniforms.burnRate.value = 0.0;
this.diffuseMaterial.uniforms[ "expansion" ].value = 1.0;
this.diffuseMaterial.uniforms[ "swirl" ].value = 1.0;
this.diffuseMaterial.uniforms[ "drag" ].value = 1.0;
this.diffuseMaterial.uniforms[ "burnRate" ].value = 0.0;

};

Expand Down Expand Up @@ -340,7 +340,7 @@ THREE.Fire = function ( geometry, options ) {

this.sourceMesh.visible = true;

this.sourceMaterial.uniforms.densityMap.value = this.field0.texture;
this.sourceMaterial.uniforms[ "densityMap" ].value = this.field0.texture;

renderer.render( this.fieldScene, this.orthoCamera, this.field1 );

Expand All @@ -354,7 +354,7 @@ THREE.Fire = function ( geometry, options ) {

this.diffuseMesh.visible = true;

this.diffuseMaterial.uniforms.densityMap.value = this.field0.texture;
this.diffuseMaterial.uniforms[ "densityMap" ].value = this.field0.texture;

renderer.render( this.fieldScene, this.orthoCamera, this.field1 );

Expand All @@ -368,7 +368,7 @@ THREE.Fire = function ( geometry, options ) {

this.driftMesh.visible = true;

this.driftMaterial.uniforms.densityMap.value = this.field0.texture;
this.driftMaterial.uniforms[ "densityMap" ].value = this.field0.texture;

renderer.render( this.fieldScene, this.orthoCamera, this.field1 );

Expand All @@ -384,13 +384,13 @@ THREE.Fire = function ( geometry, options ) {

this.projMesh1.visible = true;

this.projMaterial1.uniforms.densityMap.value = this.field0.texture;
this.projMaterial1.uniforms[ "densityMap" ].value = this.field0.texture;

renderer.render( this.fieldScene, this.orthoCamera, this.fieldProj );

this.projMesh1.visible = false;

this.projMaterial2.uniforms.densityMap.value = this.fieldProj.texture;
this.projMaterial2.uniforms[ "densityMap" ].value = this.fieldProj.texture;

// Projection pass 2

Expand All @@ -404,14 +404,14 @@ THREE.Fire = function ( geometry, options ) {
this.field1 = this.fieldProj;
this.fieldProj = temp;

this.projMaterial2.uniforms.densityMap.value = this.fieldProj.texture;
this.projMaterial2.uniforms[ "densityMap" ].value = this.fieldProj.texture;

}

this.projMesh2.visible = false;

this.projMaterial3.uniforms.densityMap.value = this.field0.texture;
this.projMaterial3.uniforms.projMap.value = this.fieldProj.texture;
this.projMaterial3.uniforms[ "densityMap" ].value = this.field0.texture;
this.projMaterial3.uniforms[ "projMap" ].value = this.fieldProj.texture;

// Projection pass 3

Expand Down
18 changes: 9 additions & 9 deletions examples/js/objects/Lensflare.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,8 +199,8 @@ THREE.Lensflare = function () {
// render pink quad

var uniforms = material1a.uniforms;
uniforms.scale.value = scale;
uniforms.screenPosition.value = positionScreen;
uniforms[ "scale" ].value = scale;
uniforms[ "screenPosition" ].value = positionScreen;

renderer.renderBufferDirect( camera, null, geometry, material1a, mesh1, null );

Expand All @@ -211,8 +211,8 @@ THREE.Lensflare = function () {
// restore graphics

var uniforms = material1b.uniforms;
uniforms.scale.value = scale;
uniforms.screenPosition.value = positionScreen;
uniforms[ "scale" ].value = scale;
uniforms[ "screenPosition" ].value = positionScreen;

renderer.renderBufferDirect( camera, null, geometry, material1b, mesh1, null );

Expand All @@ -227,15 +227,15 @@ THREE.Lensflare = function () {

var uniforms = material2.uniforms;

uniforms.color.value.copy( element.color );
uniforms.map.value = element.texture;
uniforms.screenPosition.value.x = positionScreen.x + vecX * element.distance;
uniforms.screenPosition.value.y = positionScreen.y + vecY * element.distance;
uniforms[ "color" ].value.copy( element.color );
uniforms[ "map" ].value = element.texture;
uniforms[ "screenPosition" ].value.x = positionScreen.x + vecX * element.distance;
uniforms[ "screenPosition" ].value.y = positionScreen.y + vecY * element.distance;

var size = element.size / viewport.w;
var invAspect = viewport.w / viewport.z;

uniforms.scale.value.set( size * invAspect, size );
uniforms[ "scale" ].value.set( size * invAspect, size );

material2.uniformsNeedUpdate = true;

Expand Down
6 changes: 3 additions & 3 deletions examples/js/objects/Reflector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,9 +58,9 @@ THREE.Reflector = function ( geometry, options ) {
vertexShader: shader.vertexShader
} );

material.uniforms.tDiffuse.value = renderTarget.texture;
material.uniforms.color.value = color;
material.uniforms.textureMatrix.value = textureMatrix;
material.uniforms[ "tDiffuse" ].value = renderTarget.texture;
material.uniforms[ "color" ].value = color;
material.uniforms[ "textureMatrix" ].value = textureMatrix;

this.material = material;
this.renderOrder = - Infinity; // render first
Expand Down
6 changes: 3 additions & 3 deletions examples/js/objects/Refractor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,9 @@ THREE.Refractor = function ( geometry, options ) {
transparent: true // ensures, refractors are drawn from farthest to closest
} );

this.material.uniforms.color.value = color;
this.material.uniforms.tDiffuse.value = renderTarget.texture;
this.material.uniforms.textureMatrix.value = textureMatrix;
this.material.uniforms[ "color" ].value = color;
this.material.uniforms[ "tDiffuse" ].value = renderTarget.texture;
this.material.uniforms[ "textureMatrix" ].value = textureMatrix;

// functions

Expand Down
12 changes: 6 additions & 6 deletions examples/js/objects/Sky.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,12 @@ THREE.Sky.prototype = Object.create( THREE.Mesh.prototype );
THREE.Sky.SkyShader = {

uniforms: {
luminance: { value: 1 },
turbidity: { value: 2 },
rayleigh: { value: 1 },
mieCoefficient: { value: 0.005 },
mieDirectionalG: { value: 0.8 },
sunPosition: { value: new THREE.Vector3() }
"luminance": { value: 1 },
"turbidity": { value: 2 },
"rayleigh": { value: 1 },
"mieCoefficient": { value: 0.005 },
"mieDirectionalG": { value: 0.8 },
"sunPosition": { value: new THREE.Vector3() }
},

vertexShader: [
Expand Down
44 changes: 22 additions & 22 deletions examples/js/objects/Water.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,17 +69,17 @@ THREE.Water = function ( geometry, options ) {
THREE.UniformsLib[ 'fog' ],
THREE.UniformsLib[ 'lights' ],
{
normalSampler: { value: null },
mirrorSampler: { value: null },
alpha: { value: 1.0 },
time: { value: 0.0 },
size: { value: 1.0 },
distortionScale: { value: 20.0 },
textureMatrix: { value: new THREE.Matrix4() },
sunColor: { value: new THREE.Color( 0x7F7F7F ) },
sunDirection: { value: new THREE.Vector3( 0.70707, 0.70707, 0 ) },
eye: { value: new THREE.Vector3() },
waterColor: { value: new THREE.Color( 0x555555 ) }
"normalSampler": { value: null },
"mirrorSampler": { value: null },
"alpha": { value: 1.0 },
"time": { value: 0.0 },
"size": { value: 1.0 },
"distortionScale": { value: 20.0 },
"textureMatrix": { value: new THREE.Matrix4() },
"sunColor": { value: new THREE.Color( 0x7F7F7F ) },
"sunDirection": { value: new THREE.Vector3( 0.70707, 0.70707, 0 ) },
"eye": { value: new THREE.Vector3() },
"waterColor": { value: new THREE.Color( 0x555555 ) }
}
] ),

Expand Down Expand Up @@ -190,17 +190,17 @@ THREE.Water = function ( geometry, options ) {
fog: fog
} );

material.uniforms.mirrorSampler.value = renderTarget.texture;
material.uniforms.textureMatrix.value = textureMatrix;
material.uniforms.alpha.value = alpha;
material.uniforms.time.value = time;
material.uniforms.normalSampler.value = normalSampler;
material.uniforms.sunColor.value = sunColor;
material.uniforms.waterColor.value = waterColor;
material.uniforms.sunDirection.value = sunDirection;
material.uniforms.distortionScale.value = distortionScale;

material.uniforms.eye.value = eye;
material.uniforms[ "mirrorSampler" ].value = renderTarget.texture;
material.uniforms[ "textureMatrix" ].value = textureMatrix;
material.uniforms[ "alpha" ].value = alpha;
material.uniforms[ "time" ].value = time;
material.uniforms[ "normalSampler" ].value = normalSampler;
material.uniforms[ "sunColor" ].value = sunColor;
material.uniforms[ "waterColor" ].value = waterColor;
material.uniforms[ "sunDirection" ].value = sunDirection;
material.uniforms[ "distortionScale" ].value = distortionScale;

material.uniforms[ "eye" ].value = eye;

scope.material = material;

Expand Down
28 changes: 14 additions & 14 deletions examples/js/objects/Water2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,14 +85,14 @@ THREE.Water = function ( geometry, options ) {
if ( flowMap !== undefined ) {

this.material.defines.USE_FLOWMAP = '';
this.material.uniforms.tFlowMap = {
this.material.uniforms[ "tFlowMap" ] = {
type: 't',
value: flowMap
};

} else {

this.material.uniforms.flowDirection = {
this.material.uniforms[ "flowDirection" ] = {
type: 'v2',
value: flowDirection
};
Expand All @@ -104,23 +104,23 @@ THREE.Water = function ( geometry, options ) {
normalMap0.wrapS = normalMap0.wrapT = THREE.RepeatWrapping;
normalMap1.wrapS = normalMap1.wrapT = THREE.RepeatWrapping;

this.material.uniforms.tReflectionMap.value = reflector.getRenderTarget().texture;
this.material.uniforms.tRefractionMap.value = refractor.getRenderTarget().texture;
this.material.uniforms.tNormalMap0.value = normalMap0;
this.material.uniforms.tNormalMap1.value = normalMap1;
this.material.uniforms[ "tReflectionMap" ].value = reflector.getRenderTarget().texture;
this.material.uniforms[ "tRefractionMap" ].value = refractor.getRenderTarget().texture;
this.material.uniforms[ "tNormalMap0" ].value = normalMap0;
this.material.uniforms[ "tNormalMap1" ].value = normalMap1;

// water

this.material.uniforms.color.value = color;
this.material.uniforms.reflectivity.value = reflectivity;
this.material.uniforms.textureMatrix.value = textureMatrix;
this.material.uniforms[ "color" ].value = color;
this.material.uniforms[ "reflectivity" ].value = reflectivity;
this.material.uniforms[ "textureMatrix" ].value = textureMatrix;

// inital values

this.material.uniforms.config.value.x = 0; // flowMapOffset0
this.material.uniforms.config.value.y = halfCycle; // flowMapOffset1
this.material.uniforms.config.value.z = halfCycle; // halfCycle
this.material.uniforms.config.value.w = scale; // scale
this.material.uniforms[ "config" ].value.x = 0; // flowMapOffset0
this.material.uniforms[ "config" ].value.y = halfCycle; // flowMapOffset1
this.material.uniforms[ "config" ].value.z = halfCycle; // halfCycle
this.material.uniforms[ "config" ].value.w = scale; // scale

// functions

Expand All @@ -142,7 +142,7 @@ THREE.Water = function ( geometry, options ) {
function updateFlow() {

var delta = clock.getDelta();
var config = scope.material.uniforms.config;
var config = scope.material.uniforms[ "config" ];

config.value.x += flowSpeed * delta; // flowMapOffset0
config.value.y = config.value.x + halfCycle; // flowMapOffset1
Expand Down
Loading

0 comments on commit c3144a2

Please sign in to comment.