three.js 着色器材质之变量(三)
时间:2022-07-24
本文章向大家介绍three.js 着色器材质之变量(三),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
这篇郭先生在练习一下着色器变量,在度娘上面或者官网上经常看到类似水波一样的效果,这篇就试着做一个这样的效果,顺便巩固一下顶点着色器和片元着色器,毕竟多多练习才能更好地掌握。效果如下图,在线案例请点击变色球。
捕57获.PNG
1. 设置几何体
设置一个几何体,对于波浪效果,我们制作一个球几何体(当然也可以设置其他的,可能有意想不到的效果哦!)。
var sphere = new THREE.SphereBufferGeometry(10, 120, 80);
2. 设置attribute属性
这里我们使用一个叫做noise的attribute属性来搞定它,同时我们在设置一个类型化数组boolArray来辅助它。
count = sphere.attributes.position.count;//顶点的数量
verticesArray = new Float32Array(count);//存放每一个点的噪声值
boolArray = new Float32Array(count);//辅助类型数组
for(var v = 0; v < count; v++) {
verticesArray[v] = Math.random() * 2 + 10;//随机数[10,12)
if(Math.random() >= 0.5) {//在创造一个随机数,如果大于如果大于0.5,boolArray设置成10.5,boolArray设置成1。如果小于0.5,boolArray设置成-1
boolArray[v] = 1;
} else {
boolArray[v] = -1;
}
}
var bufferAttribute = new THREE.BufferAttribute(verticesArray, 1);
sphere.setAttribute('noise', bufferAttribute);
3. 设置着色器材质
var material = new THREE.ShaderMaterial({
vertexShader: `
attribute float noise;//着色器中定义noise属性
varying vec3 vNormal;//定义两个varying属性,用于将顶点着色器中的属性传到片元着色器中
varying vec3 vPosition;
void main() {
vNormal = normal;
vPosition = position;
vec3 newPosition = position + normal * noise;//这里比较重要,顶点坐标加上球面法向量乘以噪声,得到新的顶点坐标,新的坐标是和normal方向相同的。
gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
}
`,
fragmentShader: `
varying vec3 vPosition;
varying vec3 vNormal;
void main() {
vec3 nml = (vNormal + 1.0) / 2.0;//这个使用了顶点坐标的法向量
vec3 cy = vec3((sin(vPosition.y * 3.0) + 1.0) / 2.0);//这个使用了顶点坐标
gl_FragColor=vec4(cy * nml, 1.0);//将两种效果结合起来(上面两种颜色你们不妨可以单个试一试哦)
}
`
});
4. 设置动态效果
上一篇我们使用了uniform传递了一个time值,这次我们另辟蹊径,在render方法中改变attribute属性。
for(var v = 0; v < count; v++) {
if(verticesArray[v] < 10) {//如果噪声小于10,就将对应的boolArray变成1,然后累加
boolArray[v] = 1;
verticesArray[v] += 0.05;
} else if(verticesArray[v] > 12) {//如果噪声大于12,就将对应的boolArray变成-1,然后累减
boolArray[v] = -1;
verticesArray[v] -= 0.05;
} else if(boolArray[v] == 1) {//如果boolArray等于1,就继续累加
verticesArray[v] += 0.05;
} else {//如果boolArray等于-1,就继续累减
verticesArray[v] -= 0.05;
}
}
var bufferAttribute = new THREE.BufferAttribute(verticesArray, 1);
//更新noise属性值
mesh.geometry.setAttribute('noise', bufferAttribute);
这样就做成了案例上面的效果,是不是很有意思,我们可以做各种效果,说不上有心仪的效果。
转载请注明地址:郭先生的博客
- 预警揭秘:倒计时炸弹11.2.0.4前版本DB Link必须在2019年4月升级真相
- RPO攻击技术浅析
- 渗透技巧 | Windows上传并执行恶意代码的N种姿势
- 如何通过Cloudera Manager配置Spark1和Spark2的运行环境
- 从CPU漏洞Meltdown&Spectre看侧信道攻击
- 如何使用Java连接Kerberos的Kafka
- 隐藏在Chrome插件商店中的恶魔——恶意插件User-Agent Swither分析
- 如何使用CDSW在CDH中分布式运行所有R代码
- 如何在CDH中使用HBase快照
- 中间件安全-Tomcat安全测试概要
- 如何在CDH集群使用HDFS快照
- Sentry赋予server1权限给hive以外用户时ACL不同步问题分析
- 如何使用Java连接Kerberos的HBase
- 香香的xss小记录(一)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python 爬虫篇-爬取web页面所有可用的链接实战演示,展示网页里所有可跳转的链接地址
- Python爬虫,微信公众号话题标签内容采集打印PDF输出
- Windows 技术篇-设置dns提升网速,刷新dns缓存
- 搭建高可用的Replication集群归档大量的冷数据
- Python 技术篇-文件操控:文件的移动和复制
- Python发邮件脚本,Python调用163邮箱SMTP服务实现邮件群发
- 为PXC集群引入Mycat并构建完整的高可用集群架构
- Python3 字典
- 安装Percona Server数据库(in CentOS 8)
- Python 基础篇-正斜杠("/")和反斜杠("")的用法
- 在CentOS8下搭建PXC集群
- Python 基础篇-相对路径、绝对路径的写法
- Python3 元组
- 关于MySQL的基准测试
- Python 技术篇-操作excel,对excel进行读取和写入