three.js 着色器材质内置变量
这篇郭先生说一下three.js着色器的内置变量,他们有
- gl_PointSize:在点渲染模式中,控制方形点区域渲染像素大小(注意这里是像素大小,而不是three.js单位,因此在移动相机是,所看到该点在屏幕中的大小不变)
- gl_Position:控制顶点选完的位置
- gl_FragColor:片元的RGB颜色值
- gl_FragCoord:片元的坐标,同样是以像素为单位
- gl_PointCoord:在点渲染模式中,对应方形像素坐标
他们或者单个出现在着色器中,或者组团出现在着色器中,是着色器的灵魂。下面来分别说一说他们的意义和用法。
1. gl_PointSize
gl_PointSize内置变量是一个float类型,在点渲染模式中,顶点由于是一个点,理论上我们并无法看到,所以他是以一个正对着相机的正方形面表现的。使用内置变量gl_PointSize主要是用来设置顶点渲染出来的正方形面的相素大小(默认值是0)。
void main() {
gl_PointSize = 10.0;
}
2. gl_Position
gl_Position内置变量是一个vec4类型,它表示最终传入片元着色器片元化要使用的顶点位置坐标。vec4(x,y,z,1.0),前三个参数表示顶点的xyz坐标值,第四个参数是浮点数1.0。
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
3. gl_FragColor
gl_FragColor内置变量是vec4类型,主要用来设置片元像素的颜色,它的前三个参数表示片元像素颜色值RGB,第四个参数是片元像素透明度A,1.0表示不透明,0.0表示完全透明。
void main() {
gl_FragColor = vec4(1.0,0.0,0.0,1.0);
}
4. gl_FragCoord
gl_FragCoord内置变量是vec2类型,它表示WebGL在canvas画布上渲染的所有片元或者说像素的坐标,坐标原点是canvas画布的左上角,x轴水平向右,y竖直向下,gl_FragCoord坐标的单位是像素,gl_FragCoord的值是vec2(x,y),通过gl_FragCoord.x、gl_FragCoord.y方式可以分别访问片元坐标的纵横坐标。
201911172044270.png
下面我们举个例子
fragmentShader: `
void main() {
if(gl_FragCoord.x < 600.0) {
gl_FragColor = vec4(1.0,0.0,0.0,1.0);
} else {
gl_FragColor = vec4(1.0,1.0,0.0,1.0);
}
}
`
捕获.PNG
这里以600像素为分界,x值小于600像素的部分,材质被渲染成红色,大于的部分为黄色。
5. gl_PointCoord
gl_PointCoord内置变量也是vec2类型,同样表示像素的坐标,但是与gl_FragCoord不同的是,gl_FragCoord是按照整个canvas算的x值从0,宽度,y值是从0,高度。而gl_PointCoord是在点渲染模式中生效的,而它的范围是对应小正方形面,同样是左上角0,0到右下角1,1。
6. 内置变量练习
五个内置变量我们都大致的说了一遍,下面用一个小案例来试用一下除了gl_FragCoord的其他四个。先上图,在线案例请点击着色器内置变量。
捕获.PNG
var planeGeom = new THREE.PlaneGeometry(1000, 1000, 100, 100);
uniforms = {
time: {
value: 0
}
}
var planeMate = new THREE.ShaderMaterial({
transparent: true,
side: THREE.DoubleSide,
uniforms: uniforms,
vertexShader: `
uniform float time;
void main() {
float y = sin(position.x / 50.0 + time) * 10.0 + sin(position.y / 50.0 + time) * 10.0;
vec3 newPosition = vec3(position.x, position.y, y * 2.0 );
gl_PointSize = (y + 20.0) / 4.0;
gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
}
`,
fragmentShader: `
void main() {
float r = distance(gl_PointCoord, vec2(0.5, 0.5));
if(r < 0.5) {
gl_FragColor = vec4(0.0,1.0,1.0,1.0);
}
}
`
})
var planeMesh = new THREE.Points(planeGeom, planeMate);
planeMesh.rotation.x = - Math.PI / 2;
scene.add(planeMesh);
好了这篇就说到这了,再见。
转载请注明地址:郭先生的博客
- datetimerangepicker配置及默认时间段展示
- EJS[1]-源码解析
- express项目创建步骤
- P2261 [CQOI2007]余数求和
- jquery animate动画持续运动
- 项目结构——JavaScript版本的2048实现[0]
- P3717 [AHOI2017初中组]cover
- P3742 umi的函数
- Tarjan中栈的分析与SLT栈的实现
- P2341 [HAOI2006]受欢迎的牛
- P2746 [USACO5.3]校园网Network of Schools
- P3369 【模板】普通平衡树(Treap/SBT)
- iview给radio按钮组件加点击事件
- P3391 文艺平衡树
- 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 数组属性和方法
- CentOS7 安装 PostgreSQL11的方法步骤
- Linux中FTP服务器的搭建教程
- ubuntu下编译安装opencv的方法
- CentOS7如何执行PHP定时任务详解
- linux中ssh免密通信的实现
- Linux 启动停止SpringBoot jar 程序部署Shell 脚本的方法
- linux下安装boost库的完整步骤记录
- Linux下使用killall命令终止进程的8大用法实例详解
- 关于AIX挂载NFS写入效率低效的解决方法
- Linux查看进程的所有信息的方法示例
- 新版VPS主机管理面板WDCP安装及使用体验-国产简单易用型VPS面板
- linux中普通用户的定时任务详解
- 详解在Linux中清空或删除大文件内容的5种方法
- 教你一招实现Linux中的文本比对
- 怎么禁用 Ubuntu 服务器中终端欢迎消息中的广告