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/フォルダにローカルに保存され、参照用に以下に貼り付けられます。選択した任意の画像をダウンロードして、デモリンクで使用できます。

Images/mat.jpg

マット画像

Babylonjs-shadermaterial

BabylonJS-シェーダー素材

パラメーター

Demo

出力

Images/mat.jpg

目次