Varying 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">
		// switch on high precision floats
		precision highp float;
		varying vec3 myNormal;

		void main() {

			myNormal = normal;//normal is a built in attribute we can grab

			//vec3 newPosition = position + normal;

            // three.js provides the projection Matrix and the model View matrix. 
            // We just pipe in our positions and add the normal
            // We add a little bit of the normal so that
            // we can get direction vectors of the surface
            // We don't really need to do that all the time
            // but it's a good technique to be aware of
            
			gl_Position = projectionMatrix * modelViewMatrix * vec4(position + (normal * 0.01),2.0);
		}
	</script>
	<script id="fragmentShader" type="x-shader/x-fragment">
		//============================================================
		//PUT YOUR GLSL CODE HERE
		//============================================================

 	
		precision highp float;
        uniform vec2 mouse;
        uniform float time;
        //these values are being passed by the vertex shader
		varying vec3 myNormal;

		void main() {

            // light from the top
			vec3 light = vec3(0.,40.,0.);
			
			// Get the normal of the light
			// Remember the Unit Vector of the light is the direction of the light 
			
			light = normalize(light);
			
		    float prod = dot(myNormal,light);
            // use the dot product of the normal and the light
            // To...