Учебники

BabylonJS — ShaderMaterial

Февраль 8, 2019

Материал шейдера дает вам материал в качестве вывода. Вы можете применить этот материал к любой сетке. Он в основном передает данные из вашей сцены в вершинный и фрагментный шейдеры.

Чтобы получить материал шейдера, следующий класс называется — 

var myShaderMaterial = new BABYLON.ShaderMaterial(name, scene, route, options);

параметры

Рассмотрим следующие параметры, связанные с материалом шейдера —

  • Имя — строка, называющая шейдер.

  • Сцена — сцена, в которой должен использоваться шейдер.

  • Маршрут — маршрут к шейдерному коду одним из трех способов —

Имя — строка, называющая шейдер.

Сцена — сцена, в которой должен использоваться шейдер.

Маршрут — маршрут к шейдерному коду одним из трех способов — 

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",

Синтаксис, упомянутый в конце, используется с внешними файлами COMMON_NAME.vertex.fx и COMMON_NAME.fragment.fx в папке index.html.

  • Параметры — объект, содержащий атрибуты и массивы униформ, содержащие их имена в виде строк.

Параметры — объект, содержащий атрибуты и массивы униформ, содержащие их имена в виде строк.

Синтаксис шейдера со значениями выглядит так, как показано ниже — 

var shaderMaterial = new BABYLON.ShaderMaterial("shader", scene, {
   vertex: "custom",
   fragment: "custom",
},
{
   attributes: ["position", "normal", "uv"],
   uniforms: ["world", "worldView", "worldViewProjection", "view", "projection"]
});

Атрибуты должны быть в форме массива. Они содержат положение, нормальное и ультрафиолетовое, которые являются векторными трехмерными векторами с плавающей запятой.

  • vec2 — двумерный вектор чисел с плавающей точкой.

  • vec3 — трехмерный вектор чисел с плавающей точкой.

  • mat4 — Матрица с 4 столбцами и 4 строками чисел с плавающей точкой.

  • gl_Position — предоставляет позиционные данные для экранных координат.

  • gl_FragColor — предоставляет данные о цвете для представления фасета на экране.

vec2 — двумерный вектор чисел с плавающей точкой.

vec3 — трехмерный вектор чисел с плавающей точкой.

mat4 — Матрица с 4 столбцами и 4 строками чисел с плавающей точкой.

gl_Position — предоставляет позиционные данные для экранных координат.

gl_FragColor — предоставляет данные о цвете для представления фасета на экране.

Выше встроенные переменные в языке GLSL.

Поскольку положения вершин должны быть максимально точными, все числа с плавающей запятой должны быть установлены как имеющие высокую точность. Это делается в начале кода для каждого шейдера, используя — точность highp float . Точность highp float определяет, какая точность используется для float.

Следующая демонстрация основана на первом методе объекта.

демонстрация 

<!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/archive.html
         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 / локально, а также вставляются ниже для справки. Вы можете скачать любое изображение по вашему выбору и использовать в демонстрационной ссылке.

53
Share: