BETA

続々・WebGLについて

投稿日:2019-10-28
最終更新:2019-12-06

この記事は先日投稿したこちらの記事の続きとなります。

はじめに

今回は前回までで表示したポリゴン単体を回転させたいと思います。

回転させるために必要なモノ

3Dオブジェクトを回転させるためには行列が必要になります。
なぜ行列が必要なのかはこちらのサイトなどを参考にしてもらうと何となく分かると思います。
なにはともあれ行列が必要なわけです。

行列

とはいえ行列が必要といわれてもどのように作ればいいのかわかりません。
ですので今回はglMatrixという行列生成ライブラリを利用しました。(あくまでも行列生成ライブラリなので生WebGL描画という当初の目的は継続中です。(断言))

れっつ回転

glMatrixを使用して回転させる方法について、今回はこちらの記事を参考にさせて頂きました。

頂点シェーダの変更

glmatrixを追加した上で頂点シェーダの変更をします。
今回の追加したコードに関してはコメントで簡易的に説明をしてあります。

<script id="vs" type="x-shader/x-vertex">  

// 平行起動回転行列  
uniform mat4 modelviewMatrix;   
// 錐台変換行列  
uniform mat4 projectionMatrix;   
// 頂点座標  
attribute vec3 position;  
// 頂点の法線ベクトル   
attribute vec3 normal;  
// 法線ベクトルと平行移動回転行列との積  
varying vec3 e_normal;   
attribute vec4 color;  
varying lowp vec4 vColor;  
void main ()  
{  
    // 頂点座標をクリッピング座標系に変換  
    gl_Position = projectionMatrix * modelviewMatrix * vec4(position, 1.0);  
    // 法線ベクトルを世界座標系に変換  
    e_normal = vec3(modelviewMatrix * vec4(normal, 0.0));  
    vColor = color;  
}  

</script>  
  • varying
    • 頂点シェーダからフラグメントシェーダに送るデータ

フラグメントシェーダの変更

<script id="fs" type="x-shader/x-fragment">  

// 法線ベクトルと平行移動回転行列との積  
precision mediump float;  
varying vec3 e_normal;  
varying lowp vec4 vColor;  
void main ()  
{  
    // 法線ベクトルを正規化  
    vec3 n = normalize(e_normal);  
    // 法線ベクトルと光ベクトルとの内積で光量を決定  
    float l = abs(dot(n, normalize(vec3(-1, 1, 1))));  
    gl_FragColor = vColor;  
}  

</script>  

描画時に回転させる

var frame = 0;  
function render()  
{  
    frame++;  
    // 錐台行列の生成  
    var proj_mat = mat4.create();  
    mat4.frustum(proj_mat, -1, 1, -1, 1, 3, 10);  
    // 移動回転行列の生成  
    var mv_mat = mat4.create();  
    mat4.translate(mv_mat, mv_mat, [0, 0, -6]);  
    mat4.rotate(mv_mat, mv_mat, frame * 0.01, [0, 1, 0]);   
    // uniformでShaderに送信  
    gl.uniformMatrix4fv(gl.getUniformLocation(program, "projectionMatrix"), false, proj_mat);  
    gl.uniformMatrix4fv(gl.getUniformLocation(program, "modelviewMatrix"), false, mv_mat);  

    // ======== Start 5.背景描画 ========  

              ...  

    // ======== End 8.描画する ========  

        // 一定時間ごと処理をループ  
    setTimeout(render, 16);  
}  

2019/11/22 追記

3d感が薄かったためZ軸をズラしました。

// Z軸を0から0.5に変更  
var position = [  
    0, 0.5, 0.5,  
    -0.5, -0.5, 0.5,  
    0.5 ,-0.5, 0.5  
];  

くるくる

おわりに

やっと動いてるものを描画することができました。
ポリゴン1枚を描画して回転させるだけですが、ここまで行うのにそこそこのコード量が必要でした。
生WebGLでの描画、回転などが行えましたので、次回はなにかライブラリを使用してさくっと3Dオブジェクトを表示させたいと思います。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

だいたいめもたまにめも

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう