Skip to content

Commit

Permalink
Merge pull request mrdoob#16886 from aardgoose/example-webgl2-fixes
Browse files Browse the repository at this point in the history 
Example webgl2 fixes
  • Loading branch information
@mrdoob
mrdoob authored Jun 23, 2019
2 parents bc3e69c + 78dfdfe commit 18e0b9f
Show file tree
Hide file tree
Showing 16 changed files with 114 additions and 89 deletions.
54 changes: 31 additions & 23 deletions examples/js/misc/GPUComputationRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@
* @param {WebGLRenderer} renderer The renderer
*/

THREE.GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
THREE.GPUComputationRenderer = function ( sizeX, sizeY, renderer ) {

this.variables = [];

Expand All @@ -109,7 +109,7 @@ THREE.GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
camera.position.z = 1;

var passThruUniforms = {
texture: { value: null }
passThruTexture: { value: null }
};

var passThruShader = createShaderMaterial( getPassThroughFragmentShader(), passThruUniforms );
Expand All @@ -118,7 +118,7 @@ THREE.GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
scene.add( mesh );


this.addVariable = function( variableName, computeFragmentShader, initialValueTexture ) {
this.addVariable = function ( variableName, computeFragmentShader, initialValueTexture ) {

var material = this.createShaderMaterial( computeFragmentShader );

Expand All @@ -140,15 +140,16 @@ THREE.GPUComputationRenderer = function( sizeX, sizeY, renderer ) {

};

this.setVariableDependencies = function( variable, dependencies ) {
this.setVariableDependencies = function ( variable, dependencies ) {

variable.dependencies = dependencies;

};

this.init = function() {
this.init = function () {

if ( ! renderer.extensions.get( "OES_texture_float" ) ) {
if ( ! renderer.extensions.get( "OES_texture_float" ) &&
! renderer.capabilities.isWebGL2 ) {

return "No OES_texture_float support for float textures.";

Expand All @@ -160,7 +161,7 @@ THREE.GPUComputationRenderer = function( sizeX, sizeY, renderer ) {

}

for ( var i = 0; i < this.variables.length; i++ ) {
for ( var i = 0; i < this.variables.length; i ++ ) {

var variable = this.variables[ i ];

Expand All @@ -175,24 +176,28 @@ THREE.GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
var uniforms = material.uniforms;
if ( variable.dependencies !== null ) {

for ( var d = 0; d < variable.dependencies.length; d++ ) {
for ( var d = 0; d < variable.dependencies.length; d ++ ) {

var depVar = variable.dependencies[ d ];

if ( depVar.name !== variable.name ) {

// Checks if variable exists
var found = false;
for ( var j = 0; j < this.variables.length; j++ ) {
for ( var j = 0; j < this.variables.length; j ++ ) {

if ( depVar.name === this.variables[ j ].name ) {

found = true;
break;

}

}
if ( ! found ) {

return "Variable dependency not found. Variable=" + variable.name + ", dependency=" + depVar.name;

}

}
Expand All @@ -202,7 +207,9 @@ THREE.GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
material.fragmentShader = "\nuniform sampler2D " + depVar.name + ";\n" + material.fragmentShader;

}

}

}

this.currentTextureIndex = 0;
Expand All @@ -211,20 +218,20 @@ THREE.GPUComputationRenderer = function( sizeX, sizeY, renderer ) {

};

this.compute = function() {
this.compute = function () {

var currentTextureIndex = this.currentTextureIndex;
var nextTextureIndex = this.currentTextureIndex === 0 ? 1 : 0;

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

var variable = this.variables[ i ];

// Sets texture dependencies uniforms
if ( variable.dependencies !== null ) {

var uniforms = variable.material.uniforms;
for ( var d = 0, dl = variable.dependencies.length; d < dl; d++ ) {
for ( var d = 0, dl = variable.dependencies.length; d < dl; d ++ ) {

var depVar = variable.dependencies[ d ];

Expand All @@ -240,15 +247,16 @@ THREE.GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
}

this.currentTextureIndex = nextTextureIndex;

};

this.getCurrentRenderTarget = function( variable ) {
this.getCurrentRenderTarget = function ( variable ) {

return variable.renderTargets[ this.currentTextureIndex ];

};

this.getAlternateRenderTarget = function( variable ) {
this.getAlternateRenderTarget = function ( variable ) {

return variable.renderTargets[ this.currentTextureIndex === 0 ? 1 : 0 ];

Expand Down Expand Up @@ -282,7 +290,7 @@ THREE.GPUComputationRenderer = function( sizeX, sizeY, renderer ) {

this.createShaderMaterial = createShaderMaterial;

this.createRenderTarget = function( sizeXTexture, sizeYTexture, wrapS, wrapT, minFilter, magFilter ) {
this.createRenderTarget = function ( sizeXTexture, sizeYTexture, wrapS, wrapT, minFilter, magFilter ) {

sizeXTexture = sizeXTexture || sizeX;
sizeYTexture = sizeYTexture || sizeY;
Expand All @@ -308,7 +316,7 @@ THREE.GPUComputationRenderer = function( sizeX, sizeY, renderer ) {

};

this.createTexture = function() {
this.createTexture = function () {

var a = new Float32Array( sizeX * sizeY * 4 );
var texture = new THREE.DataTexture( a, sizeX, sizeY, THREE.RGBAFormat, THREE.FloatType );
Expand All @@ -318,21 +326,21 @@ THREE.GPUComputationRenderer = function( sizeX, sizeY, renderer ) {

};

this.renderTexture = function( input, output ) {
this.renderTexture = function ( input, output ) {

// Takes a texture, and render out in rendertarget
// input = Texture
// output = RenderTarget

passThruUniforms.texture.value = input;
passThruUniforms.passThruTexture.value = input;

this.doRenderTarget( passThruShader, output);
this.doRenderTarget( passThruShader, output );

passThruUniforms.texture.value = null;
passThruUniforms.passThruTexture.value = null;

};

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

var currentRenderTarget = renderer.getRenderTarget();

Expand All @@ -359,13 +367,13 @@ THREE.GPUComputationRenderer = function( sizeX, sizeY, renderer ) {

function getPassThroughFragmentShader() {

return "uniform sampler2D texture;\n" +
return "uniform sampler2D passThruTexture;\n" +
"\n" +
"void main() {\n" +
"\n" +
" vec2 uv = gl_FragCoord.xy / resolution.xy;\n" +
"\n" +
" gl_FragColor = texture2D( texture, uv );\n" +
" gl_FragColor = texture2D( passThruTexture, uv );\n" +
"\n" +
"}\n";

Expand Down
2 changes: 2 additions & 0 deletions examples/js/shaders/OceanShaders.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,9 +110,11 @@ THREE.OceanShaders[ 'ocean_initial_spectrum' ] = {
'return sqrt(G * k * (1.0 + pow2(k / KM)));',
'}',

'#if __VERSION__ == 100',
'float tanh (float x) {',
'return (1.0 - exp(-2.0 * x)) / (1.0 + exp(-2.0 * x));',
'}',
'#endif',

'void main (void) {',
'vec2 coordinates = gl_FragCoord.xy - 0.5;',
Expand Down
2 changes: 2 additions & 0 deletions examples/js/shaders/SMAAShader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,9 +180,11 @@ THREE.SMAAWeightsShader = {
"varying vec4 vOffset[3];",
"varying vec2 vPixcoord;",

"#if __VERSION__ == 100",
"vec2 round( vec2 x ) {",
"return sign( x ) * floor( abs( x ) + 0.5 );",
"}",
"#endif",

"float SMAASearchLength( sampler2D searchTex, vec2 e, float bias, float scale ) {",
// Not required if searchTex accesses are set to point:
Expand Down
Loading

0 comments on commit 18e0b9f

Please sign in to comment.