9.3.1 Shader with external file

Ovilia · Ovilia · commit 5d8d0cd94d4c · 2013-09-24T20:18:38.000+08:00
diff --git a/Chapter9/9.3.1.html b/Chapter9/9.3.1.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
+    <head>
+        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
+        <script type="text/javascript" src="../lib/three.js"></script>
+        
+        <script type="text/javascript">
+            var scene = null;
+            var camera = null;
+            var renderer = null;
+            
+            var material = null;
+            var cube = null;
+            
+            function init() {
+                renderer = new THREE.WebGLRenderer({
+                    canvas: document.getElementById('mainCanvas')
+                });
+                scene = new THREE.Scene();
+                
+                camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
+                camera.position.set(5, 15, 25);
+                camera.lookAt(new THREE.Vector3(0, 0, 0));
+                scene.add(camera);
+                
+                var light = new THREE.DirectionalLight();
+                light.position.set(3, 2, 5);
+                scene.add(light);
+                
+                // load shader
+                $.get('shader/my.vs', function(vShader){
+                    $.get('shader/my.fs', function(fShader){
+                        material = new THREE.ShaderMaterial({
+                            vertexShader: vShader,
+                            fragmentShader: fShader
+                        });
+                
+                        cube = new THREE.Mesh(new THREE.CubeGeometry(2, 2, 2), material);
+                        scene.add(cube);
+                        
+                        draw();
+                    });
+                });
+            }
+            
+            function draw() {
+                cube.rotation.y += 0.01;
+                if (cube.rotation.y > Math.PI * 2) {
+                    cube.rotation.y -= Math.PI * 2;
+                }
+            
+                renderer.render(scene, camera);
+                
+                requestAnimationFrame(draw);
+            }
+        </script>
+    </head>
+    
+    <body onload="init()">
+        <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
+    </body>
+</html>
diff --git a/Chapter9/shader/my.fs b/Chapter9/shader/my.fs
@@ -0,0 +1,4 @@
+varying vec2 vUv;
+void main() {
+    gl_FragColor = vec4(vUv.x, vUv.y, 0.0, 1.0);
+}
diff --git a/Chapter9/shader/my.vs b/Chapter9/shader/my.vs
@@ -0,0 +1,8 @@
+varying vec2 vUv;
+void main()
+{    
+    // passing texture to fragment shader
+    vUv = uv;
+    
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
