简介
1 .至少需要4种纹理
1 .
2 .实现效果，把下面按照颜色分的地形，填充不同的地形贴图，其实这个也算是高度图的一个变种吧,只不过不同的颜色表示不同的地形
截屏2022-01-03 下午7.51.36.png
3 .https://playground.babylonjs.com/#E6OZX#7
4 .这样就解决了SLG里面的道路显示，我们可以按照这种方法先画出来，然后仅仅填充纹理即可，或者直接画在图上就行
5 .这里也说了一种草地的做法，不是真的弄很多草，而是仅仅加载纹理，然后做凹凸贴图这样
关键
1 .一种颜色定义一种地形，然后中间的颜色是两张纹理的过度，也就是说，这个只支持3中材质的地形，那感觉适用场景直线下降啊。感觉要操作下源码啊，为啥只支持这三个呢
diffuseTexture1: Red
diffuseTexture2: Green
diffuseTexture3: Blue
2 .教程代码也太少了吧
3 .但是这样搞地形看起来确实不多，因为正常确实两种地形之间会有融合，这个一点也不违和
4 .这种图只能支持三个啊
全部代码
<!DOCTYPE html>
<!-- 添加小人,使用序列图 -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>Babylon - Getting Started</title>
<!-- Link to the last version of BabylonJS -->
<script src="https://preview.babylonjs.com/babylon.js"></script>
<!-- Link to the last version of BabylonJS loaders to enable loading filetypes such as .gltf -->
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<!-- Link to pep.js to ensure pointer events work consistently in all browsers -->
<script src="https://code.jquery.com/pep/0.4.1/pep.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.min.js"></script> -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script> -->
<!-- <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script> -->
<!-- <script src="https://cdn.rawgit.com/BabylonJS/Extensions/master/DynamicTerrain/dist/babylon.dynamicTerrain.min.js"></script> -->
<script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
<script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
<!-- <script src="https://github.com/BabylonJS/Babylon.js/blob/master/dist/preview%20release/materialsLibrary/babylon.waterMaterial.js"></script> -->
<script src="./fur.js"></script>
</head>
<style>
html, body {
overflow: hidden;
width : 100%;
height : 100%;
margin : 0;
padding : 0;
}
#renderCanvas {
width : 100%;
height : 100%;
touch-action: none;
}
</style>
<body>
<canvas id="renderCanvas" touch-action="none"></canvas>
<script>
const canvas = document.getElementById("renderCanvas");
var engine = null;
// 这里还不能用let，不然就爆炸，获取不到engine
var scene = null;
var sceneToRender = null;
const createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true, disableWebGL2Support: false}); };
let createScene=async function(){
var scene = new BABYLON.Scene(engine)
var camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 4, 100, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
let material=new BABYLON.TerrainMaterial('terrainMaterial',scene)
// 一种新的定义材质的方式
material.specalurColor=new BABYLON.Color3(0.5,0.5,0.5)
material.sprcalurPower=64
material.mixTexture=new BABYLON.Texture('http://127.0.0.1:8080/source/image/f1.png',scene)
material.diffuseTexture1=new BABYLON.Texture('http://127.0.0.1:8080/source/image/f2.png')
material.diffuseTexture2=new BABYLON.Texture('http://127.0.0.1:8080/source/image/f3.png')
material.diffuseTexture3=new BABYLON.Texture('http://127.0.0.1:8080/source/image/f4.png')
material.bumpTexture1=new BABYLON.Texture('http://127.0.0.1:8080/source/image/f5.png')
material.bumpTexture2=new BABYLON.Texture('http://127.0.0.1:8080/source/image/f6.png')
material.bumpTexture3=new BABYLON.Texture('http://127.0.0.1:8080/source/image/f7.png')
material.diffuseTexture1.uScale=material.diffuseTexture1.vScale=10
material.diffuseTexture2.uScale=material.diffuseTexture2.vScale=10
material.diffuseTexture3.uScale=material.diffuseTexture3.vScale=10
let ground=BABYLON.Mesh.CreateGroundFromHeightMap('ground','http://127.0.0.1:8080/source/image/f8.png',100,100,100,0,10,scene,false)
ground.position.y=-2
ground.material=material
// scene.debugLayer.show();
return scene
}
window.initFunction=async function(){
let asyncEngineCreation=async function(){
try{
return createDefaultEngine()
}catch(e){
return createDefaultEngine()
}
}
window.engine=await asyncEngineCreation()
if(!engine){
throw('engine should not be null')
}
window.scene=createScene()
}
initFunction().then(()=>{
scene.then((returnedScene)=>{
sceneToRender=returnedScene
})
engine.runRenderLoop(function(){
if(sceneToRender&&sceneToRender.activeCamera){
sceneToRender.render()
}
})
})
window.addEventListener('resize',function(){
engine.resize()
})
</script>
</body>
</html>
混合材质
1 .上面说的只能加三种材质的，其实他还有一个大哥，可以加7种材质
2 .最多使用8个漫反射,每一个至少需要4张，虽然可能显示不出来.
3 .混合纹理不支持凹凸贴图
<!DOCTYPE html>
<!-- 添加小人,使用序列图 -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>Babylon - Getting Started</title>
<!-- Link to the last version of BabylonJS -->
<script src="https://preview.babylonjs.com/babylon.js"></script>
<!-- Link to the last version of BabylonJS loaders to enable loading filetypes such as .gltf -->
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<!-- Link to pep.js to ensure pointer events work consistently in all browsers -->
<script src="https://code.jquery.com/pep/0.4.1/pep.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.min.js"></script> -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script> -->
<!-- <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script> -->
<!-- <script src="https://cdn.rawgit.com/BabylonJS/Extensions/master/DynamicTerrain/dist/babylon.dynamicTerrain.min.js"></script> -->
<script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
<script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
<!-- <script src="https://github.com/BabylonJS/Babylon.js/blob/master/dist/preview%20release/materialsLibrary/babylon.waterMaterial.js"></script> -->
<script src="./fur.js"></script>
</head>
<style>
html, body {
overflow: hidden;
width : 100%;
height : 100%;
margin : 0;
padding : 0;
}
#renderCanvas {
width : 100%;
height : 100%;
touch-action: none;
}
</style>
<body>
<canvas id="renderCanvas" touch-action="none"></canvas>
<script>
const canvas = document.getElementById("renderCanvas");
var engine = null;
// 这里还不能用let，不然就爆炸，获取不到engine
var scene = null;
var sceneToRender = null;
const createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true, disableWebGL2Support: false}); };
let createScene=async function(){
var scene = new BABYLON.Scene(engine)
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene)
var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(-3, 0, -42), scene)
camera.setTarget(BABYLON.Vector3.Zero())
camera.attachControl(canvas, true)
let material=new BABYLON.MixMaterial('terrainMaterial',scene)
// 一种新的定义材质的方式
material.mixTexture1=new BABYLON.Texture('http://127.0.0.1:8080/source/image/f1.png',scene)
// 第一张有颜色标记的纹理，下面的这些材质都是按照颜色自己找上去的
material.diffuseTexture1=new BABYLON.Texture('http://127.0.0.1:8080/source/image/f2.png')
material.diffuseTexture2=new BABYLON.Texture('http://127.0.0.1:8080/source/image/f3.png')
material.diffuseTexture3=new BABYLON.Texture('http://127.0.0.1:8080/source/image/f4.png')
material.diffuseTexture4=new BABYLON.Texture('http://127.0.0.1:8080/source/image/fur.jpg')
material.diffuseTexture1.uScale=material.diffuseTexture1.vScale=10
material.diffuseTexture2.uScale=material.diffuseTexture2.vScale=10
material.diffuseTexture3.uScale=material.diffuseTexture3.vScale=10
material.diffuseTexture4.uScale=material.diffuseTexture4.vScale=10
// 添加第二张混合贴图，上一张贴图只能满足3个色彩，要做下一个就需要再来一张图
material.mixTexture2=new BABYLON.Texture('http://127.0.0.1:8080/source/image/f11.png',scene)
material.diffuseTexture5=new BABYLON.Texture('http://127.0.0.1:8080/source/image/fur.jpg')
material.diffuseTexture6=new BABYLON.Texture('http://127.0.0.1:8080/source/image/crate.png')
material.diffuseTexture7=new BABYLON.Texture('http://127.0.0.1:8080/source/image/f4.png')
material.diffuseTexture8=new BABYLON.Texture('http://127.0.0.1:8080/source/image/crate.png')
material.diffuseTexture5.uScale=material.diffuseTexture5.vScale=10
material.diffuseTexture6.uScale=material.diffuseTexture6.vScale=10
material.diffuseTexture7.uScale=material.diffuseTexture7.vScale=10
material.diffuseTexture8.uScale=material.diffuseTexture8.vScale=10
// 看起来是必须来4个，尽管第四个压根就显示不出来
material.mixTexture3=new BABYLON.Texture('http://127.0.0.1:8080/source/image/f11.png',scene)
material.diffuseTexture9=new BABYLON.Texture('http://127.0.0.1:8080/source/image/crate.png')
material.diffuseTexture10=new BABYLON.Texture('http://127.0.0.1:8080/source/image/crate.png')
material.diffuseTexture11=new BABYLON.Texture('http://127.0.0.1:8080/source/image/crate.png')
material.diffuseTexture12=new BABYLON.Texture('http://127.0.0.1:8080/source/image/crate.png')
material.diffuseTexture9.uScale=material.diffuseTexture9.vScale=10
material.diffuseTexture10.uScale=material.diffuseTexture10.vScale=10
material.diffuseTexture11.uScale=material.diffuseTexture11.vScale=10
material.diffuseTexture12.uScale=material.diffuseTexture12.vScale=10
let ground=BABYLON.Mesh.CreateGroundFromHeightMap('ground','http://127.0.0.1:8080/source/image/f10.png',100,100,100,0,10,scene,false)
ground.position.y=-2
ground.material=material
return scene
}
window.initFunction=async function(){
let asyncEngineCreation=async function(){
try{
return createDefaultEngine()
}catch(e){
return createDefaultEngine()
}
}
window.engine=await asyncEngineCreation()
if(!engine){
throw('engine should not be null')
}
window.scene=createScene()
}
initFunction().then(()=>{
scene.then((returnedScene)=>{
sceneToRender=returnedScene
})
engine.runRenderLoop(function(){
if(sceneToRender&&sceneToRender.activeCamera){
sceneToRender.render()
}
})
})
window.addEventListener('resize',function(){
engine.resize()
})
</script>
</body>
</html>
网友评论