Vertex Shader

by SQShu

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  	<style>
		body {
			margin: 0px;
			background-color: #000000;
			overflow: hidden;
		}
	</style>
       <script src = "https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<style>
		body, #container {
			overflow: hidden;
		}
	</style>
</head>
<body>
	<div id="container"></div>
	<script id="vertexShader" type="x-shader/x-vertex">
		uniform highp float time;
        
		mat4 scale = mat4(1.0,0.0,0.0,0.0,0.0,0.25,0.0,0.0,0.0,0.0,1.0,0.0,0.0,0.0,0.0,1.0);

		
		void main() {
		   
            float displacementHeight = 1.0;
            float displacementY = sin(time + (position.x) * 5.) * displacementHeight;
	
            vec4 modifiedPosition = vec4(position,1.0);
	        modifiedPosition.y += displacementY;
	        gl_Position = modifiedPosition * scale ;                
		}
	</script>
	<script id="fragmentShader" type="x-shader/x-fragment">
		//============================================================
		//PUT YOUR GLSL CODE HERE
		//============================================================

        precision mediump float;
        
        uniform vec2 resolution;
        uniform vec2 mouse;
        uniform highp float time;
        
        void main(){
            
	        vec2 norm_res = vec2(gl_FragCoord.xy / resolution);
		
            gl_FragColor = vec4(norm_res.x,norm_res.y,0.,1.0);
        }
		//============================================================
		//END OF GLSL CODE
		//============================================================
	</script>
	<script>
		//change the resolution here. 1 is highest
		var pixel_resolution = 2;
		var container, stats;
		var camera, scene, renderer;
		var uniforms;
		init();
		animate();
		function init() {
			camera = new THREE.Camera();
			camera.position.z = 1.0;
			scene = new THREE.Scene();
			var geometry =...