BabylonJS - ShaderMaterial
Shader-Material gibt Ihnen ein Material als Ausgabe. Sie können dieses Material auf jedes Netz anwenden. Grundsätzlich werden die Daten aus Ihrer Szene an die Vertex- und Fragment-Shader übergeben.
Um das Shader-Material zu erhalten, heißt die folgende Klasse:
var myShaderMaterial = new BABYLON.ShaderMaterial(name, scene, route, options);
Parameter
Berücksichtigen Sie die folgenden Parameter in Bezug auf das Shader-Material:
Name - Eine Zeichenfolge, die den Shader benennt.
Scene - Die Szene, in der der Shader verwendet werden soll.
Route - Die Route zum Shader-Code auf eine der drei Arten -
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",
Die am Ende erwähnte Syntax wird mit externen Dateien COMMON_NAME.vertex.fx und COMMON_NAME.fragment.fx im Ordner index.html verwendet.
Options - Objekt mit Attributen und Uniformen Arrays mit ihren Namen als Zeichenfolgen.
Die Shader-Syntax mit Werten sieht wie folgt aus:
var shaderMaterial = new BABYLON.ShaderMaterial("shader", scene, {
vertex: "custom",
fragment: "custom",
},
{
attributes: ["position", "normal", "uv"],
uniforms: ["world", "worldView", "worldViewProjection", "view", "projection"]
});
Attribute müssen in Array-Form vorliegen. Diese enthalten Position, Normal und UV, die Vektor3-3D-Gleitkomma-Vektoren sind.
vec2 - Ein zweidimensionaler Vektor von Gleitkommazahlen.
vec3 - Ein dreidimensionaler Vektor von Gleitkommazahlen.
mat4 - Eine Matrix mit 4 Spalten und 4 Zeilen Gleitkommazahlen.
gl_Position - Es liefert Positionsdaten für Bildschirmkoordinaten.
gl_FragColor - Es liefert Farbdaten für die Darstellung einer Facette auf dem Bildschirm.
Die oben genannten Variablen sind in der GLSL-Sprache integriert.
Da Scheitelpunktpositionen so genau wie möglich sein müssen, sollten alle Gleitkommazahlen mit hoher Genauigkeit eingestellt werden. Dies erfolgt zu Beginn des Codes für jeden Shader mit -precision highp float. Der Präzisions-Highp-Float bestimmt, wie viel Präzision für einen Float verwendet wird.
Die folgende Demo basiert auf der ersten Objektmethode.
Demo
<!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>
Ausgabe
Die obige Codezeile generiert die folgende Ausgabe:
In dieser Demo haben wir Bild verwendet mat.jpg. Die Bilder werden lokal im Ordner images / gespeichert und unten als Referenz eingefügt. Sie können jedes Bild Ihrer Wahl herunterladen und im Demo-Link verwenden.