文档章节

three.js 地形纹理混合

李勇2
 李勇2
发布于 2015/03/02 09:38
字数 509
阅读 53
收藏 0
点赞 0
评论 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

粉丝 45
博文 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
running with rifles ogre 游戏分析

这款游戏的美术风格卡通化,来分析一下主要使用了哪些技术。 1:屏幕空间的ao 2:轮廓线 3:阴影 4:雾气 5:decal纹理 建筑的渲染方式是: 通过两层decal 纹理混合, 顶点色定下基准色调,使...

李勇2
2016/09/10
24
0
Three.js的绘制流程(三)----地形

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

李勇2
2012/09/18
0
0
three.js(八) bump map的生成

bump Map 主要用于增加表面的法向量细节。例如一个平面其法向量处处相同,即使使用了纹理,光照下的表现仍然不够真实。这时可以扰动表面面片的方向量,从而形成比较真实的光照效果。 类似于地...

李勇2
2012/09/18
0
0
THREE.JS blending与opacity冲突问题

在我们的three.js开发中,肯定很喜欢半透明的风格,并且three.js封装的半透明设置也很方便,只需要将material中的transparent设置为true,然后在(0,1)之间调节个人适用的透明度。 但是在实际...

speclial_wind
2017/11/27
0
0
Unity3D 游戏引擎之构建3D游戏世界的基本地形(四)

Unity3D 游戏引擎之构建3D游戏的基本地形 雨松MOMO原创文章如转载,请注明:转载自雨松MOMO的博客原文地址:http://blog.csdn.net/xys289187120/article/details/6887687 创建一个3D地形 在上...

彭博
2012/03/09
459
0
编辑器 Unity3D笔记(一)

界面: MenuBar: File:Ctrl+N、Ctrl+O、Ctrl+S、Ctrl+Shift+S、Ctrl+Shift+B、Ctrl+B;Untity自带资源包;发布窗口?;单词(Render渲染、Component组件、Terrain地形、Scene场景、Duplica...

周志超
2014/07/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

CoreText进阶(七)-添加自定义View和对其

CoreText进阶(七)-添加自定义View和对其 其它文章: CoreText 入门(一)-文本绘制 CoreText入门(二)-绘制图片 CoreText进阶(三)-事件处理 CoreText进阶(四)-文字行数限制和显示更多...

aron1992
16分钟前
0
0
Python爬虫 爬取百合网的女人们和男人们

学Python也有段时间了,目前学到了Python的类。个人感觉Python的类不应称之为类,而应称之为数据类型,只是数据类型而已!只是数据类型而已!只是数据类型而已!重要的事情说三篇。 据书上说...

p柯西
28分钟前
0
0
在Java中,你真的会日期转换吗

1.什么是SimpleDateFormat 在java doc对SimpleDateFormat的解释如下: SimpleDateFormatis a concrete class for formatting and parsing dates in a locale-sensitive manner. It allows fo......

Java小铺
36分钟前
0
0
Linux系统梳理---系统搭建(二):tomcat的安装和使用

上一章讲到JDK的安装使用,这一章主要记录下服务器tomcat的安装以及部署一个项目. 1.下载tomcat,这里下载的是apache-tomcat-8.5.32.tar.gz 2.创建文件夹,便于管理,和JDK一样,在usr目录下创建t...

勤奋的蚂蚁
47分钟前
0
0
ES15-聚合

1.Terms Aggregation 分组聚合 2.Filter Aggregation 过滤聚合

贾峰uk
48分钟前
0
0
【2018.07.19学习笔记】【linux高级知识 20.27-20.30】

20.27 分发系统介绍 20.28 expect脚本远程登录 20.29 expect脚本远程执行命令 20.30 expect脚本传递参数

lgsxp
51分钟前
0
0
10.32/10.33 rsync通过服务同步~10.35 screen工具

通过服务的方式同步要编辑配置文件:[root@linux-xl ~]# vim /etc/rsyncd.confport=873log file=/var/log/rsync.logpid file=/var/run/rsyncd.pidaddress=192.168.43.21[tes...

洗香香
54分钟前
0
0
与女儿谈商业模式 (3):沃尔玛的成功模式

分类:与女儿谈商业模式 | 标签: 经济学 沃尔玛 陈志武 2007-05-10 09:09阅读(11279)评论(30) 与女儿谈商业模式 (3):沃尔玛的成功模式 陈志武 /文 沃尔玛(Wal-Mart)是另一个有意思的财...

祖冲之
今天
0
0
网页加载速度优化方法总结

1、减少请求 最大的性能漏洞就是一个页面需要发起几十个网络请求来获取诸如样式表、脚本或者图片这样的资源,这个在相对低带宽和高延迟的移动设备连接上来说影响更严重。 2、整合资源 对开发...

Jack088
今天
0
0
dubbo学习

https://blog.csdn.net/houshaolin/article/details/76408399

喵五郎
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部