专栏首页郭先生的博客three.js 着色器材质内置变量

three.js 着色器材质内置变量

这篇郭先生说一下three.js着色器的内置变量,他们有

  1. gl_PointSize:在点渲染模式中,控制方形点区域渲染像素大小(注意这里是像素大小,而不是three.js单位,因此在移动相机是,所看到该点在屏幕中的大小不变)
  2. gl_Position:控制顶点选完的位置
  3. gl_FragColor:片元的RGB颜色值
  4. gl_FragCoord:片元的坐标,同样是以像素为单位
  5. 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);

好了这篇就说到这了,再见。

转载请注明地址:郭先生的博客

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • three.js 着色器材质之变量(一)

    上一篇说顶点着色器和片元着色器的皮毛,这篇郭先生说一说着色器变量,通过变量可以设置材质。先看看今天要做的如下图。在线案例请点击红绿灯。

    郭先生的博客
  • three.js 着色器材质之变量(二)

    上一篇郭先生在例子中用到了着色器变量中的uniform和varying。这节继续结合例子将一下attribute变量,在使用过程中也发现由于three.js的版...

    郭先生的博客
  • three.js 着色器材质之变量(三)

    这篇郭先生在练习一下着色器变量,在度娘上面或者官网上经常看到类似水波一样的效果,这篇就试着做一个这样的效果,顺便巩固一下顶点着色器和片元着色器,毕竟多多练习才能...

    郭先生的博客
  • three.js 着色器材质之glsl内置函数

    郭先生发现在开始学习three.js着色器材质时,我们经常会无从下手,辛苦写下的着色器,也会因莫名的报错而手足无措。原因是着色器材质它涉及到另一种语言--GLS...

    郭先生的博客
  • three.js 着色器材质之初识着色器

    说起three.js,着色器材质总是绕不过的话题,今天郭先生就说一说什么是着色器材质。着色器材质是很需要灵感和数学知识的,可以用简短的代码和绘制出十分丰富的图像...

    郭先生的博客
  • three.js 着色器材质之纹理

    今天郭先生说一说如何在three.js着色器中添加纹理,先看看今天要完成的效果,在线案例请点击着色器纹理。

    郭先生的博客
  • 解剖 WebGL & Three.js 工作原理

    本文主要通过两方面来解剖 WebGL & Three.js :WebGL背后的工作原理和以Three.js为例,讲述框架在背后扮演什么样的角色,希望对大家学习有...

    万技师
  • Three.js - 走进3D的奇妙世界

    随着人们对用户体验越来越重视,Web开发已经不满足于2D效果的实现,而把目标放到了更加炫酷的3D效果上。Three.js是用于实现web端3D效果的JS库,它的...

    宜信技术学院
  • Three.js - 走进3D的奇妙世界

    随着人们对用户体验越来越重视,Web开发已经不满足于2D效果的实现,而把目标放到了更加炫酷的3D效果上。Three.js是用于实现web端3D效果的JS库,它的...

    用户7118204
  • three.js 粒子效果(分别基于 CPU & GPU 实现)

    前段时间做了一个基于 CPU 和 GPU 对比的粒子效果丢在学习 WebGL 的 RTX 群里,技术上没有多作讲解,有同学反馈看不太懂 GPU 版本,干脆开一篇...

    万技师
  • 用Three.js建模

    在Three.js中,一个可见的物体是由几何体和材料构成的。在这个教程中,我们将学习如何从头开始创建新的网格几何体,研究Three.js为处理几何对象和材质所提...

    用户5687508
  • three.js 材质

    今天郭先生说一说three.js的材质。材质描述了对象objects的外观。它们的定义方式与渲染器无关, 因此,如果您决定使用不同的渲染器,不必重写材质。

    郭先生的博客
  • WebGL 概念和基础入门

    本文首发于政采云前端团队博客:WebGL 概念和基础入门 https://www.zoo.team/article/webglabout

    政采云前端团队
  • 用 Three.js 画个 3D 生日蛋糕送给他(她)

    作为整天和 UI 打交道的前端工程师,是否想在他(她)生日的时候用代码送上一份惊喜呢?

    lingxiaoguang
  • 十分钟快速实战Three.js

    本文不会对Three.js几何体、材质、相机、模型、光源等概念详细讲解,会首先分成几个模块给大家快速演示一盒小案例。大家可以根据这几个模块快速了解Three.j...

    Vam的金豆之路
  • Three.js入门

    Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。Th...

    李海彬
  • three.js 新手指南

    在这个分步指南中,我们将使用一个基于 WebGL 的 3D 图形的框架 three.js, 创建一个 3D 版本的 Treehouse 徽标。你可以通过点击或者...

    疯狂的技术宅
  • 你的登录界面不够花里胡哨,3D 版本的来了

    今天分享一篇用three.js 做的登录网站,里面还用到了粒子特效,一个字就是酷炫?

    程序IT圈
  • Three.js教程(7):材质

    之前说过网格(Mesh) = 几何体(Geometry) + 材质(Material),也就是一个物体是有它的形状和材质来决定。几何体(Geometry)类似于...

    kai666666

扫码关注云+社区

领取腾讯云代金券