Babylonjs-mesh-blendmodes
提供:Dev Guides
BabylonJS-メッシュブレンドモード
マテリアルのアルファモードを変更することにより、ブレンドモードを作成できます。
次のモードが利用可能であり、同じ出力が表示されるようにボックスに適用されます-
BABYLON.Engine.ALPHA_COMBINE
BABYLON.Engine.ALPHA_ADD
BABYLON.Engine.ALPHA_SUBTRACT
BABYLON.Engine.ALPHA_MULTIPLY
BABYLON.Engine.ALPHA_MAXIMIZED
これは、ブレンドモードが適用される方法です-
mat = material_base.clone(null);
mat.alphaMode = blendmode;
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">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.ambientColor = new BABYLON.Color3(0.05, 0.2,0.05 );
//Create a light
var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(-60, 60, 80), scene);
//Create an Arc Rotate Camera - aimed negative z this time
var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI/2, 1.0, 110, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
//Creation of a plane
var plane = BABYLON.Mesh.CreatePlane("plane", 250, scene);
plane.position.y = -8;
plane.rotation.x = Math.PI/2;
//Creation of a repeated textured material
var materialPlane = new BABYLON.StandardMaterial("texturePlane", scene);
materialPlane.diffuseTexture = new BABYLON.Texture("images/board.jpg", scene);
materialPlane.diffuseTexture.uScale = 5.0;//Repeat 5 times on the Vertical Axes
materialPlane.diffuseTexture.vScale = 5.0;//Repeat 5 times on the Horizontal Axes
materialPlane.backFaceCulling = false;//Allways show the front and the back of an element
plane.material = materialPlane;
//materials
var material_base = new BABYLON.StandardMaterial("mat", scene);
material_base.diffuseTexture = new BABYLON.Texture("images/glitter.jpg", scene);
material_base.alpha = 0.9999; //artificially set the material as alpha blended
material_base.ambientColor = BABYLON.Color3.White();
var alphamodes = [
BABYLON.Engine.ALPHA_COMBINE,
BABYLON.Engine.ALPHA_ADD,
BABYLON.Engine.ALPHA_SUBTRACT,
BABYLON.Engine.ALPHA_MULTIPLY,
BABYLON.Engine.ALPHA_MAXIMIZED
];
var count = 5;
var mesh;
var mat;
var angle;
for (var i = 0; i < count; i++) {
mesh = BABYLON.Mesh.CreateBox("cube" + i, 12, scene);
mesh.position.x = 17 * (i +0.5 - count/2);
mat = material_base.clone(null);
mat.alphaMode = alphamodes[i];
mesh.material = mat;
}
return scene
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>
出力
上記のコード行は、次の出力を生成します-
このデモでは、画像 glitter.jpg、board.jpg を使用しました。 画像はimages/フォルダにローカルに保存され、参照用に以下に貼り付けられます。 選択した任意の画像をダウンロードして、デモリンクで使用できます。