チームラボみたいな映像がつくりたいなぁ。
なにやら『Unity』でつくられているらしい。
ということを知りまして。
※この映像は『Unity』でつくられているそうです。
チームラボの『Unity本』がでていたので早速買って読んでいたら、
なにやら見慣れない『シェーダー』がいくつも明記されていました。
- ジオメトリシェーダー
- コンピュートシェーダー
と思い、ググりにググり、
『シェーダー』のバージョンをまとめてみることにしました。
2020/5/6追記
チームラボ本が無料PDFに変わったようです。
興味ある方はぜひ。
https://github.com/IndieVisualLab/UnityGraphicsProgrammingSeries
グラフィックス関連の2つの規格とシェーダー言語
グラフィック関連の規格は大きく2つのタイプがあります。
- OpenGL・・オープンジーエル (Open Graphics Library)
- DirectX・・ダイレクトエックス
『シェーダー』言語はそれぞれ下記が使われています。
- OpenGL・・GLSL(OpenGL Shader Language)
- DirectX・・HLSL(High Level Shading Language)
ウェブでは『GLSL』が使われて、
『Unity』では『HLSL』が使われるようですが、
『シェーダー』言語自体は少し書き方が違うだけ、のようです。
OpenGL関連(OpenGLとWebGLとThree.js)のざっくりまとめ
『OpenGL(オープンジーエル)』は『クロノスグループ』が開発元で、
Windows、mac、Unixなどで使用できます。
携帯や家電向けなどの組み込み用途で、
- OpenGL ES (OpenGL for Embedded Systems)
という規格もあります。
- 規格・・決まり、ルールといった意味
また、
グーグルクロムなどのウェブブラウザでグラフィクスを表示させるための、
- WebGL(ウェブジーエル)・・OpenGLを使いやすくしたAPI
という規格もあります。
- WebGL1.0 ・・ OpenGL ES2.0の派生規格
- WebGL2.0 ・・ OpenGL ES3.0の派生規格
参考記事
2019年8月現在では、
『WebGL2.0』 の普及率は5割あるかどうかだそうで、
ホームページで3D表現を実施するなら、
まだまだ『WebGL1.0』が無難な選択肢になるようです。
最新WebGL通信 いまキャッチアップしたいWebGL2・WebGPU・WebXRとは
3Dプログラミングが楽に書けると人気の『Three.js』では、
バージョン『R95』から『WebGL2.0』対応されたものの、
基本設定は現在も『WebGL1.0』なので、
『WebGL2.0』を使いたいなら、切り替え設定が必要だそうです。
- 『Three.js』・・WebGLを使いやすくしたJavaScriptライブラリ
参考記事
How to use WebGL2
また、プログラミング難易度としては易しい順に、
『Three.js』->『WebGL』->『OpenGL』になります。
参考記事
Three.js と WebGL と OpenGL ES で三角形を描いてみる
参考記事
DirectX 関連はさらっと
『DirectX(ダイレクトエックス)』は、
マイクロソフトが開発したゲーム・マルチメディア向けに開発された規格です。
元々はウィンドウズのみ対応だったけれど、
現在は3Dライブラリのスタンダート的な立ち位置だそうです。
OpenGLとDirectXのバージョン整理と比較
Wikipediaを参考にずらっと並べてみました。
まずは『OpenGL』。
- OpenGL1.1
- OpenGL1.5 2003年。
- OpenGL2.x 2004年。GLSL1.0に対応。
- OpenGL3.x 2008年。
- OpenGL3.2 2009年。 ジオメトリシェーダ対応
- OpenGL4.0 2010年。テッセレーションシェーダ
- OpenGL4.3 2012年。 GPGPU演算シェーダ
- OpenGL4.7 2017年。
ちなみにMacでは、2019年現在も『OpenGL4.1』までの対応のようです。
OpenGL および OpenCL グラフィックスを扱う Mac コンピュータ
続いて『DirectX』。
- DirectX 1.0 1995年
〜中略〜 - DirectX 9.0 2002年。 HLSL導入
- DirectX 10.0 2007年。 ジオメトリシェーダー対応
- DirectX 11.0 2009年。コンピュートシェーダ、テッセレーション等
- DirectX 12 2015年。
世代としてはざっくり下記になるようです。
- OpenGL 2.x ・・ Direct3D 9 ・・プレステ3レベル
- OpenGL 3.x ・・ Direct3D 10
- OpenGL 4.x ・・ Direct3D 11 ・・プレステ4レベル
- Direct3D ・・ DirectXの一部。3Dグラフィックスを描画するAPI。
OpenGLとDirectXのバージョンまとめてみて
これまでほとんどウェブ関連の『GLSL』を触っていたので、
『シェーダー』といえばてっきり2種類だけかと思っていたのですが、
- 頂点シェーダー(Vertex Shader)
- フラグメントシェーダ(Fragment Shader) / ピクセルシェーダ
バージョンが上がるにつれ、
- ジオメトリシェーダー
- テッセレーション制御シェーダー
- テッセレーション評価シェーダー
- コンピュートシェーダー
などが追加されていることを知りました。
ウェブで表現する場合は、これからもしばらくは『WebGL1.0』でいいのかなと思いつつ、
チームラボ的な『メディアアート』をやろうとするなら、
より高バージョンの『シェーダー』にも触れた方がいいのかなと思ったり。
とはいえ、実のところ、
難しいのは『シェーダー言語』というよりも、『数学』『物理』だったりします。
『ナビエストークス方程式』を把握するには、
- ベクトル解析(勾配・発散)
- ベクトル内積
- 微分(偏微分)
- 剛体力学
などの知識が必要になってくるので、
学生時代ろくに勉強してなかった身としては、なかなかしんどいところではありつつも、
どうせなら綺麗な映像つくりたいよなぁとも思ったりして、
これからももりもり『シェーダー』に取り組んでいこうと思っとります。
『GLSL(シェーディング)』関係ではこんな記事も読まれています。
1. 【GLSL】プログラムでかっこいい映像をつくりたい! 〜『TouchDesigner』を見据えて2. 【WebGL】入門 わかりやすく【図解】してみた
3. 【OpenGL】と【DirectX】のバージョンをまとめてみた【シェーダーメイン】【初心者向け】
4. 【GLSL(シェーディング)】でよく使う関数とユーザー関数のまとめ※随時更新
5. 【GLSL】プログラムでかっこいい映像をつくるには『レイマーチング』なるものを覚えればいいらしい
6. 【GLSL】『レイマーチング』入門その1 距離関数とレイとカメラの設定
7. 【GLSL】『レイマーチング』入門(2) 立体的に見せる方法〜光の反射は『内積』で〜
8. 【GLSL】『レイマーチング』入門(3) 距離関数を使ってみる・回転・合成・量産
9. 【TouchDesigner】で『GLSL』を使う方法まとめ【画像あり】
10. 【TouchDesigner】『GLSL MAT』の使い方 3次元でぐりぐり動かしてみる
11. 【GLSL】波のつくり方簡易まとめ。波もプログラムでつくれます【コピペスタイル】
『Unity』関係ではこんな記事も読まれています。
1. 【Unity】本のおすすめはこれで決まり！【初心者向け】1冊をとことんやって次に行きましょ2. 【Unity】シェーダ入門(サーフェスシェーダ) をまとめてみた。※随時更新
3. 【OpenGL】と【DirectX】のバージョンをまとめてみた【シェーダーメイン】【初心者向け】
4. 【Unity】よく使う用語集【初心者向け】※随時更新
アオキのツイッターアカウント。
この記事へのコメントはありません。