[原]three.js 地形纹理混合
这里采用简单求平均值+随机波动的方法。
对于一个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);
}
转载于:https://www.cnblogs.com/liyonghelpme/archive/2012/09/17/4273567.html
[原]three.js 地形纹理混合相关推荐
- three.js(五) 地形纹理混合
2019独角兽企业重金招聘Python工程师标准>>> 地形生成通常使用高度图, 而高度图的生成可以使用绘图工具,或者通过分形算法生成,例如square-diamond, fbm方 ...
- 【浅墨Unity3D Shader编程】之三 光之城堡篇:子着色器、通道与标签的写法 amp; 纹理混合...
本系列文章由@浅墨_毛星云 出品,转载请注明出处. 文章链接: http://hpw123.net/a/C__/kongzhitaichengxu/2014/1117/120.html 作者:毛星 ...
- 地形纹理Splatting技术(翻译)
文章来源:http://www.gamedev.net/reference/articles/article2238.asp Texture Splatting in Direct3D Introdu ...
- 如何自制地形纹理贴图
介于目前部分WE玩家不知道怎样修改地形纹理,今日发表此贴,本教材部分内容为翻译,并加入本人尽可能详尽的讲解,希望对地形区的玩家们有所帮助,本人正在研究如何自制悬崖贴图的问题,此教材意在抛砖引玉,望高人 ...
- 【Unity3D Shader编程】之三 光之城堡篇:子着色器、通道与标签的写法 纹理混合
本系列文章由@浅墨_毛星云 出品,转载请注明出处. 文章链接: http://blog.csdn.net/poem_qianmo/article/details/41175585 作者:毛星云(浅墨) ...
- C++ Opengl纹理混合源码
C++ Opengl纹理混合源码 项目开发环境 项目功能 项目演示 项目源码传送门 项目开发环境 开发语言:C++和IDE:VS2017,操作系统Windows版本windows SDK8.1,三方库 ...
- 这是用原声js编写的地址选择器,使用select编写的三联选择器
这是用原声js编写的地址选择器,使用select编写的三联选择器 <!DOCTYPE html> <html lang="en"> <head> ...
- Vue.js 2.0 混合
Vue.js 2.0 混合基础 混合是一种灵活的分布式复用 Vue 组件的方式.混合对象可以包含任意组件选项.以组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项. 例子: // 定义一个 ...
- 中英文混合html加密,JS实现中英文混合文字溢出友好截取功能
JS实现中英文混合文字溢出友好截取功能 发布时间:2020-08-28 18:21:10 来源:脚本之家 阅读:73 作者:抖音 在显示字符串的时候,避免字符串过长往往会对字符串进行截取操作,通常会用 ...
最新文章
- python统计linux流量,通过Python进行MySQL表信息统计
- 使用 IntraWeb (8) - 系统模板
- CTFshow php特性 web133
- python standard lib_跟Python Standard Library混个脸熟(一)
- Ubuntu输入ifconfig找不到IP地址,只有lo问题
- 获取少女资源.html,战舰少女资源怎么得 资源来源汇总
- svo: semi-direct visual odometry 论文解析
- 记录——《C Primer Plus (第五版)》第十章编程练习第一题
- 【MySQL】浅谈一致性读
- java 改像素不改尺寸_如何不改变分辨率的情况下缩小尺寸PNG图片
- HttpClient4.X发送Get请求的url参数拼接
- Windows conda ImportError: DLL load failed while importing shell
- 教你年入100万,互联网赚钱三板斧!
- java nifty_java-jMonkey和Nifty中的线程?
- amCharts之柱形图
- My dear dalao please daidai wo。
- Error:scalac: Scala compiler JARs not found
- Nature:为什么免疫系统可产生多样性抗体和T细胞受体?
- 别踩白块儿 开源免费(C++)
- 新电脑配置显卡驱动及CUDA、CUDNN环境
热门文章
- php网课资源百度云盘_安全中国PHP网站开发工程师就业指导班 35课 附课件、源码,全套视频教程学习资料通过百度云网盘下载...
- centos运行jar包需要的环境_Centos7服务器下启动jar包项目的最佳方法
- jedis操作set_在Java中使用jedis操作Set类型
- nginx在linux下安装,Nginx在linux下安装及简单命令
- kangle php集成环境包,PHP探针-UPUPW环境集成包KANGLE专用版 | bftxjc.com contacts
- linux 安装php 5.5_Linux下yum升级安装PHP 5.5
- MySQL面试题 | 附答案解析(十一)
- 文章3:车载LIDAR点云数据中杆状地物自动提取与分类
- Python+OpenCV检测灯光亮点
- face-swap.zip百度网盘下载