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
最后提到的语法与index.html文件夹中的外部文件COMMON_NAME.vertex.fx和COMMON_NAME.fragment.fx一起使用。
Options-包含属性的对象和以字符串形式包含名称的统一数组。
带值的着色器语法如下所示-
var shaderMaterial = new BABYLON.ShaderMaterial("shader", scene, {
vertex: "custom",
fragment: "custom",
},
{
attributes: ["position", "normal", "uv"],
uniforms: ["world", "worldView", "worldViewProjection", "view", "projection"]
});
属性必须是数组形式。这些包含位置、法线和 uv，它们是 vector3 3D 浮点向量。
vec2-浮点数的二维向量。
vec3-浮点数的三维向量。
mat4-具有 4 列和 4 行浮点数的矩阵。
gl_Position-它提供屏幕坐标的位置数据。
gl_FragColor-它提供用于在屏幕上表示面的颜色数据。
以上是GLSL语言中内置的变量。
由于顶点位置需要尽可能准确，因此所有浮点数都应设置为具有较高的精度。这是在每个着色器的代码开始时使用 –
precision highp float 完成的。精度 highp 浮点数决定了浮点数的精度。
以下演示基于第一个对象方法。
演示
<!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/文件夹中，也贴在下面供参考。您可以下载任何您选择的图片并在演示链接中使用。
图片/mat.jpg
