Shaderfrog2 glsl shaders

Questions
, ,
1

is there somebody who knows how we can make the shaders from shaderfrog2 work in three.js ?

1 Like
2

Yeah I’ve used lots of shaderfrog shaders… are you having trouble with some aspect of it?

You can DM me if you want some help getting a specific shader to work…

3

i am interested in this one https://shaderfrog.com/2/editor/cman0hya60004paurgo9i4oza
i took the first ocean vertexshader and ocean fragmentshader from the glsleditor .
ShaderFrog Ocean Water
nd it gives this errors
ShaderFrog Ocean Water
three.module.js:6505 THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false
Material Name:
Material Type: ShaderMaterial
Program Info Log: Vertex shader is not compiled.
VERTEX
ERROR: 0:86: ‘modelMatrix’ : redefinition
ERROR: 0:87: ‘modelViewMatrix’ : redefinition
ERROR: 0:88: ‘projectionMatrix’ : redefinition
ERROR: 0:89: ‘viewMatrix’ : redefinition
ERROR: 0:90: ‘normalMatrix’ : redefinition
ERROR: 0:92: ‘position’ : redefinition
ERROR: 0:93: ‘normal’ : redefinition
ERROR: 0:94: ‘uv’ : redefinition
80: uniform float waveHeight;
81: uniform float waveSpeed;
82: uniform float waveFrequency;
83: uniform float waveSharpness;
84:

85: uniform mat4 modelMatrix;
86: uniform mat4 modelViewMatrix;
87: uniform mat4 projectionMatrix;
88: uniform mat4 viewMatrix;
89: uniform mat3 normalMatrix;
90:
91: attribute vec3 position;

onFirstUse @ three.module.js:6505
WebGLProgram.getUniforms @ three.module.js:6578
setProgram @ three.module.js:17089
WebGLRenderer.renderBufferDirect @ three.module.js:15831
renderObject @ three.module.js:16756
renderObjects @ three.module.js:16725
renderScene @ three.module.js:16567
WebGLRenderer.render @ three.module.js:16383
animate @ ShaderFrogOceanWater.html:446
(anoniem) @ ShaderFrogOceanWater.html:449Deze fout begrijpen
256WebGL: INVALID_OPERATION: useProgram: program not valid

4

three.module.js:6505 THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false

Material Name:
Material Type: ShaderMaterial

Program Info Log: Vertex shader is not compiled.

5

Comment out the ones that say they are redefined. Threejs is already inserting those for you in the shader.

1 Like
6

the 2 without #eversion 300 es ; work now. the 2 others with version 300 do not work . if i leave the version 300 it complains that the version should be the first thing in the glsl which it is
ERROR: 0:71: ‘version’ : version directive must occur before anything else, except for comments and white space. so i dont understand why it keeps giving this error .
if i outcomment the version 300 line i get another error about frogFragOut

ERROR: 0:109: ‘frogFragOut’ : must explicitly specify all locations when using multiple fragment outputs
104: float ior;
105: };
106: in vec2 vUv, vMapUv;
107: in vec3 vNormal, vViewPosition;
108: in float vHeight_1747114938727_2;

109: out vec4 frogFragOut;
110: uniform float time, waterAmt_1747171214604_27, displacementHeight_1747171214604_27, specularScale_1747171214604_27, specularBrightness_1747171214604_27, specularPop_1747171214604_27, specularMax_1747171214604_27, offset_1747114938727_2, contrast_1747114938727_2, brightness, toneMappingExposure, roughness, metalness, opacity, ior, specularIntensity, iridescence, iridescenceIOR, iridescenceThicknessMinimum, iridescenceThicknessMaximum, envMapIntensity, flipEnvMap;
111: uniform sampler2D waterImage_1747171214604_27, displacement_1747171214604_27, specularMap_1747171214604_27, image, map, envMap;
112: uniform vec2 waterScale_1747171214604_27, waterSpeed_1747171214604_27, displacementSpeed_1747171214604_27, displacementScale, specularSpeed_1747171214604_27;
113: uniform vec3 waterColor_1747171214604_27, waterColor_1747114938727_2, waterHighlight_1747114938727_2, diffuse, emissive, specularColor, ambientLightColor;
114: //uniform vec3 cameraPosition;
115: //uniform mat4 viewMatrix;
Gerstner Ocean Box + ShaderFrog Fragment

1 Like
7

To change shader version with shadermaterial, (to GLES3 for instance) you don’t add the “version XXX”

instead pass “glslVersion: THREE.GLSL3” to the shadermaterial constructor, and it will insert that version directive for you in the right spot.

The reason this is neccesary is because that version directive has to come first in the shader, and ShaderMaterial is inserting things before your shader snippets, so it has to be inserted by ShaderMaterial itself.

There is also RawShaderMaterial which doesn’t do Any of this insertion for you, but then you have to manually wire up Everything including those matrices and attributes etc.

8

[quote=“manthrax, post:7, topic:85357”]
i tried it it . i removed the version 300 es
and i added the glslVersion: THREE.GLSL3 in the shaderdeclaration
and the result is a black screen without errors in the console

9

Progress! :smiley: now try outputting just red to the gl_FragColor or whatnot… see if you can get that to work.

There is probably some input to the shader that you still need to wire up or something?

10

yes probably but that shader is way too complex for menow . so i used a more simple one .to test and i found something that works .

GLSL ES 3.00 Blue Cube body { margin: 0; overflow: hidden; } so the glslVersion: THREE.GLSL3 is added ,, the version::tag 300 es is removed and webgl3 rendering is forced . and it has to be a RawShaderMaterial const canvas = document.getElementById("c"); const renderer = new THREE.WebGLRenderer({ canvas, context: canvas.getContext("webgl2") }); and this gives a result without errors [https://devoldersteven.be/webgl/155/examples/causticmodul/cube300b.html](https://devoldersteven.be/webgl/155/examples/causticmodul/cube300b.html)
1 Like