How can I use three to use these custom shaders

Questions
1

Hi there

I found these shaders here:

And I downloaded the fragment and the vertex shader file.

Now I would like to display a background like this…

I wanted to use three.js to use the shaders, but I can’t manage to display anything.

A few questions:
Are these assumptions correct:

  • I create a PlaneGeometry for the geometry?
  • I create a ShaderMaterial with the vertex shader and the fragment shader inside? (three.js docs)
    → I have no idea what I would use for the uniforms…

My code looks like this:

const fragmentShader = require('./PrimeWaves/PrimeWaves.frag')
const vertexShader = require('./PrimeWaves/PrimeWaves.vert')

// ... more code ...

      this.scene = new THREE.Scene()
      this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1)
      const uniforms = {
        time: { value: 1.0 },
      }
      this.camera.position.z = 5

      this.geometry = new THREE.PlaneGeometry(2, 2)
      this.material = new THREE.ShaderMaterial({
        uniforms,
        fragmentShader,
        vertexShader,
      })

      const mesh = new THREE.Mesh(this.geometry, this.material)
      this.scene.add(mesh)

      this.renderer = new THREE.WebGLRenderer()
      this.renderer.setPixelRatio(window.devicePixelRatio)
      this.renderer.setSize(window.innerWidth, window.innerHeight)
      this.$refs.canvas.appendChild(this.renderer.domElement)

     this.renderer.render(this.scene, this.camera)

Some syntax is .vue js specific (like the $refs).
I only get a black canvas on screen and some errors

THREE.WebGLProgram: shader error:  0 35715 false gl.getProgramInfoLog Must have a compiled vertex shader attached. THREE.WebGLShader: gl.getShaderInfoLog() vertex
ERROR: 0:62: 'vv_vertShaderInit' : no matching overloaded function found1: #version 300 es
2: #define attribute in
3: #define varying out
4: #define texture2D texture
5: precision highp float;
6: precision highp int;
7: #define HIGH_PRECISION
8: #define SHADER_NAME ShaderMaterial
9: #define VERTEX_TEXTURES
10: #define GAMMA_FACTOR 2
11: #define MAX_BONES 0
12: #define BONE_TEXTURE
13: uniform mat4 modelMatrix;
14: uniform mat4 modelViewMatrix;
15: uniform mat4 projectionMatrix;
16: uniform mat4 viewMatrix;
17: uniform mat3 normalMatrix;
18: uniform vec3 cameraPosition;
19: uniform bool isOrthographic;
20: #ifdef USE_INSTANCING
21: 	attribute mat4 instanceMatrix;
22: #endif
23: #ifdef USE_INSTANCING_COLOR
24: 	attribute vec3 instanceColor;
25: #endif
26: attribute vec3 position;
27: attribute vec3 normal;
28: attribute vec2 uv;
29: #ifdef USE_TANGENT
30: 	attribute vec4 tangent;
31: #endif
32: #if defined( USE_COLOR_ALPHA )
33: 	attribute vec4 color;
34: #elif defined( USE_COLOR )
35: 	attribute vec3 color;
36: #endif
37: #ifdef USE_MORPHTARGETS
38: 	attribute vec3 morphTarget0;
39: 	attribute vec3 morphTarget1;
40: 	attribute vec3 morphTarget2;
41: 	attribute vec3 morphTarget3;
42: 	#ifdef USE_MORPHNORMALS
43: 		attribute vec3 morphNormal0;
44: 		attribute vec3 morphNormal1;
45: 		attribute vec3 morphNormal2;
46: 		attribute vec3 morphNormal3;
47: 	#else
48: 		attribute vec3 morphTarget4;
49: 		attribute vec3 morphTarget5;
50: 		attribute vec3 morphTarget6;
51: 		attribute vec3 morphTarget7;
52: 	#endif
53: #endif
54: #ifdef USE_SKINNING
55: 	attribute vec4 skinIndex;
56: 	attribute vec4 skinWeight;
57: #endif
58: 
59: 
60: 
61:     void main() {
62:     	vv_vertShaderInit();
63:     }
64:    THREE.WebGLShader: gl.getShaderInfoLog() fragment
ERROR: 0:97: 'depth' : undeclared identifier
ERROR: 0:126: 'rxy' : undeclared identifier
ERROR: 0:127: 'rxy' : undeclared identifier
ERROR: 0:128: 'rxy' : undeclared identifier
ERROR: 0:129: 'rxy' : undeclared identifier
ERROR: 0:130: 'rxy' : undeclared identifier
ERROR: 0:131: 'rxy' : undeclared identifier
ERROR: 0:132: 'rxy' : undeclared identifier
ERROR: 0:133: 'rxy' : undeclared identifier
ERROR: 0:134: 'rxy' : undeclared identifier
ERROR: 0:135: 'rxy' : undeclared identifier
ERROR: 0:136: 'rxy' : undeclared identifier
ERROR: 0:137: 'rxy' : undeclared identifier
ERROR: 0:138: 'rxy' : undeclared identifier
ERROR: 0:139: 'rxy' : undeclared identifier
ERROR: 0:140: 'rxy' : undeclared identifier
ERROR: 0:141: 'rxz' : undeclared identifier
ERROR: 0:142: 'rxz' : undeclared identifier
ERROR: 0:143: 'rxz' : undeclared identifier
ERROR: 0:144: 'rxz' : undeclared identifier
ERROR: 0:145: 'rxz' : undeclared identifier
ERROR: 0:146: 'rxz' : undeclared identifier
ERROR: 0:147: 'rxz' : undeclared identifier
ERROR: 0:148: 'rxz' : undeclared identifier
ERROR: 0:149: 'rxz' : undeclared identifier
ERROR: 0:150: 'rxz' : undeclared identifier
ERROR: 0:151: 'rxz' : undeclared identifier
ERROR: 0:152: 'rxz' : undeclared identifier
ERROR: 0:153: 'rxz' : undeclared identifier
ERROR: 0:154: 'rxz' : undeclared identifier
ERROR: 0:155: 'rxz' : undeclared identifier
ERROR: 0:157: 'RENDERSIZE' : undeclared identifier
ERROR: 0:157: 'xy' :  field selection requires structure, vector, or interface block on left hand side
ERROR: 0:157: 'zoom' : undeclared identifier
ERROR: 0:157: 'center' : undeclared identifier
ERROR: 0:158: 'TIME' : undeclared identifier
ERROR: 0:158: 'rate' : undeclared identifier1: #version 300 es
2: #define varying in
3: out highp vec4 pc_fragColor;
4: #define gl_FragColor pc_fragColor
5: #define gl_FragDepthEXT gl_FragDepth
6: #define texture2D texture
7: #define textureCube texture
8: #define texture2DProj textureProj
9: #define texture2DLodEXT textureLod
10: #define texture2DProjLodEXT textureProjLod
11: #define textureCubeLodEXT textureLod
12: #define texture2DGradEXT textureGrad
13: #define texture2DProjGradEXT textureProjGrad
14: #define textureCubeGradEXT textureGrad
15: precision highp float;
16: precision highp int;
17: #define HIGH_PRECISION
18: #define SHADER_NAME ShaderMaterial
19: #define GAMMA_FACTOR 2
20: uniform mat4 viewMatrix;
21: uniform vec3 cameraPosition;
22: uniform bool isOrthographic;
23: 
24: vec4 LinearToLinear( in vec4 value ) {
25: 	return value;
26: }
27: vec4 GammaToLinear( in vec4 value, in float gammaFactor ) {
28: 	return vec4( pow( value.rgb, vec3( gammaFactor ) ), value.a );
29: }
30: vec4 LinearToGamma( in vec4 value, in float gammaFactor ) {
31: 	return vec4( pow( value.rgb, vec3( 1.0 / gammaFactor ) ), value.a );
32: }
33: vec4 sRGBToLinear( in vec4 value ) {
34: 	return vec4( mix( pow( value.rgb * 0.9478672986 + vec3( 0.0521327014 ), vec3( 2.4 ) ), value.rgb * 0.0773993808, vec3( lessThanEqual( value.rgb, vec3( 0.04045 ) ) ) ), value.a );
35: }
36: vec4 LinearTosRGB( in vec4 value ) {
37: 	return vec4( mix( pow( value.rgb, vec3( 0.41666 ) ) * 1.055 - vec3( 0.055 ), value.rgb * 12.92, vec3( lessThanEqual( value.rgb, vec3( 0.0031308 ) ) ) ), value.a );
38: }
39: vec4 RGBEToLinear( in vec4 value ) {
40: 	return vec4( value.rgb * exp2( value.a * 255.0 - 128.0 ), 1.0 );
41: }
42: vec4 LinearToRGBE( in vec4 value ) {
43: 	float maxComponent = max( max( value.r, value.g ), value.b );
44: 	float fExp = clamp( ceil( log2( maxComponent ) ), -128.0, 127.0 );
45: 	return vec4( value.rgb / exp2( fExp ), ( fExp + 128.0 ) / 255.0 );
46: }
47: vec4 RGBMToLinear( in vec4 value, in float maxRange ) {
48: 	return vec4( value.rgb * value.a * maxRange, 1.0 );
49: }
50: vec4 LinearToRGBM( in vec4 value, in float maxRange ) {
51: 	float maxRGB = max( value.r, max( value.g, value.b ) );
52: 	float M = clamp( maxRGB / maxRange, 0.0, 1.0 );
53: 	M = ceil( M * 255.0 ) / 255.0;
54: 	return vec4( value.rgb / ( M * maxRange ), M );
55: }
56: vec4 RGBDToLinear( in vec4 value, in float maxRange ) {
57: 	return vec4( value.rgb * ( ( maxRange / 255.0 ) / value.a ), 1.0 );
58: }
59: vec4 LinearToRGBD( in vec4 value, in float maxRange ) {
60: 	float maxRGB = max( value.r, max( value.g, value.b ) );
61: 	float D = max( maxRange / maxRGB, 1.0 );
62: 	D = clamp( floor( D ) / 255.0, 0.0, 1.0 );
63: 	return vec4( value.rgb * ( D * ( 255.0 / maxRange ) ), D );
64: }
65: const mat3 cLogLuvM = mat3( 0.2209, 0.3390, 0.4184, 0.1138, 0.6780, 0.7319, 0.0102, 0.1130, 0.2969 );
66: vec4 LinearToLogLuv( in vec4 value ) {
67: 	vec3 Xp_Y_XYZp = cLogLuvM * value.rgb;
68: 	Xp_Y_XYZp = max( Xp_Y_XYZp, vec3( 1e-6, 1e-6, 1e-6 ) );
69: 	vec4 vResult;
70: 	vResult.xy = Xp_Y_XYZp.xy / Xp_Y_XYZp.z;
71: 	float Le = 2.0 * log2(Xp_Y_XYZp.y) + 127.0;
72: 	vResult.w = fract( Le );
73: 	vResult.z = ( Le - ( floor( vResult.w * 255.0 ) ) / 255.0 ) / 255.0;
74: 	return vResult;
75: }
76: const mat3 cLogLuvInverseM = mat3( 6.0014, -2.7008, -1.7996, -1.3320, 3.1029, -5.7721, 0.3008, -1.0882, 5.6268 );
77: vec4 LogLuvToLinear( in vec4 value ) {
78: 	float Le = value.z * 255.0 + value.w;
79: 	vec3 Xp_Y_XYZp;
80: 	Xp_Y_XYZp.y = exp2( ( Le - 127.0 ) / 2.0 );
81: 	Xp_Y_XYZp.z = Xp_Y_XYZp.y / value.y;
82: 	Xp_Y_XYZp.x = value.x * Xp_Y_XYZp.z;
83: 	vec3 vRGB = cLogLuvInverseM * Xp_Y_XYZp.rgb;
84: 	return vec4( max( vRGB, 0.0 ), 1.0 );
85: }
86: vec4 linearToOutputTexel( vec4 value ) { return LinearToLinear( value ); }
87: 
88: 
89:     #ifdef GL_ES
90:     precision highp float;
91:     #endif
92: 
93:     vec2 distort(vec2 p)
94:     {
95:         float theta  = atan(p.y, p.x);
96:         float radius = length(p);
97:         radius = pow(radius, 1.0+depth);
98:         p.x = radius * cos(theta);
99:         p.y = radius * sin(theta);
100:         return 0.5 * (p + 1.0);
101:     }
102: 
103:     vec4 pattern(vec2 p)
104:     {
105:       vec2 m=mod(p.xy+p.x+p.y,2.)-1.;
106:       return vec4(length(m+p*0.1));
107:     }
108: 
109:     float hash(const float n)
110:     {
111:       return fract(sin(n)*29712.15073);
112:     }
113: 
114:     float noise(const vec3 x, float y, float z)
115:     {
116:       vec3 p=floor(x); vec3 f=fract(x);
117:       f=f*f*(3.0-2.0*f);
118:       float n=p.x+p.y*y+p.z*z;
119:       float r1=mix(mix(hash(n+0.0),hash(n+1.0),f.x),mix(hash(n+y),hash(n+y+1.0),f.x),f.y);
120:         float r2=mix(mix(hash(n+z),hash(n+z+1.0),f.x),mix(hash(n+y+z),hash(n+y+z+1.0),f.x),f.y);
121:       return mix(r1,r2,f.z);
122:     }
123:     void main( void ) {
124: 
125:       float RY = 0.0;	float RZ = 0.0;
126:       if (rxy <= 1.)			{	RY += 11.;	}
127:       else if (rxy <= 2.)		{	RY += 13.; 	}
128:       else if (rxy <= 3.)		{	RY += 17.; 	}
129:       else if (rxy <= 4.)		{	RY += 19.; 	}
130:       else if (rxy <= 5.)		{	RY += 23.; 	}
131:       else if (rxy <= 6.)		{	RY += 29.; 	}
132:       else if (rxy <= 8.)		{	RY += 31.; 	}
133:       else if (rxy <= 9.)		{	RY += 37.; 	}
134:       else if (rxy <= 10.)	{	RY += 41.; 	}
135:       else if (rxy <= 11.)	{	RY += 43.; 	}
136:       else if (rxy <= 12.)	{	RY += 47.; 	}
137:       else if (rxy <= 13.)	{	RY += 53.; 	}
138:       else if (rxy <= 14.)	{	RY += 59.; 	}
139:       else if (rxy <= 15.)	{	RY += 61.; 	}
140:       else if (rxy <= 16.)	{	RY += 67.; 	}
141:       if (rxz <= 1.)			{	RZ += 11.; 	}
142:       else if (rxz <= 2.)		{	RZ += 13.; 	}
143:       else if (rxz <= 3.)		{	RZ += 17.; 	}
144:       else if (rxz <= 4.)		{	RZ += 19.; 	}
145:       else if (rxz <= 5.)		{	RZ += 23.; 	}
146:       else if (rxz <= 6.)		{	RZ += 29.; 	}
147:       else if (rxz <= 8.)		{	RZ += 31.; 	}
148:       else if (rxz <= 9.)		{	RZ += 37.; 	}
149:       else if (rxz <= 10.)	{	RZ += 41.; 	}
150:       else if (rxz <= 11.)	{	RZ += 43.; 	}
151:       else if (rxz <= 12.)	{	RZ += 47.; 	}
152:       else if (rxz <= 13.)	{	RZ += 53.; 	}
153:       else if (rxz <= 14.)	{	RZ += 59.; 	}
154:       else if (rxz <= 15.)	{	RZ += 61.; 	}
155:       else if (rxz <= 16.)	{	RZ += 67.; 	}
156: 
157:       vec2 pos = ( gl_FragCoord.xy / RENDERSIZE.xy * zoom )+center;
158:       float col = noise(pos.xyx + (TIME*rate),RY,RZ);
159:       vec4 c = pattern(distort(pos+col));
160:         c.xy = distort(c.xy);
161:       gl_FragColor = vec4(c.x - col, sin(c.y) - col, cos(c.z), 1.0);
162: 
163:     }
164:   three.module.js:17241

But what is a compiled vertext shader? Can’t I use that shader-code provided by the page?

I would be super glad for any help! Always when trying to dive into the shader world, I realize I understand nothing :S…

Thanks a lot.
cheers

2

First find a three.js default vertex shader and use that to start, the vertex shader is not specific in this example and can be the basic one like this…

varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

Then the main prob is the fragment shader…

All the isf inputs need to be set inside the fragment shader… you need to strip all the code up top up to and including #endif and start from the variable and function definitions down to the end of the main function, three js won’t understand the top of the file… then you can add to the file at the top first to get uv’s from the mesh if you need it at any point …

varying vec2 vUv;

Before the main function start by setting the default values to the inputs you stripped from the top of the file ie…

vec2 center = vec2(-2.,-1.);
float rate = -1.;

And so on…

Remember decimal points and semicolons in glsl it is not forgiving like JavaScript.

Then look into how to set uniforms so you can edit those values via the JavaScript file … but setting the values should at least get the thing to show up and stop erroring.

Bless Up!
-G

3

Thank you so much. I would never have gotten there without your help.
Just for anyone else having trouble converting an isf shader to a three shader:

The isf variables RENDERSIZE and TIME are around in isf shaders. In three.js these are uniforms that can be passed in.
I defined them like:

this.uniforms = {
  time: { value: 1.0 },
  resolution: {
    type: 'v2',
    value: new THREE.Vector2(window.innerWidth, window.innerHeight),
  },
}

Of course I hade to replace the variables in my fragment shader.
Using

uniform float time;
uniform vec2 resolution;

And after initiating the rendering I update the time uniform within an animate() function:

const var startTime = Date.now();

   function animate() {
      requestAnimationFrame(animate)
      render()
    },
    function render() {
      const elapsedMilliseconds = Date.now() - startTime
      const elapsedSeconds = elapsedMilliseconds / 1000
      uniforms.time.value = elapsedSeconds
      renderer.render(scene, camera)
    },

Really thankful for the pointers. I have now a better undeerstanding and can hopefully further tweak it :+1:
Cheers