Babylonjs-shadermaterial
提供:Dev Guides
BabylonJS-シェーダー素材
シェーダーマテリアルは、出力としてマテリアルを提供します。 このマテリアルを任意のメッシュに適用できます。 基本的に、シーンからのデータを頂点シェーダーとフラグメントシェーダーに渡します。
シェーダー素材を取得するには、次のクラスが呼び出されます-
var myShaderMaterial = new BABYLON.ShaderMaterial(name, scene, route, options);
パラメーター
シェーダー素材に関連する次のパラメータを考慮してください-
- Name -シェーダーに名前を付ける文字列。
- Scene -シェーダーが使用されるシーン。
- ルート-3つの方法のいずれかでシェーダーコードへのルート-
object - {
vertex: "custom",
fragment: "custom"
}, used with
BABYLON.Effect.ShadersStore["customVertexShader"] and
BABYLON.Effect.ShadersStore["customFragmentShader"]
object - {
vertexElement: "vertexShaderCode",
fragmentElement: "fragmentShaderCode"
},
used with shader code in <script> tags
string - "./COMMON_NAME",
最後に述べた構文は、indexlフォルダー内の外部ファイルCOMMON_NAME.vertex.fxおよびCOMMON_NAME.fragment.fxで使用されます。
- オプション-属性を含むオブジェクトと、名前を文字列として含むユニフォーム配列。
値を持つシェーダー構文は次のようになります-
var shaderMaterial = new BABYLON.ShaderMaterial("shader", scene, {
vertex: "custom",
fragment: "custom",
},
{
attributes: ["position", "normal", "uv"],
uniforms: ["world", "worldView", "worldViewProjection", "view", "projection"]
});
属性は配列形式でなければなりません。 これらには、vector3 3D浮動小数点ベクトルである位置、法線、uvが含まれます。
- vec2 -浮動小数点数の2次元ベクトル。
- vec3 -浮動小数点数の3次元ベクトル。
- mat4 -4列4行の浮動小数点数の行列。
- gl_Position -画面座標の位置データを提供します。
- gl_FragColor -画面上のファセットの表現に色データを提供します。
上記はGLSL言語の組み込み変数です。
頂点の位置はできるだけ正確である必要があるため、すべての浮動小数点数は高精度として設定する必要があります。 これは、各シェーダーのコードの開始時に- precision highp float を使用して行われます。 精度highp floatは、floatに使用される精度を決定します。
次のデモは、最初のオブジェクトメソッドに基づいています。
Demo
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Element-Creating Scene</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
//downloaded HDR files from :http://www.hdrlabs.com/sibl/archivel
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera(
"Camera", Math.PI/4, Math.PI/4, 4, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
BABYLON.Effect.ShadersStore["customVertexShader"] = "\r\n" +
"precision highp float;\r\n" +
"//Attributes\r\n" +
"attribute vec3 position;\r\n" +
"attribute vec2 uv;\r\n" +
"//Uniforms\r\n" +
"uniform mat4 worldViewProjection;\r\n" +
"//Varying\r\n" +
"varying vec2 vUV;\r\n" +
"void main(void) {
\r\n" +
"gl_Position = worldViewProjection * vec4(position, 1.0);\r\n" +
"vUV = uv;\r\n"+"
}
\r\n";
BABYLON.Effect.ShadersStore["customFragmentShader"] = "\r\n"+
"precision highp float;\r\n" +
"varying vec2 vUV;\r\n" +
"uniform sampler2D textureSampler;\r\n" +
"void main(void) {
\r\n"+
"gl_FragColor = texture2D(textureSampler, vUV);\r\n"+"
}
\r\n";
var shaderMaterial = new BABYLON.ShaderMaterial("shader", scene, {
vertex: "custom",
fragment: "custom",
},
{
attributes: ["position", "normal", "uv"],
uniforms: ["world", "worldView", "worldViewProjection", "view", "projection"]
});
var mainTexture = new BABYLON.Texture("images/mat.jpg", scene);
shaderMaterial.setTexture("textureSampler", mainTexture);
shaderMaterial.backFaceCulling = false;
var box = BABYLON.MeshBuilder.CreateBox("box", {}, scene);
box.material = shaderMaterial;
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>
出力
上記のコード行は、次の出力を生成します-
このデモでは、画像 mat.jpg を使用しました。 画像はimages/フォルダにローカルに保存され、参照用に以下に貼り付けられます。 選択した任意の画像をダウンロードして、デモリンクで使用できます。