BabylonJS-ShaderMaterial

셰이더 재질은 재질을 출력으로 제공합니다. 이 재질을 모든 메시에 적용 할 수 있습니다. 기본적으로 장면의 데이터를 정점 및 조각 셰이더로 전달합니다.

셰이더 재질을 얻기 위해 다음 클래스가 호출됩니다.

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

매개 변수

셰이더 재질과 관련된 다음 매개 변수를 고려하십시오.

Name − 셰이더의 이름을 지정하는 문자열.
Scene − 셰이더가 사용되는 장면.
Route − 세 가지 방법 중 하나로 셰이더 코드에 대한 경로 −

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

마지막에 언급 된 구문은 index.html 폴더의 외부 파일 COMMON_NAME.vertex.fx 및 COMMON_NAME.fragment.fx와 함께 사용됩니다.

Options − 속성을 포함하는 객체와 이름을 문자열로 포함하는 uniforms 배열.

값이있는 셰이더 구문은 다음과 같습니다.

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. 정밀도 높은 부동 소수점은 부동 소수점에 사용되는 정밀도를 결정합니다.

다음 데모는 첫 번째 개체 메서드를 기반으로합니다.

데모

<!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>