3D RENDERING HISTORY
SPECIAL CHAPTER · OPENGL / WEBGL 2

描画の仕事をGPUへ渡す

第2章で計算していた「面の裏側を消す」「手前の面で奥を隠す」をGPUに任せる。WebGL 2(OpenGL ES 3.0系)で立方体を描いて比較します。

LIVE · WEBGL 2WebGL 2を初期化しています…

手前の橙色を先に描き、奥の水色を後に描きます。

01 / DEPTH

描画順が逆でも消せる

初期設定では近い橙色の立方体を先に描きます。深度テストをOFFにすると、後で描いた奥の水色が手前を塗りつぶします。

02 / CULLING

「裏向き」と「隠れる」は別

背面カリングは裏向きの三角形を除外します。別の物体に隠された表側の三角形は、深度テストなしでは隠せません。

03 / SHADERS

回転と投影は頂点シェーダーへ

WebGL 2のGLSL ES 3.00で座標を変換し、フラグメントシェーダーで色を返します。Canvas 2Dとは違い三角形の塗りつぶしはGPUの仕事です。

READ FIRST

これは先取り編

第3章のZ-bufferは企画中。ここではWebGLの機能として先に体験します。OpenGLの歴史とWebGLのバージョン差は教科書へ。

OpenGLとWebGLの教科書を読む ↗