着色器材质为您提供材料作为输出.您可以将此材质应用于任何网格.它基本上将数据从场景传递到顶点和片段着色器.
要获取着色器材质，下面的类称为 :
var myShaderMaterial = new BABYLON.ShaderMaterial(name, scene, route, options);
参数
考虑以下与着色器材料相关的参数 :
名称 : 一个字符串，命名着色器.
场景 : 要使用着色器的场景.
路线 : 以三种方式之一的着色器代码的路径 :
object - { vertex: "custom", fragment: "custom" }, used with BABYLON.Effect.ShadersStore["customVertexShader"] andBABYLON.Effect.ShadersStore["customFragmentShader"]object - { vertexElement: "vertexShaderCode", fragmentElement: "fragmentShaderCode" }, used with shader code in //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(); });