| Revision | 38c107b8ce29629183f4bf3ccb8fff938c074009 (tree) |
|---|---|
| Time | 2017-10-05 02:06:07 |
| Author | DESKTOP-HB9PB2O\maaen <maaenvaohls10040392@outl...> |
| Commiter | DESKTOP-HB9PB2O\maaen |
webGL用レンダラーの検証
webglFramework/GameScript/rendererwebgl_2_0.js (diff)| @@ -1,63 +1,98 @@ | ||
| 1 | - | |
| 2 | 1 | // Class Module. |
| 3 | -export default class() = { | |
| 4 | - var RendererWebGL_2_0 = (function){ | |
| 5 | 2 | |
| 6 | - var myself = RendererWebGL_2_0.prototype; | |
| 3 | +//export default class() = { | |
| 4 | + var RendererWebGL_2_0 = (function(){ | |
| 5 | + | |
| 6 | + var myself = RendererWebGL_2_0.prototype; | |
| 7 | 7 | |
| 8 | - var canvas; | |
| 9 | - var gl; | |
| 10 | - var shaderSystem; | |
| 8 | + //var canvas; | |
| 9 | + //var gl; | |
| 10 | + var shaderSystem; | |
| 11 | 11 | |
| 12 | - var RendererWebGL_2_0 = function(){ | |
| 12 | + var RendererWebGL_2_0 = function(){ | |
| 13 | 13 | |
| 14 | - if(!(this instanceof RendererWebGL_2_0.prototype)){ | |
| 15 | - return new RendererWebGL(); | |
| 16 | - } | |
| 14 | + alert("webGL_2_0_Init"); | |
| 17 | 15 | |
| 18 | - SetupWebGL_2_0(); | |
| 16 | + if(!(this instanceof RendererWebGL_2_0.prototype)){ | |
| 17 | + return new RendererWebGL(); | |
| 18 | + } | |
| 19 | 19 | |
| 20 | - }; | |
| 20 | + SetupWebGL_2_0(); | |
| 21 | 21 | |
| 22 | - myself.SetupWebGL_2_0 = function(){ | |
| 22 | + this.projectionMatrix = mat4.create(); | |
| 23 | + SetProjectionConfig(); | |
| 23 | 24 | |
| 24 | - canvas = document.querySelector('#glcanvas'); | |
| 25 | - gl = canvas.getContext('webgl2'); | |
| 25 | + }; | |
| 26 | 26 | |
| 27 | - // If we don't have a GL context, give up now | |
| 28 | - if (!gl) { | |
| 29 | - alert('Unable to initialize WebGL. Your browser or machine may not support it.'); | |
| 30 | - return; | |
| 31 | - } | |
| 32 | - return gl; | |
| 33 | - }; | |
| 27 | + myself.SetupWebGL_2_0 = function(){ | |
| 34 | 28 | |
| 35 | - myself.GetWebGLContext = function(){ | |
| 29 | + this.canvas = document.querySelector('#glcanvas'); | |
| 30 | + this.gl = this.canvas.getContext('webgl2'); | |
| 36 | 31 | |
| 37 | - return gl; | |
| 32 | + // If we don't have a GL context, give up now | |
| 33 | + if (!this.gl) { | |
| 34 | + alert('Unable to initialize WebGL. Your browser or machine may not support it.'); | |
| 35 | + return; | |
| 38 | 36 | } |
| 37 | + return this.gl; | |
| 38 | + }; | |
| 39 | 39 | |
| 40 | - myself.GetWebCanvas = function(){ | |
| 40 | + myself.Render = function(){ | |
| 41 | 41 | |
| 42 | - return canvas; | |
| 43 | - } | |
| 42 | + this.gl.clearColor(1.0, 1.0, 1.0, 1.0); // Clear to black, fully opaque | |
| 43 | + this.gl.clearDepth(1.0); // Clear everything | |
| 44 | + this.gl.enable(this.gl.DEPTH_TEST); // Enable depth testing | |
| 45 | + this.gl.depthFunc(this.gl.LEQUAL); // Near things obscure far things | |
| 46 | + | |
| 47 | + // Clear the canvas before we start drawing on it. | |
| 48 | + this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT); | |
| 49 | + | |
| 50 | + }; | |
| 51 | + | |
| 52 | + myself.SetProjectionConfig = function( ){ | |
| 53 | + | |
| 54 | + // Create a perspective matrix, a special matrix that is | |
| 55 | + // used to simulate the distortion of perspective in a camera. | |
| 56 | + // Our field of view is 45 degrees, with a width/height | |
| 57 | + // ratio that matches the display size of the canvas | |
| 58 | + // and we only want to see objects between 0.1 units | |
| 59 | + // and 100 units away from the camera. | |
| 60 | + const fieldOfView = 45 * Math.PI / 180; // in radians | |
| 61 | + const aspect = this.gl.canvas.clientWidth / this.gl.canvas.clientHeight; | |
| 62 | + const zNear = 0.1; | |
| 63 | + const zFar = 100.0; | |
| 64 | + | |
| 65 | + // note: glmatrix.js always has the first argument | |
| 66 | + // as the destination to receive the result. | |
| 67 | + mat4.perspective(this.projectionMatrix, | |
| 68 | + fieldOfView, | |
| 69 | + aspect, | |
| 70 | + zNear, | |
| 71 | + zFar); | |
| 72 | + | |
| 73 | + alert(this.projectionMatrix); | |
| 74 | + | |
| 75 | + }; | |
| 76 | + | |
| 77 | + myself.GetWebGLContext = function(){ | |
| 78 | + | |
| 79 | + return this.gl; | |
| 80 | + }; | |
| 81 | + | |
| 82 | + myself.GetWebCanvas = function(){ | |
| 44 | 83 | |
| 45 | - myself.Play = function(){ | |
| 46 | - bgm.play(); | |
| 47 | - }; | |
| 84 | + return this.canvas; | |
| 85 | + }; | |
| 48 | 86 | |
| 49 | - myself.Pause = function(){ | |
| 50 | - bgm.pause(); | |
| 51 | - }; | |
| 87 | + myself.GetProjMtx = function(){ | |
| 52 | 88 | |
| 53 | - myself.AddVolume = function( volumeValue ){ | |
| 54 | - bgm.volume += volumeValue; | |
| 55 | - }; | |
| 89 | + return this.projectionMatrix; | |
| 90 | + }; | |
| 56 | 91 | |
| 57 | - return RendererWebGL; | |
| 92 | + return RendererWebGL; | |
| 58 | 93 | |
| 59 | 94 | })(); |
| 60 | -}; | |
| 95 | +//}; | |
| 61 | 96 | |
| 62 | 97 | |
| 63 | 98 |
Fork