OpenGL知っている所からWebGL入門(5) 透視投影変換行列を使う

2019年11月13日公開
2020年9月18日更新
gluPerspectiveのソースコードをhttps://www.khronos.org/opengl/wiki/GluPerspective_codeから~~コピペ~~移植して透視投影変換をします。
ソースコード

<!DOCTYPE html>
    <html>
      <head>
        <title>四角形描画</title>
        <style>
        </style>
      </head>
      <body>
        
        <!-- HTML5のキャンバス作成 -->
        <canvas id="MyCanvas" width="400" height="400"></canvas>
        
        <!-- シェーダ -->
        
        <!-- シェーダはGLSL (OpenGL Shading Language) で書く。つまり、ここはHTMLでもJavaScriptでもない -->
        <!-- scriptタグのid「vshader」を識別子として、コンパイル時にgetElementByIDを使って文字列としてこのシェーダプログラムを参照する -->
        <!-- ************************************** -->
        <!-- ** 頂点シェーダ*********************** -->
        <!-- ************************************** -->
        <script id="vshader" type="x-shader/x-vertex">
          attribute vec3 position;
          attribute vec3 color;
          
          uniform mat4 mmodel;//モデルビュー行列
          uniform mat4 mperspective;//透視投影変換行列
          varying lowp vec3 vColor;
          void main(void){
            gl_Position = mperspective * mmodel * vec4(position, 1.0);
            vColor = color;
          }
        </script>

        <!-- ここもGLSLで書く。 -->    
        <!-- 上と同様、コンパイル時にscriptタグのid「fshader」で参照する -->
        <!-- ************************************** -->
        <!-- ** フラグメントシェーダ*************** -->
        <!-- ************************************** -->
        <script id="fshader" type="x-shader/x-fragment">

          precision mediump float;//これがないとコンパイルエラーになる
          varying lowp vec3 vColor;
          
          void main(void){
              gl_FragColor = vec4(vColor, 1.0);
          }
        </script>
        


        <!-- シェーダ(変化なし) -->
         <!-- シェーダのコンパイル。ここはJavaScriptで書く   -->
        <!-- ************************************** -->
        <!-- ** シェーダコンパイルとリンク********* -->
        <!-- ************************************** -->
        <script>

          var programID;// グローバル変数としてプログラム名の格納先を定義する
        
          function prepare_shaders(gl){
          
            ///////////////////////////////
            ///////////////////////////////
            // 頂点シェーダコンパイル
            var vs = document.getElementById ("vshader");
            var vertexShader = gl.createShader (gl.VERTEX_SHADER);
            gl.shaderSource (vertexShader, vs.text);//シェーダのプログラムをテキストで取得
            gl.compileShader (vertexShader);
            
            if ( !gl.getShaderParameter (vertexShader, gl.COMPILE_STATUS) ){
              throw new Error (gl.getShaderInfoLog(vertexShader));
            }
            
            ///////////////////////////////
            ///////////////////////////////
            // フラグメントシェーダコンパイル
            var fs = document.getElementById ("fshader");
            var fragmentShader = gl.createShader (gl.FRAGMENT_SHADER);
            gl.shaderSource (fragmentShader, fs.text);//シェーダのプログラムをテキストで取得
            gl.compileShader (fragmentShader);
            
            if ( !gl.getShaderParameter (fragmentShader, gl.COMPILE_STATUS) ){
              throw new Error (gl.getShaderInfoLog(fragmentShader));
            }

             ///////////////////////////////
            ///////////////////////////////
           // プログラムのリンク
            programID = gl.createProgram ();
            gl.attachShader (programID, vertexShader);
            gl.attachShader (programID, fragmentShader);
            gl.linkProgram (programID);
            
            if ( !gl.getProgramParameter(programID, gl.LINK_STATUS) ) {
                throw new Error (gl.getProgramInfoLog(programID));
            }
            
          }
        </script>
        
        
        <!-- データ準備(変化なし) -->


        <!-- データの準備。ここもJavaScriptで書く   -->
        <!-- ************************************** -->
        <!-- ** 三角形の準備********* -->
        <!-- ************************************** -->
        <!-- ************************************** -->
        <script>
        
          //各変数をグローバル変数として定義
          var vertexesVboID;
          var colorsVboID;
          function prepare_data(gl){

            //頂点バッファ作成
            var vertexes = [
              -0.7,  0.7, 0.0,
               0.7,  0.7, 0.0,
              -0.7, -0.7, 0.0,
               0.7, -0.7, 0.0
            ];
            
            vertexesVboID = gl.createBuffer ();
            gl.bindBuffer (gl.ARRAY_BUFFER, vertexesVboID);
            gl.bufferData (gl.ARRAY_BUFFER, new Float32Array (vertexes), gl.STATIC_DRAW);
            
            //カラーバッファ作成
            var colors = [
               1.0,  0.0, 0.0,
               0.0,  1.0, 0.0,
               0.0,  0.0, 1.0,
               1.0,  1.0, 1.0
            ];
            colorsVboID = gl.createBuffer ();
            gl.bindBuffer (gl.ARRAY_BUFFER, colorsVboID);
            gl.bufferData (gl.ARRAY_BUFFER, new Float32Array (colors), gl.STATIC_DRAW);
            
          }
        </script>
        
        
        <!-- 回転行列 -->

        <!-- ************************************** -->
        <!-- ** アフィン変換行列を作る関数 ******** -->
        <!-- ************************************** -->
        <script>
          function rotate_z16(rad){
            var m = new Float32Array(16);
            m[ 0] = Math.cos(rad);
            m[ 1] = Math.sin(rad);
            m[ 2] = 0;
            m[ 3] = 0;
            m[ 4] = -Math.sin(rad);
            m[ 5] = Math.cos(rad);
            m[ 6] = 0;
            m[ 7] = 0;
            m[ 8] = 0;
            m[ 9] = 0;
            m[10] = 1;
            m[11] = 0;
            m[12] = 0;
            m[13] = 0;
            m[14] = 0;
            m[15] = 1;
            return m;
          }
          function rotate_x16(rad){
            var m = new Float32Array(16);
            m[ 0] = 1;
            m[ 1] = 0;
            m[ 2] = 0;
            m[ 3] = 0;
            m[ 4] = 0;
            m[ 5] = Math.cos(rad);
            m[ 6] = Math.sin(rad);
            m[ 7] = 0;
            m[ 8] = 0;
            m[ 9] = -Math.sin(rad);
            m[10] = Math.cos(rad);
            m[11] = 0;
            m[12] = 0;
            m[13] = 0;
            m[14] = 0;
            m[15] = 1;
            return m;
          }
          
          
        </script>

        
        <!-- 透視投影変換行列 -->
        <!-- https://www.khronos.org/opengl/wiki/GluPerspective_code -->
        <script>
          function glhFrustumf2(
            matrix,
            left, right, bottom, top,
            znear, zfar
          ){
            var temp, temp2, temp3, temp4;
            temp = 2.0 * znear;
            temp2 = right - left;
            temp3 = top - bottom;
            temp4 = zfar - znear;
            matrix[0] = temp / temp2;
            matrix[1] = 0.0;
            matrix[2] = 0.0;
            matrix[3] = 0.0;
            matrix[4] = 0.0;
            matrix[5] = temp / temp3;
            matrix[6] = 0.0;
            matrix[7] = 0.0;
            matrix[8] = (right + left) / temp2;
            matrix[9] = (top + bottom) / temp3;
            matrix[10] = (-zfar - znear) / temp4;
            matrix[11] = -1.0;
            matrix[12] = 0.0;
            matrix[13] = 0.0;
            matrix[14] = (-temp * zfar) / temp4;
            matrix[15] = 0.0;

          }
          function glhPerspectivef2(
            matrix,
            fovyInDegrees, aspectRatio,
            znear, zfar){

            var ymax, xmax;
            var temp, temp2, temp3, temp4;
            ymax = znear * Math.tan(fovyInDegrees * 3.14159 / 360.0);
            xmax = ymax * aspectRatio;
            glhFrustumf2(matrix, -xmax, xmax, -ymax, ymax, znear, zfar);
            
          }

        </script>

        

        
        <!-- やっと描画部分           -->
        <!-- ここもJavaScriptで書く   -->
        <!-- ////////////////////////////////////// -->
        <!-- // 初回のみ実行 ////////////////////// -->
        <!-- ////////////////////////////////////// -->
        <!-- ////////////////////////////////////// -->
        <script>
          var mycanv;
          
          // 初回表示時に呼び出される
          window.onload = function(){
          
            
            mycanv = document.getElementById("MyCanvas");

            // クリックイベントを追加　今回はマウスを動かすと回転する 
            mycanv.addEventListener('mousemove', onMouseMove, false);

            // GLコンテキストを取得
            var gl = mycanv.getContext('webgl') || mycanv.getContext('experimental-webgl');
            
            prepare_shaders(gl);//シェーダの準備
            
            prepare_data(gl);//描画データの準備

            //最初の描画
            render(0);

          }
          
          
        </script>

        <script>
        
          var radangle = 0;
          var posz = -3;
          
          

          /////////////////////////////////////////////
          //マウスイベント本体
          function onMouseMove(e) {
            console.log("mousemove");
            var x = e.clientX - mycanv.offsetLeft;
            var y = e.clientY - mycanv.offsetTop;
            console.log("x:", x, "y:", y,"radang:",radangle);
            

            radangle+=0.1;
            render(radangle);
          }
  
  
  
          ////////////////////////////////////////////
          //レンダリング関数
          function render(angle){

            // GLコンテキストを取得
            var gl = mycanv.getContext('webgl') || mycanv.getContext('experimental-webgl');
            
            // 画面を黒でクリア
            gl.clearColor(0.0, 0.0, 0.0, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);

            gl.useProgram(programID);

            //行列の設定
            var rotmat = rotate_x16(angle);
            rotmat[14] = posz;//モデルを奥に移動
            var pspmat = new Float32Array(16);
            glhPerspectivef2(pspmat,45,1.0/1.0,0.1,50);
            
            var matmodel = gl.getUniformLocation(programID, 'mmodel');
            var matperspective =  gl.getUniformLocation(programID, 'mperspective');
            gl.uniformMatrix4fv(matmodel, false, rotmat);
            gl.uniformMatrix4fv(matperspective, false, pspmat);

            //バッファへアクセス
            var vertex_location = gl.getAttribLocation (programID, 'position');
            var color_location = gl.getAttribLocation (programID, 'color');

            //頂点バッファを有効にする
            gl.enableVertexAttribArray (vertex_location);
            gl.bindBuffer (gl.ARRAY_BUFFER, vertexesVboID);
            gl.vertexAttribPointer (vertex_location, 3, gl.FLOAT,false, 0, 0);

            //カラーバッファを有効にする
            gl.enableVertexAttribArray (color_location);
            gl.bindBuffer (gl.ARRAY_BUFFER, colorsVboID);
            gl.vertexAttribPointer (color_location, 3, gl.FLOAT,false, 0, 0);

            //四角形を描く
            gl.drawArrays (gl.TRIANGLE_STRIP, 0, 4);
            
            //バッファを無効にする
            gl.disableVertexAttribArray(vertex_location);
            gl.disableVertexAttribArray(color_location);
            
            gl.flush ();
          }
        
        
        </script>

      </body>
    </html>