突然生えてきたシェーダー言語TSL

Transcript

1. 突然生えてきたシェーダー言語 TSL(Three.js Shader Language) お茶
2. いつもながら Three.jsが好きです
3. Three.jsってなんなん これを見れば大体わかる SOUGEN Ustubo社 Webファーストメタバース プロジェクト すごい(語彙力) https://sougen.co/
4. Three.jsの鬼門 シェーダーむずいよねー！ WebGLを扱うのがむずい GLSL(WebGLShaderLanguage) Web上でグラフィックの表現ができる
5. WebGLからWebGPUへ WebGLはグラフィックの表現を想定 → GPUの計算能力を活かせていない 3DグラフィックスでもGPUの計算能力の 必要性が高まっている 言語も GLSL → WGSL(WebGPU Shader Languageに！)
6. Three.jsは WebGPUへの対応を進めていたが 自分でカスタムしたシェーダーは動かない WebGPUとWebGLどちらも動かしたい！ GLSLとWGSLのむずさ 人類に優しくない(色々と) GLSL(C言語ベース) WGSL(Rustベース) 直感的にJSベースで書けると嬉しいよね！
7. Three.jsは そんなあなたに... TSL (Three.js Shader Language)！ 言語と言いつつJSで書ける！ WebGLとWebGPUのトランスパイルを 提供 Threeのエコシステムをそのまま使える JSのみで WebGLとWebGPUに対応したシェーダーが書ける
8. ちょっとサンプル こんな感じ 普通にJS 必要moduleをimport して使うだけ Threeのエコシステム をそのまま活用できる
9. こうなります
10. まとめ Threeでシェーダーを使うならTSL Threeのエコシステムをそのまま使える JSで書けて学習コストが低い 人類にちょっとだけ優しい WebGPUとWebGLに両対応できる