How to setup Shader to make waves

Questions
,
#1

My ultimate goal is this effect https://pbs.twimg.com/media/DwDYGE-UwAI4vWf.jpg:large
but I don’t have any idea how to do it.
this is my code. I would like just a basic help not how to generate the exact waves (that would be my job)

            var scene = new THREE.Scene();
    		var loader = new THREE.TextureLoader();
    		loader.load(
    			"someimage.jpg",
    			(function ( texture ) {
    				var imageWidth = texture.image.width;
    				var imageHeight = texture.image.height;
    				var width = 700,
    					height = width*imageHeight/imageWidth,
    					halfHeight = height/2;

				var camera = new THREE.PerspectiveCamera(45, imageWidth / imageHeight, 0.001, 1000);
				camera.position.z = halfHeight / Math.tan(Math.PI / 8);

				const vertexShader = `
					varying vec3 vNormal;
					varying vec2 vUv;
					void main() {
						vNormal = normal;
						vUv =  uv ;
						gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
					}
				`
				const fragmentShader = `
					varying vec3 vNormal;
					varying vec2 vUv;
					uniform vec3 color;
					uniform sampler2D texture;
					void main() {
						vec3 light = vec3( 0.5, 0.2, 1.0 );
						light = normalize( light );
						float dProd = dot( vNormal, light ) * 0.5 + 0.5;
						vec4 tcolor = texture2D( texture, vUv );
						vec4 couleur = vec4( tcolor.r , tcolor.g , tcolor.b, 1.0 );
						gl_FragColor = couleur * vec4( vec3( dProd ) * vec3( color ), 1.0 ) ;
					}
				`


				var uniforms = {
					color: { value: new THREE.Color( 0xffffff ) },
					texture: { value: texture }
				};

				var shaderMaterial = new THREE.ShaderMaterial({
					uniforms: uniforms,
					vertexShader: vertexShader,
					fragmentShader: fragmentShader
				})

				var geometry = new THREE.PlaneBufferGeometry( width, height, 0);
				var plane = new THREE.Mesh( geometry, shaderMaterial );
				plane.position.set(0, 0, 0);
			    scene.add( plane );

				var renderer = new THREE.WebGLRenderer();
				renderer.setSize( width, height );
				renderer.render(scene, camera);
				container.appendChild( renderer.domElement );
			})
#2

Hi!
A very basic example from shadertoy
https://www.shadertoy.com/view/MsX3DN

#3

what is iChannel0 please

#4

A uniform with a texture.

#5

Thanks I just needed to replace the XX with 2D. one last question (maybe) how should I write the value of iResolution it’s a vec3 and I should give it the viewport resolution witch mean something like this (width, height, and_something_else) maybe?

#6

Nope, it’s vec2 :slight_smile:

#7

There is no error showing up now and the image is rendered without problem but nothing else is happening should I call mainImage inside main function or something like that ( sorry for the trouble) this is my uniforms and fragmentShader now

              var uniforms = {
				color: { value: new THREE.Color( 0xffffff ) },
				texture: { value: texture },
				iResolution: { value: '('+width+','+ height+')' },
				iTime: { value: 10.0 },
				iFrame: { value: 1.0 },
				'iChannelTime[4]': { value: 20.0 },
				'iChannelResolution[4]': { value: '('+width+','+ height+')' },
				iMouse: { value: 0 },
				iDatee: { value: '(2019, 1, 23, 3600)' },
				iSampleRatee: { value:  44100.0 }
			};
			const fragmentShader = `

				uniform vec2      iResolution;           // viewport resolution (in pixels)
				uniform float     iTime;                 // shader playback time (in seconds)
				uniform float     iTimeDelta;            // render time (in seconds)
				uniform int       iFrame;                // shader playback frame
				uniform float     iChannelTime[4];       // channel playback time (in seconds)
				uniform vec3      iChannelResolution[4]; // channel resolution (in pixels)
				uniform vec4      iMouse;                // mouse pixel coords. xy: current (if MLB down), zw: click
				uniform vec4      iDate;                 // (year, month, day, time in seconds)
				uniform float     iSampleRate;           // sound sample rate (i.e., 44100)

				varying vec3 vNormal;
				varying vec2 vUv;
				uniform vec3 color;
				uniform sampler2D texture;

				void mainImage( out vec4 fragColor, in vec2 fragCoord )
				{
					vec2 uv = fragCoord.xy / iResolution.xy;
					
					uv.y = -1.0 - uv.y;

					uv.x += sin(uv.y*10.0+iTime)/10.0;

					vec4 color = texture2D(texture, uv);
					
					fragColor = color;
				}

				void main() {
					vec3 light = vec3( 0.5, 0.2, 1.0 );
					light = normalize( light );
					float dProd = dot( vNormal, light ) * 0.5 + 0.5;
					vec4 tcolor = texture2D( texture, vUv );
					vec4 couleur = vec4( tcolor.r , tcolor.g , tcolor.b, 1.0 );
					gl_FragColor = couleur * vec4( vec3( dProd ) * vec3( color ), 1.0 ) ;
				}
			`
#8

This is something strange, should be:
iResolution: { value: new THREE.Vector2(width, height) }

#9

Oh, but even so nothing happen

#10

Looks like you’re trying to do it in as most complicated way as possible :slight_smile:
Keep things simple:
https://jsfiddle.net/prisoner849/ygxvndpu/

2 Likes
#11

:joy: Thank you so much :slightly_smiling_face: