四角形は平面上にある図形なので、板状のものが表示されました。今回は立方体を表示しています。そのため立体感が出ています。
6面ごとに色を別に付けてあり、それが回転しています。
深度テストまたはZテストと呼ばれる処理を有効にしました。これは深度値によって描画をするかを判定するテストのことです。これをしないと後に描いたもので常に上書きされていきます。前後関係により見えないものは描かないということをするのが深度テストの役目です。
gl.enable(gl.DEPTH_TEST);を入れれば深度テストが使えます。デプスバッファがないと当然上手く動きません。
立方体を表示するのにインデックスバッファオブジェクト（IBO）を使いました。並んでいる何番の頂点を表示に使うかということを指定するものです。IBOの実態は整数の配列で0、1、２とあったら、VBOの0、1、２番目のデータを使いなさいということを表します。
以下のサンプルは基本的には上の立方体を書いているものと同じです。違うのは画面のクリア処理を呼んでいないということです。見た目が面白かったので載せておきます。
これはレンダリングコンテキストを取得するときにpreserveDrawingBufferという属性をtrueにする必要があります。実はこの属性はデフォルトでfalseであり、そうすると表示されたバッファはデフォルトの値（RGBAは0、depthは1、stencilは0）でクリアされています。ディスプレイに表示された後、暗黙的にgl.clearが呼ばれていると考えて良いでしょう。仕様に書いてあるので詳しくはこちらを参照してください。
通常はgl.clearを呼ばなくてもクリアされて動くということになります。（背景を黒以外で表示したい場合は駄目ですが。）
このサンプルではgl.Clearを呼ばず、かつレンダリングコンテキストの取得時に自動でクリアしないようにしているので前回の描画が残り続けてこのような表示ができています。
参考
MDN Web docsの『WebGL を用いた 3D オブジェクトの作成』を参考にしています。
コメント