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

突然生えてきたシェーダー言語 TSL(Three.js Shader Language) お茶

いつもながら Three.jsが好きです

Three.jsってなんなんこれを見れば大体わかる SOUGEN Ustubo社 Webファーストメタバースプロジェクトすごい(語彙力) https://sougen.co/

Three.jsの鬼門シェーダーむずいよねー！ WebGLを扱うのがむずい GLSL(WebGLShaderLanguage) Web上でグラフィックの表現ができる

WebGLからWebGPUへ WebGLはグラフィックの表現を想定 → GPUの計算能力を活かせていない 3DグラフィックスでもGPUの計算能力の必要性が高まっている言語も GLSL → WGSL(WebGPU
Shader Languageに！)

Three.jsは WebGPUへの対応を進めていたが自分でカスタムしたシェーダーは動かない WebGPUとWebGLどちらも動かしたい！ GLSLとWGSLのむずさ人類に優しくない(色々と) GLSL(C言語ベース) WGSL(Rustベース) 直感的にJSベースで書けると嬉しいよね！

Three.jsはそんなあなたに... TSL (Three.js Shader Language)！言語と言いつつJSで書ける！ WebGLとWebGPUのトランスパイルを提供 Threeのエコシステムをそのまま使える
JSのみで WebGLとWebGPUに対応したシェーダーが書ける

ちょっとサンプルこんな感じ普通にJS 必要moduleをimport して使うだけ Threeのエコシステムをそのまま活用できる

こうなります

まとめ Threeでシェーダーを使うならTSL Threeのエコシステムをそのまま使える JSで書けて学習コストが低い人類にちょっとだけ優しい WebGPUとWebGLに両対応できる

お茶