文档章节

three.js 地形纹理混合

李勇2
 李勇2
发布于 2015/03/02 09:38
字数 509
阅读 55
收藏 0
地形生成通常使用高度图, 而高度图的生成可以使用绘图工具,或者通过分形算法生成,例如square-diamond,  fbm方法。
这里采用简单求平均值+随机波动的方法。




对于一个2^n+1  *  2^n+1 的网格, 中心点的高度是四角点的平均值加随机偏移, 边上中点的高度值是边两端点的平均值加随机偏移。
接着将偏移的幅度缩小, 计算四个较小方块的顶点的高度值。
这样随机生成了高度。


接着构造地形, 地形分割成2^n * 2^n 块, 这样顶点就有 2^n+1  *  2^n+1 个 
    var geo = new THREE.PlaneGeometry(3, 3, WIDTH-1, HEIGHT-1);


上面生成了每个顶点的高度, 需要将高度值传入shader中, 可以直接修改geo中的所有顶点的z值,来修改高度。


我们可以根据地形的高度来混合纹理,例如比较高的位置为石块, 而低洼处为草地, 这个纹理的混合。
c2 = mix(c0, c1, (height-minHeight)/(maxHeight-minHeight))
c0是第一张纹理获取的颜色, c1是第二张纹理获取的颜色, 而minHeight maxHeight 是整个地形高度的方位, height是当前高度。
c2 就是混合后的颜色。
shader如下,两张纹理, 顶点在平面坐标中的位置, 
纹理坐标采用顶点的x, y 坐标的小数部分。
    uniform sampler2D texture_grass;
    uniform sampler2D texture_rock;
    uniform float maxHeight;
    uniform float minHeight;
    varying vec3 pos;




void main( void ) {
        vec2 uv0;
        
        uv0.x = fract(pos.x);
        uv0.y = fract(pos.y);
        
        vec4 c0 = texture2D(texture_grass, uv2);
        vec4 c1 = texture2D(texture_rock, uv2);




        vec4 c2 = mix(c0, c1, (pos.z-minHeight)/(maxHeight-minHeight));


        gl_FragColor = c2;
     

}








而材质:
    var pmat = new THREE.ShaderMaterial({
        uniforms:{
            texture_grass:{type:'t', value:0, texture:THREE.ImageUtils.loadTexture("grassa512.bmp")},
            texture_rock:{type:'t', value:1, texture:THREE.ImageUtils.loadTexture("dirt512.bmp")},
      
            maxHeight:{type:'f', value:0},
            minHeight:{type:'f', value:1},
        },
        attributes:{
        },
        vertexShader: document.getElementById("vert").textContent,
        fragmentShader: document.getElementById("frag").textContent,
        //wireframe:true,
    
    });




其中纹理的值 0, 1 表示GPU内部的纹理编号, 这个数量受硬件限制。


顶点shader


    varying vec3 pos;
void main( void ) {


        pos = position.xyz;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position.xyz, 1);

}























本文转载自:http://blog.csdn.net/liyong748/article/details/7989547

共有 人打赏支持
李勇2

李勇2

粉丝 46
博文 189
码字总数 62209
作品 0
广州
程序员
私信 提问
three.js(五) 地形纹理混合

地形生成通常使用高度图, 而高度图的生成可以使用绘图工具,或者通过分形算法生成,例如square-diamond, fbm方法。 这里采用简单求平均值+随机波动的方法。 对于一个2^n+1 2^n+1 的网格, ...

李勇2
2012/09/18
0
0
大地形的优化

D3D之大地形的优化 先放图吧。介绍一下: 1024*1024格子,二百万面,带实时的九层地表纹理混合及法线运算。全网格没有用LOD。 网格查看: 在游戏中,大场景地形往往是一个效率的瓶颈。在这方...

长平狐
2013/03/19
45
0
大地形的优化

D3D之大地形的优化 先放图吧。介绍一下: 1024*1024格子,二百万面,带实时的九层地表纹理混合及法线运算。全网格没有用LOD。 网格查看: 在游戏中,大场景地形往往是一个效率的瓶颈。在这方...

长平狐
2012/11/19
69
0
[OpenGL] 利用Shader实现复杂地形的渲染

已经好久没写关于OpenGL的博客了。不过昨天晚上,和我一个可爱的小学弟做了一个娱乐程序,也正好用来写一篇博客。 我们在游戏中经常能见到一座高耸的山,雪线以上是白皑皑的积雪,雪线以下是...

Mahabharata_
2017/10/07
0
0
tengge1/ShadowEditor

Shadow Editor 名称:Shadow Editor 版本:v0.0.8(开发中) 说明:基于的场景编辑器。 源码:https://github.com/tengge1/ShadowEditor 示例:https://github.com/tengge1/ShadowEditor-exa......

tengge1
10/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Kubernetes里的secret最基本的用法

Secret解决了密码、token、密钥等敏感数据的配置问题,使用Secret可以避免把这些敏感数据以明文的形式暴露到镜像或者Pod Spec中。 Secret可以以Volume或者环境变量的方式使用。 使用如下命令...

JerryWang_SAP
昨天
1
0
可重入锁和非可重入锁

广义上的可重入锁指的是可重复可递归调用的锁,在外层使用锁之后,在内层仍然可以使用,并且不发生死锁(前提得是同一个对象或者class),这样的锁就叫做可重入锁。 可重入锁: ReentrantLoc...

狼王黄师傅
昨天
1
0
2018-11-20学习笔记

1. python数据类型: 给变量赋值什么样的值,变量就是什么样的类型 给变量赋值整数,变量就是整数类型 给变量赋值字符串,变量就是字符串类型 123 和“123”一样吗? 在python中 单引号 与双...

laoba
昨天
1
0
使用 React 和 Vue 创建相同的应用,他们有什么差异?

在工作中应用 Vue 之后,我对它有了相当深刻的理解。 不过,俗话说「外国的月亮比较圆」,我好奇「外国的」 React 是怎么样的。 我阅读了 React 文档并观看了一些教程视频,虽然它们很棒,但...

阿K1225
昨天
2
0
2天闭门培训|以太坊智能合约从入门到实战(北京)

2天培训 16个课时 探寻技术原理,精通以太坊智能合约开发 以太坊智能合约是现在应用的最广泛的区块链应用开发方式,HiBlock区块链社区针对以太坊智能合约的学习特别推出2天闭门研修班,通过2...

HiBlock
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部