CG関連

【OpenGL】と【DirectX】のバージョンをまとめてみた【シェーダーメイン】【初心者向け】

チームラボみたいな映像がつくりたいなぁ。

なにやら『Unity』でつくられているらしい。

ということを知りまして。

※この映像は『Unity』でつくられているそうです。

チームラボの『Unity本』がでていたので早速買って読んでいたら、

チームラボのUnity本 vol.1

なにやら見慣れない『シェーダー』がいくつも明記されていました。

  • ジオメトリシェーダー
  • コンピュートシェーダー
アオキ
頂点シェーダとフラグメントシェーダは知ってるけど、他にも種類あるの・・?
アオキ
もしかして、私のバージョン古いかも・・?

と思い、ググりにググり、

『シェーダー』のバージョンをまとめてみることにしました。

Sponsored link

グラフィックス関連の2つの規格とシェーダー言語

グラフィック関連の規格は大きく2つのタイプがあります。

  • OpenGL・・オープンジーエル (Open Graphics Library)
  • DirectX・・ダイレクトエックス

『シェーダー』言語はそれぞれ下記が使われています。

  • OpenGL・・GLSL(OpenGL Shader Language)
  • DirectX・・HLSL(High Level Shading Language)

ウェブでは『GLSL』が使われて、
『Unity』では『HLSL』が使われるようですが、

『シェーダー』言語自体は少し書き方が違うだけ、のようです。

GLSLを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 で三角形を描いてみる

アオキ
この記事見ると、『Three.js』って簡単なんやなって思えますね・・

参考記事

Sponsored link

DirectX 関連はさらっと

『DirectX(ダイレクトエックス)』は、

マイクロソフトが開発したゲーム・マルチメディア向けに開発された規格です。

元々はウィンドウズのみ対応だったけれど、

現在は3Dライブラリのスタンダート的な立ち位置だそうです。

アオキ
Windowsのパソコンならもれなくインストールされてますな。

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年。
アオキ
知らないシェーダーがいくつも。WebGL1.0で使ってるGLSLは2004年だったんですな。

ちなみに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。

アオキ
というかプレステ4って2013年発売だったのね、、月日が経つのはあっという間や・・
Sponsored link

OpenGLとDirectXのバージョンまとめてみて

これまでほとんどウェブ関連の『GLSL』を触っていたので、

『シェーダー』といえばてっきり2種類だけかと思っていたのですが、

  • 頂点シェーダー(Vertex Shader)
  • フラグメントシェーダ(Fragment Shader) / ピクセルシェーダ

バージョンが上がるにつれ、

  • ジオメトリシェーダー
  • テッセレーション制御シェーダー
  • テッセレーション評価シェーダー
  • コンピュートシェーダー

などが追加されていることを知りました。

ウェブで表現する場合は、これからもしばらくは『WebGL1.0』でいいのかなと思いつつ、

チームラボ的な『メディアアート』をやろうとするなら、

より高バージョンの『シェーダー』にも触れた方がいいのかなと思ったり。

とはいえ、実のところ、

難しいのは『シェーダー言語』というよりも、『数学』『物理』だったりします。

アオキ
チームラボの『Unity本 vol1』には流体力学(ナビエストークス方程式)がでてきます。(ムズカシイ・・

『ナビエストークス方程式』を把握するには、

  • ベクトル解析(勾配・発散)
  • ベクトル内積
  • 微分(偏微分)
  • 剛体力学

などの知識が必要になってくるので、

学生時代ろくに勉強してなかった身としては、なかなかしんどいところではありつつも、

どうせなら綺麗な映像つくりたいよなぁとも思ったりして、

これからももりもり『シェーダー』に取り組んでいこうと思っとります。

アオキ
とことんやったるどー。
created by Rinker
¥4,320 (2019/08/21 04:36:12時点 Amazon調べ-詳細)

『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】よく使う用語集【初心者向け】※随時更新

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


関連記事

  1. CG関連

    【GLSL(シェーダー)】波のつくり方簡易まとめ。波もプログラミングでつくれます【コピペスタイル】

    プログラミングでかっこいい映像をつくりたいと始めた『GLSL』。関…

  2. CG関連

    【TouchDesigner】『GLSL MAT』の使い方 3次元でぐりぐり動かしてみる

    『プログラミング』を使ってかっこよく、インタラクティブな映像をつくり…

  3. CG関連

    【TouchDesigner】で『GLSL(シェーダー)』を使う方法まとめ【画像あり】

    手や身体の動きに合わせて映像が変わっていく『インタラクティブ』な映像を…

  4. CG関連

    【TouchDesigner】で『GLSL』を使う方法を動画で学んでみる その3 画像の合成

    引き続き【TouchDesigner】で『GLSL』を使う動画を見つつ…

  5. CG関連

    【Unity】よく使う用語集【初心者向け】※随時更新

    『Unity』で覚えておいた方がいい用語をまとめてみました。初心者…

  6. CG関連

    プログラミングで数学も身につく 一石四鳥なクリエイティブコーディング

    2020年から小学校でもプログラミング教育が義務化になり、子ども向…

Sponsored link

最近の記事

  1. IoT関連

    【Arduino】ラジコンをつくってみた 〜今ドキのプログラミングの覚え方
  2. 学び・教育

    『ニュータイプの時代』〜リベラルアーツとテクノロジーの融合〜
  3. CG関連

    【P5.js】遊ぶようにプログラミングできるクリエイティブコーディング〜はじめの…
  4. バックエンド

    【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【…
  5. バックエンド

    【Laravel(PHP)】初心者向け アプリのつくり方 をリリースしました【t…
PAGE TOP
//記事ページのみに構造化データを出力 //サムネイルを取得 //ここから構造化データの記述