webglFramework/js/script.js

   1 // Write JavaScript here
   2 var gl; // WebGL コンテキスト用のグローバル変数
   3
   4 var squareVerticesBuffer;
   5 var shaderProgram;
   6
   7 function webApplicationMain(){
   8
   9   start();
  10
  11   run();
  12 }
  13
  14 function run(){
  15
  16
  17 }
  18
  19 function start() {
  20
  21   var canvas = document.getElementById("GameCanvas");
  22
  23   // GL コンテキストを初期化
  24   gl = initWebGL(canvas);
  25
  26   var buffers = initBuffers();
  27
  28   var initshader = initShaders();
  29
  30   // WebGL を使用できる場合に限り、処理を継続
  31
  32   if (gl) {
  33     // クリアカラーを黒色、不透明に設定する
  34     gl.clearColor(192/255, 192/255, 192/255, 1.0);
  35     // 深度テストを有効化
  36     gl.enable(gl.DEPTH_TEST);
  37     // 近くにある物体は、遠くにある物体を覆い隠す
  38     gl.depthFunc(gl.LEQUAL);
  39     // カラーバッファや深度バッファをクリアする
  40     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  41
  42     gl.viewport(0, 0, canvas.width, canvas.height);
  43   }
  44
  45   var renderer = drawScene();
  46
  47 }
  48
  49 function initWebGL(canvas) {
  50
  51   gl = null;
  52
  53   try {
  54     // 標準コンテキストの取得を試みる。失敗した場合は、experimental にフォールバックする。
  55     gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
  56   }
  57   catch(e) {}
  58
  59   // GL コンテキストを取得できない場合は終了する
  60   if (!gl) {
  61     alert("WebGL を初期化できません。ブラウザはサポートしていないようです。");
  62     gl = null;
  63   }
  64
  65   return gl;
  66 }
  67
  68 var horizAspect = 480.0/640.0;
  69
  70 function initBuffers() {
  71
  72   squareVerticesBuffer = gl.createBuffer();
  73   gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
  74
  75   var vertices = [
  76     1.0,  1.0,  0.0,
  77     -1.0, 1.0,  0.0,
  78     1.0,  -1.0, 0.0,
  79     -1.0, -1.0, 0.0
  80   ];
  81
  82   gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  83 }
  84
  85 function initShaders() {
  86   var fragmentShader = getShader(gl, "shader-fs");
  87   var vertexShader = getShader(gl, "shader-vs");
  88
  89   // シェーダープログラムを作成
  90
  91   shaderProgram = gl.createProgram();
  92   gl.attachShader(shaderProgram, vertexShader);
  93   gl.attachShader(shaderProgram, fragmentShader);
  94   gl.linkProgram(shaderProgram);
  95
  96   // シェーダープログラムを作成できない場合はアラートを表示
  97
  98   if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
  99     alert("シェーダープログラムを初期化できません。");
 100   }
 101
 102   gl.useProgram(shaderProgram);
 103
 104   vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
 105   gl.enableVertexAttribArray(vertexPositionAttribute);
 106 }
 107
 108 function getShader(gl, id) {
 109   var shaderScript, theSource, currentChild, shader;
 110
 111   shaderScript = document.getElementById(id);
 112
 113   if (!shaderScript) {
 114     return null;
 115   }
 116
 117   theSource = "";
 118   currentChild = shaderScript.firstChild;
 119
 120   while(currentChild) {
 121     if (currentChild.nodeType == currentChild.TEXT_NODE) {
 122       theSource += currentChild.textContent;
 123     }
 124
 125     currentChild = currentChild.nextSibling;
 126   }
 127
 128   if (shaderScript.type == "x-shader/x-fragment") {
 129     shader = gl.createShader(gl.FRAGMENT_SHADER);
 130   } else if (shaderScript.type == "x-shader/x-vertex") {
 131     shader = gl.createShader(gl.VERTEX_SHADER);
 132   } else {
 133      // 未知のシェーダータイプ
 134      return null;
 135   }
 136
 137   gl.shaderSource(shader, theSource);
 138
 139   // シェーダープログラムをコンパイル
 140   gl.compileShader(shader);
 141
 142   // コンパイルが成功したかを確認
 143   if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
 144       alert("シェーダーのコンパイルでエラーが発生しました: " + gl.getShaderInfoLog(shader));
 145       return null;
 146   }
 147
 148   return shader;
 149 }
 150
 151 function drawScene() {
 152   gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 153
 154   perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
 155
 156   loadIdentity();
 157   mvTranslate([-0.0, 0.0, -6.0]);
 158
 159   gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
 160   gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
 161   setMatrixUniforms();
 162   gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 163 }
 164
 165 function loadIdentity() {
 166   mvMatrix = Matrix.I(4);
 167 }
 168
 169 function multMatrix(m) {
 170   mvMatrix = mvMatrix.x(m);
 171 }
 172
 173 function mvTranslate(v) {
 174   multMatrix(Matrix.Translation($V([v[0], v[1], v[2]])).ensure4x4());
 175 }
 176
 177 function setMatrixUniforms() {
 178   var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
 179   gl.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix.flatten()));
 180
 181   var mvUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
 182   gl.uniformMatrix4fv(mvUniform, false, new Float32Array(mvMatrix.flatten()));
 183 }
 184
 185
 186
 187
 188
 189
 190
 191
 192
 193
 194
 195
 196
 197
 198
 199
 200
 201
 202
 203
 204
 205