From ebf5253bc00ce9cf4e9949b162977cdead74238e Mon Sep 17 00:00:00 2001
From: nievescanas <nievescanasmartin@gmail.com>
Date: Thu, 28 Mar 2019 19:30:54 +0100
Subject: [PATCH] primeros cambios

---
 textures/textured_sphere.html | 48 ++++++++++++++++++++++++++++++++---
 1 file changed, 44 insertions(+), 4 deletions(-)

diff --git a/textures/textured_sphere.html b/textures/textured_sphere.html
index bddfbdb..fbc96bd 100644
--- a/textures/textured_sphere.html
+++ b/textures/textured_sphere.html
@@ -7,28 +7,40 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"></script>
 
     <script id="shaderVs" type="x-shader/x-vertex">
+
         attribute vec4 a_Position;
+        attribute vec3 a_Normal;
         attribute vec2 a_TexCoord;
-        varying vec2 v_TexCoord;
 
         uniform mat4 u_pMatrix;
         uniform mat4 u_vMatrix;
         uniform mat4 u_mvMatrix;
-        varying highp vec4 v_Color;
+
+        varying vec2 v_TexCoord;
+        varying highp vec3 v_Normal;
+
         void main() {
             gl_Position = u_pMatrix * u_vMatrix * u_mvMatrix * a_Position;
             v_TexCoord = a_TexCoord;
+            v_Normal = normalize(a_Normal - vec3(gl_Position));
         }
     </script>
 
     <script id="shaderFs" type="x-shader/x-fragment">
         precision highp float;
         precision mediump float;
+        uniform vec3 u_LightColor;
+        uniform vec3 u_LightDirection;
+        varying highp vec4 v_Color;
+        varying highp vec3 v_Normal;
         uniform sampler2D u_Sampler;
         varying vec2 v_TexCoord;
 
         void main(void) {
-            gl_FragColor = texture2D(u_Sampler, v_TexCoord);
+          highp vec4 v_Color = texture2D (u_Sampler,v_TexCoord)
+          float nDotL = max(dot(u_LightDirection, v_Normal), 0.0);
+          vec3 diffuse = u_LightColor * v_Color.rgb * nDotL;
+          gl_FragColor = vec4(diffuse, v_Color.a);
         }
     </script>
 
@@ -71,8 +83,11 @@
             initTexturesAndDraw(gl);
         }
 
+
+
         function initVertexShader(gl) {
             // Vertexes and textures coordinates
+            var normals = [];
             var vertexesAndTextures = [];
             for (var i = 0; i <= LATITUDE_BANDS; i++) {
                 var theta = i * Math.PI / LATITUDE_BANDS;
@@ -129,6 +144,12 @@
             gl.enableVertexAttribArray(vertexColorAttribute);
             gl.vertexAttribPointer(vertexColorAttribute, 2, gl.FLOAT, false, 4 * (3 + 2), 4 * 3);
 
+            gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
+            gl.bufferData(gl.ARRAY_BUFFER, normals, gl.STATIC_DRAW);
+            var vertexNormalAttribute = gl.getAttribLocation(gl.program, "a_Normal");
+            gl.enableVertexAttribArray(vertexNormalAttribute);
+            gl.vertexAttribPointer(vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0);
+
             // Write indexes in gl.ELEMENT_ARRAY_BUFFER
             gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
             gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexes), gl.STATIC_DRAW);
@@ -145,6 +166,19 @@
             var vMatrixUniform = gl.getUniformLocation(gl.program, "u_vMatrix");
             var vMatrix = mat4.lookAt(mat4.create(), [0, 0, -3], [0, 0, 0], [0, 1, 0]);
             gl.uniformMatrix4fv(vMatrixUniform, false, vMatrix);
+
+            // Write u_LightColor
+            var lightColor = [ 1.0, 1.0, 1.0 ]; // white
+            var lightColorUniform = gl.getUniformLocation(gl.program, "u_LightColor");
+            gl.uniform3fv(lightColorUniform, lightColor);
+            // Write u_LightDirection
+            var x = document.getElementById("x").value;
+            var y = document.getElementById("y").value;
+            var z = document.getElementById("z").value;
+            var lightDirection = [ x, y, z ];
+            vec3.normalize(lightDirection, lightDirection);
+            var lightDirectionUniform = gl.getUniformLocation(gl.program, "u_LightDirection");
+            gl.uniform3fv(lightDirectionUniform, lightDirection);
         }
 
         function initTexturesAndDraw(gl) {
@@ -222,6 +256,12 @@
 
 <body onload="init()">
     <canvas id="myCanvas" width="640" height="480"></canvas>
+
+    <b>Light direction</b><br>
+    <input type="range" id="x" min="-20" max="20" value="2" step="1">X<br>
+    <input type="range" id="y" min="-20" max="20" value="-8" step="1">Y<br>
+    <input type="range" id="z" min="-20" max="20" value="-8" step="1">Z<br>
+
 </body>
 
-</html>
\ No newline at end of file
+</html>