文档章节

three.js(五) 地形纹理混合

liyong2
 liyong2
发布于 2012/09/18 10:49
字数 510
阅读 280
收藏 1

地形生成通常使用高度图, 而高度图的生成可以使用绘图工具,或者通过分形算法生成,例如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);

}






















© 著作权归作者所有

liyong2

liyong2

粉丝 51
博文 196
码字总数 64732
作品 0
广州
程序员
私信 提问
大地形的优化

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

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

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

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

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

Mahabharata_
2017/10/07
0
0
Three.js的绘制流程(三)----地形

最简单的地形是单一的平面, 这个通过 var geo = new THREE.PlaneGeometry(2, 2, 256, 256) 几何体构建, 可以设定平面的切分块的数量。 var pmesh = new THREE.Mesh(geo, material); 可以为...

李勇2
2012/09/18
200
0
tengge1/ShadowEditor

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

tengge1
2018/10/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

面试官,Java8 JVM内存结构变了,永久代到元空间

在文章《JVM之内存结构详解》中我们描述了Java7以前的JVM内存结构,但在Java8和以后版本中JVM的内存结构慢慢发生了变化。作为面试官如果你还不知道,那么面试过程中是不是有些露怯?作为面试...

程序新视界
4分钟前
5
0
读书笔记:深入理解ES6 (八)

第八章 迭代器(Iterator)与生成器(Generator) 第1节 循环语句的问题   在循环、多重循环中,通过变量来跟踪数组索引的行为容易导致程序出错。迭代器的出现旨在消除这种复杂性,并减少循...

张森ZS
5分钟前
2
0
Elasticsearch 实战(一) - 简介

官腔 Elasticsearch,分布式,高性能,高可用,可伸缩的搜索和分析系统 基本等于没说,咱们慢慢看 1 概述 百度:我们比如说想找寻任何的信息的时候,就会上百度去搜索一下,比如说找一部自己喜...

JavaEdge
9分钟前
3
0
【jQuery基础学习】11 jQuery性能简单优化

本文转载于:专业的前端网站➦【jQuery基础学习】11 jQuery性能简单优化 关于性能优化 合适的选择器 $("#id")会直接调用底层方法,所以这是最快的。如果这样不能直接找到,也可以用find方法继...

前端老手
18分钟前
4
0
重磅发布 | 全球首个云原生应用标准定义与架构模型 OAM 正式开源

导读:2019 年 10 月 17 日,阿里巴巴合伙人、阿里云智能基础产品事业部总经理蒋江伟(花名:小邪)在 Qcon 上海重磅宣布,阿里云与微软联合推出开放应用模型 Open Application Model (OAM...

阿里云官方博客
21分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部