Skip to content

Example webgl2 fixes #16886

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Jun 23, 2019
Merged

Example webgl2 fixes #16886

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
b014361
rename texure uniform
aardgoose Jun 22, 2019
65afd69
rename texture uniform
aardgoose Jun 22, 2019
f2f69a3
rename texture uniform
aardgoose Jun 22, 2019
3dfedcd
rename uniform texture
aardgoose Jun 22, 2019
d1be58e
Fix SMAA shader for WebGL2
aardgoose Jun 22, 2019
d2c7ae3
fix ocean shader for WebGL2
aardgoose Jun 22, 2019
2655e47
fix lint errors
aardgoose Jun 22, 2019
0d760ea
rename uniform texture and detect WebGL2
aardgoose Jun 22, 2019
9d2cad3
rename uniform texture
aardgoose Jun 22, 2019
31dcef8
rename uniform texture
aardgoose Jun 22, 2019
2e7f4e9
rename uniform texture
aardgoose Jun 22, 2019
78dfdfe
rename uniform texture
aardgoose Jun 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 31 additions & 23 deletions examples/js/misc/GPUComputationRenderer.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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