webGL用レンダラーの検証

diff --git a/webglFramework/GameScript/rendererwebgl_2_0.js b/webglFramework/GameScript/rendererwebgl_2_0.js
index d615d54..51301cf 100644 (file)
--- a/webglFramework/GameScript/rendererwebgl_2_0.js
+++ b/webglFramework/GameScript/rendererwebgl_2_0.js
@@ -1,63 +1,98 @@
-
 // Class Module.
-export default class() = {
-    var RendererWebGL_2_0 = (function){
 
-        var myself = RendererWebGL_2_0.prototype;
+//export default class() = {
+    var RendererWebGL_2_0 = (function(){
+
+      var myself = RendererWebGL_2_0.prototype;
 
-        var canvas;
-        var gl;
-        var shaderSystem;
+      //var canvas;
+      //var gl;
+      var shaderSystem;
 
-        var RendererWebGL_2_0 = function(){
+      var RendererWebGL_2_0 = function(){
 
-            if(!(this instanceof RendererWebGL_2_0.prototype)){
-              return new RendererWebGL();
-            }
+        alert("webGL_2_0_Init");
 
-            SetupWebGL_2_0();
+        if(!(this instanceof RendererWebGL_2_0.prototype)){
+          return new RendererWebGL();
+        }
 
-        };
+        SetupWebGL_2_0();
 
-        myself.SetupWebGL_2_0 = function(){
+        this.projectionMatrix = mat4.create();
+        SetProjectionConfig();
 
-            canvas = document.querySelector('#glcanvas');
-            gl = canvas.getContext('webgl2');
+      };
 
-            // If we don't have a GL context, give up now
-            if (!gl) {
-              alert('Unable to initialize WebGL. Your browser or machine may not support it.');
-              return;
-            }
-            return gl;
-        };
+      myself.SetupWebGL_2_0 = function(){
 
-        myself.GetWebGLContext = function(){
+        this.canvas = document.querySelector('#glcanvas');
+        this.gl = this.canvas.getContext('webgl2');
 
-            return gl;
+        // If we don't have a GL context, give up now
+        if (!this.gl) {
+          alert('Unable to initialize WebGL. Your browser or machine may not support it.');
+          return;
         }
+        return this.gl;
+      };
 
-        myself.GetWebCanvas = function(){
+      myself.Render = function(){
 
-            return canvas;
-        }
+        this.gl.clearColor(1.0, 1.0, 1.0, 1.0);  // Clear to black, fully opaque
+        this.gl.clearDepth(1.0);                 // Clear everything
+        this.gl.enable(this.gl.DEPTH_TEST);           // Enable depth testing
+        this.gl.depthFunc(this.gl.LEQUAL);            // Near things obscure far things
+
+        // Clear the canvas before we start drawing on it.
+        this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
+
+      };
+
+      myself.SetProjectionConfig = function( ){
+
+        // Create a perspective matrix, a special matrix that is
+        // used to simulate the distortion of perspective in a camera.
+        // Our field of view is 45 degrees, with a width/height
+        // ratio that matches the display size of the canvas
+        // and we only want to see objects between 0.1 units
+        // and 100 units away from the camera.
+        const fieldOfView = 45 * Math.PI / 180;   // in radians
+        const aspect = this.gl.canvas.clientWidth / this.gl.canvas.clientHeight;
+        const zNear = 0.1;
+        const zFar = 100.0;
+
+        // note: glmatrix.js always has the first argument
+        // as the destination to receive the result.
+        mat4.perspective(this.projectionMatrix,
+                         fieldOfView,
+                         aspect,
+                         zNear,
+                         zFar);
+
+        alert(this.projectionMatrix);
+
+      };
+
+      myself.GetWebGLContext = function(){
+
+        return this.gl;
+      };
+
+      myself.GetWebCanvas = function(){
 
-        myself.Play = function(){
-            bgm.play();
-        };
+        return this.canvas;
+      };
 
-        myself.Pause = function(){
-            bgm.pause();
-        };
+      myself.GetProjMtx = function(){
 
-        myself.AddVolume = function( volumeValue ){
-            bgm.volume += volumeValue;
-        };
+        return this.projectionMatrix;
+      };
 
-        return RendererWebGL;
+      return RendererWebGL;
 
     })();
-};
+//};