着色器材质为您提供材料作为输出.您可以将此材质应用于任何网格.它基本上将数据从场景传递到顶点和片段着色器.
要获取着色器材质,下面的类称为 :
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",
最后提到的语法与index.html文件夹中的外部文件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"] });
属性必须采用数组形式.这些包含位置,normal和uv,它们是vector3 3D浮点向量.
vec2 &minus ;浮点数的二维向量.
vec3 : 浮点数的三维向量.
mat4 : 一个包含4列和4行浮点数的矩阵.
gl_Position : 它提供屏幕坐标的位置数据.
gl_FragColor : 它提供了在屏幕上表示构面的颜色数据.
以上是用GLSL语言构建的变量.
由于顶点位置需要尽可能准确,因此所有浮点数应设置为具有高精度.这是在每个着色器的代码开始时使用 - precision highp float 完成的.精度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>
上面的代码行将生成以下输出 :
在本演示中,我们使用了图像 mat.jpg .图像存储在本地的图像/文件夹中,也粘贴在下面以供参考.您可以下载任何您选择的图像并在演示链接中使用.