📌  相关文章
📜  BabylonJS-ShaderMaterial

📅  最后修改于: 2020-10-27 03:35:43             🧑  作者: Mango

着色器材质为您提供了一种材质作为输出。您可以将此材料应用于任何网格。它基本上将数据从场景传递到顶点和片段着色器。

要获取着色器材质，以下类称为-

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 
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"]
});

属性必须为数组形式。这些包含位置，法线和uv，它们是vector3 3D浮点向量。

  • vec2-浮点数的二维向量。

  • vec3-浮点数的三维向量。

  • mat4-具有4列4行浮点数的矩阵。

  • gl_Position-提供屏幕坐标的位置数据。

  • gl_FragColor-它为屏幕上的构面表示提供颜色数据。

上面是用GLSL语言内置的变量。

由于顶点位置需要尽可能精确，因此所有浮点数都应设置为具有高精度。这是在每个着色器的代码开头使用– precision highp float进行的。精度高浮点数决定了浮点数的精度。

以下演示基于第一个对象方法。

演示版


      BabylonJs - Basic Element-Creating Scene

输出

上面的代码行将生成以下输出-

着色材质

在此演示中，我们使用了图像mat.jpg 。图像存储在本地的图像/文件夹中，也粘贴在下面以供参考。您可以下载您选择的任何图像并在演示链接中使用。

图片/mat.jpg

垫图