WebGLとThree.jsの違いって何？押さえておきたい基本的なことのみ解説(GLSL)

2023年11月9日WebGL & Three.js

ブラウザ上で3Dグラフィクスを描いてみたいと考えたとき、
よく出てくる言葉として「WebGL」や「Three.js」と出会う機会があります。
WebGL(GLSL)とThree.jsの違いって何？
そもそもどういう意味？というところを詳しく説明します。

WebGLとThree.jsの違い

WebGLとは、ブラウザ上で3Dグラフィクスを描写するためのAPIの規格ことです。
Three.jsとは、WebGLを簡単に使用するための現状最も有名なJavaScriptライブラリです。
簡単に、以下のように言葉を整理してみましょう。

WebGLとは

WebGLとは、ブラウザ上でリアルタイムで、画面のそれぞれのピクセルの色をプログラムで決定する、3Dグラフィクスを描写するためのAPIの規格、仕様のことです。
つまり、ブラウザ上で3Dを扱いたい場合、WebGLの仕様を理解する必要があるということです。

WebGLの仕様の中には、CPUからGPUへの描画指示であったり、必要なデータを送る操作が含まれています。
また、物体の形状(頂点の位置の計算など)やピクセルの色を決定する操作が含まれています。これがGPU上で動作します。

Three.jsとは

Three.jsとは、「WebGLを簡単に使用するための現状最も有名なJavaScriptライブラリ」です。
Three.jsはJavaScriptを触る感覚でWebGLを扱えるライブラリで、ある程度のWebGLの難しいところを触らなくても3Dグラフィクスが表現できるようになります。

公式サイト:https://threejs.org
具体的なコードやサンプルのデモが動く形で知りたい場合は、【WebGL&Three.js入門】Three.jsの一番シンプルなサンプルコードのチュートリアルの解説でデモもみれる状態にしているので参考にしてみてください。

WebGLとシェーダ言語(GLSL)

WebGLのシェーダ言語はOpenGL Shading Languageの頭文字をとってGLSLと言われます。
エンジニアでこれからGLSLを触りたい人が知っておくことは、2つのシェーダ言語だけです。

WebGL上では、物体は、どfのような複雑な形でも三角形をつなぎ合わせて形を作っています。
WebGLで物体を作成するときに動くプログラムが二つあります。
頂点シェーダとフラグメントシェーダです。
頂点シェーダは、物体の頂点の位置を決めて、フラグメントシェーダは物体の色を決めます。
具体的には、Three.jsのコードをあえてWebGLのシェーダ言語で書いたデモとコードがあるので、【WebGL&Three.js】Three.jsのコードをシェーダ言語に書き換えたサンプルコードをデモ付きで解説をみてみてください。

エンジニアでこれからWebGLを触りたい人が知っておくことは、上の2つのシェーダ言語だけを習得すれば、WebGLが扱えるようになります。

GLSL 2.0の仕様の確認方法

WebGLは現在2.0を使っているので、以下が正式なWebGL2.0の完全な仕様書になります。
OpenGL ES 2.0.25 (November 2, 2010)
以下が正式なWebGL2.0の概要をわかりやすい形にしている仕様書になります。
OpenGL-ES-2_0の概要
実際に関数を調べるときによくみるサイトは以下です。(Functyionsが関数部分です。)
Shaderific for OpenGL

WebGLで何ができますか？

WebGLを利用すると、一般的に使われているJavaScriptやCSSといったもので表現できない奥行きのある3Dグラフィスクの表現ができるようになります。
アニメーションがとくに斬新で、思わず目を惹きつけられるような動きにすることができます。
使い方次第で、企業のブランディングにも紐づけられたりする点もWebGLを活用するメリットといえます。

WebGLに対応しているブラウザは？

日本においては現存しているほぼすべてのブラウザ利用可能といえます。
具体的には以下です。

  • Microsoft Internet Explorer 11.
  • Firefox 4以上
  • Google chrome 8以上
  • Safari5.1以上
  • iOS8以降のSafari

WebGLのおすすめサイトは？

一番例も豊富で信頼性が高いのは、three.jsのサイトです。
公式サイト:https://threejs.org

WebGLはなんで3Dグラフィクスができるの？

WebGLはなんで3Dグラフィクスができるのかについて、ちょっと詳しくみてみましょう。

WebGLはリアルタイムレンダリング

レンダリング(ブラウザに描画すること)には、主に以下の二つあります。

  • プリレンダリング
  • リアルタイムレンダリング

プリレンダリングとは

プリレンダリングとは、画像や動画を画面に表示するときに使います。
あらかじめ描画したい内容を画像であったり、動画であったりのデータとして生成しておいて、表示します。
あらかじめ決められたものを表示できる仕組みです。

リアルタイムレンダリングとは

リアルタイムレンダリングとは、リアルタイムに表示する内容を計算して、画像を生成することができます。
ユーザーの操作などに合わせて、インタラクティブに変化するグラフィック、映像を生成することができます。
WebGLではこのリアルタイムレンダリングということです。

なんでWebGLはリアルタイムレンダリングが可能なの？

このリアルタイムレンダリングを実現するには、画面を構成する何百万ものピクセル（画素）の色を一秒間に50〜60回計算し続けないといけません。
膨大な計算量になるのですが、GPU上でプログラムを動かせば可能になります。

CPUとGPUの違い

特性 CPU (Central Processing Unit) GPU (Graphics Processing Unit)
正式名称 中央処理装置 グラフィックス処理装置
主な役割 汎用的な計算処理、プログラムの実行制御 画像やビデオ処理、並列処理に特化した計算
得意な演算処理 複雑な算術・論理演算 簡単な演算を大量のデータに並行して実行
コアの数 数コアから数十コア 数百から数千コア
使用例 システム全体の管理、汎用プログラム実行 3Dグラフィックス描画、機械学習、ビッグデータ解析
メモリ管理 キャッシュメモリ、RAMへのアクセス 専用のビデオメモリ（VRAM）
パフォーマンスの最適化 シリアルタスク、分岐処理 並列処理、大規模データセットの処理

*表にある「コアの数」は一般的な範囲を示していますが、CPUやGPUのモデルによって異なります。
*CPUとGPUの役割は、現代のコンピュータシステムにおいて互いに補完的です。特定のタスクにおいて、一方が他方より優れている場合があります。
*GPUは元々画像処理に特化して設計されていましたが、近年では一般的な高性能計算にも使用されています（例：GPUを利用した深層学習）。

CPU(central processing unit)は、プログラムを直列で実行します。
GPU(Graphics Processing Unit)は、プログラムを並列で実行できます。
JavaScriptなどCPU上で動くプログラムは、基本的に1つのコアが1つの処理を実行します。
複雑な処理を超高速に行います。
それに対し、GPUでは、大量にコアがあり、単純な処理を同時に実行することができます。
膨大な量のピクセルがあっても、ピクセルごとの単純計算をするなどがとても得意です。

WebGLを調べていると必ずでてくるOpenGLについても軽く触れておきます。

WebGLとOpenGLの関係

OpenGLとは、デスクトップ上で3Dグラフィクスを描写するためのAPIのことです。
携帯では、OpenGL ESというAPIを使います。

このOpenGL ESから派生したものが、WebGLです。

OpenGL ES 2.0が、WebGL1.0
OpenGL ES 3.0は、WebGL2.0

WebGLはOpenGL ESの派生で、ブラウザ用に不要な機能を削ぎ落としています。
実装の段階の話になりますが、WebGLで調べてなかなか出てこない場合、
OpenGL ESで調べてみると、仕様としては同じものなので参考になる場合が多いです。

WebGLは、OpenGLのシェーダ言語(Shading Language)なので、そのアルファベットの頭文字から、GLSLとも呼ばれます。

WebGL & Three.js

Posted by devsakaso