专栏首页郭先生的博客three.js 着色器材质之初识着色器

three.js 着色器材质之初识着色器

说起three.js,着色器材质总是绕不过的话题,今天郭先生就说一说什么是着色器材质。着色器材质是很需要灵感和数学知识的,可以用简短的代码和绘制出十分丰富的图像,可以说着色器材质是脱离three.js的另一块知识,因此它十分难讲,我们只能在一个一个案例中逐渐掌握着色器语言的使用技巧。

1. 什么是着色器材质

着色器材质(ShaderMaterial)是一个用GLSL编写的小程序 ,在GPU上运行。它能够提供 materials 之外的效果,也可以将许多对象组合成单个Geometry或BufferGeometry以提高性能。

2. 着色器材质的变量

每个着色器材质都可以指定两种不同类型的shaders,他们是顶点着色器和片元着色器(Vertex shaders and fragment shaders)。

  • 顶点着色器首先运行; 它接收attributes, 计算/操纵每个单独顶点的位置,并将其他数据(varyings)传递给片元着色器。
  • 片元(或像素)着色器后运行; 它设置渲染到屏幕的每个单独的“片元”(像素)的颜色。

shader中有三种类型的变量: uniforms, attributes, 和 varyings

  • Uniforms是所有顶点都具有相同的值的变量。 比如灯光,雾,和阴影贴图就是被储存在uniforms中的数据。 uniforms可以通过顶点着色器和片元着色器来访问。
  • Attributes 与每个顶点关联的变量。例如,顶点位置,法线和顶点颜色都是存储在attributes中的数据。attributes 只 可以在顶点着色器中访问。
  • Varyings 是从顶点着色器传递到片元着色器的变量。对于每一个片元,每一个varying的值将是相邻顶点值的平滑插值。

注意:在shader 内部,uniforms和attributes就像常量;你只能使用JavaScript代码通过缓冲区来修改它们的值。

3. 着色器材质的使用

上面说了每个着色器材质都可以指定两种不同类型的shaders,不过如果我们不去指定这两个shaders而直接使用也不会报错,因为ShaderMaterial已经定义了默认的顶点着色器和片元着色器,他们的代码是这样的。

//顶点着色器代码
void main() {
	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
//片元着色器代码
void main() {
	gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
}

这里的projectionMatrix、modelViewMatrix和position都是three为我们设置好的变量,可以直接拿来用,前两个变量我们之前已经说了,而position就是每一个顶点的坐标值,当着色器代码执行时,会循环执行gl_Position和gl_FragColor设置顶点位置,和颜色插值。并且我们最终要设置的就是gl_Position和gl_FragColor。多的先不说,下面看一个小例子

var geom = new THREE.SphereGeometry(10, 30, 20);
var mate = new THREE.ShaderMaterial({
    vertexShader: `
    varying vec3 vNormal;
    void main() {
				//将attributes的normal通过varying赋值给了向量vNormal
        vNormal = normal;
				//projectionMatrix是投影变换矩阵 modelViewMatrix是相机坐标系的变换矩阵 最后我们将y值乘以1.4得到了一个形如鸡蛋的几何体
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position.x, position.y * 1.4, position.z, 1.0 );
    }
    `,
    fragmentShader: `
		//片元着色器同样需要定义varying vec3 vNormal;
    varying vec3 vNormal;
    void main() {
				//vNormal是一个已经归一化的三维向量
        float pr = (vNormal.x + 1.0) / 2.0; //pr红色通道值范围为0~1
        float pg = (vNormal.y + 1.0) / 2.0; //pg绿色通道值范围为0~1
        float pb = (vNormal.z + 1.0) / 2.0; //pb蓝色通道值范围为0~1
        gl_FragColor=vec4(pr, pg, pb, 1.0); //最后设置顶点颜色,点与点之间会自动插值
    }
    `
})
var mesh = new THREE.Mesh(geom, mate);
scene.add(mesh)

这篇我们简单的操作顶点着色器和片元着色器绘制了一个五彩的鸡蛋,但是这还仅仅是一个静态的着色器,下一篇我们让着色器材质动起来。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • three.js 着色器材质之纹理

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

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

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

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

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

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

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

    郭先生的博客
  • three.js 着色器材质内置变量

    他们或者单个出现在着色器中,或者组团出现在着色器中,是着色器的灵魂。下面来分别说一说他们的意义和用法。

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

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

    郭先生的博客
  • PixelBender(着色器)初体验

    只要是玩过photoshop的人,一定会对ps中的各式各样、功能强大的滤镜(filter)留下深刻的印象。 Adobe是靠图形处理软件起家的,这方面一直是它的强...

    菩提树下的杨过
  • 解剖 WebGL & Three.js 工作原理

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

    万技师
  • WebGL 概念和基础入门

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

    政采云前端团队
  • three.js 粒子效果(分别基于 CPU & GPU 实现)

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

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

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

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

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

    用户7118204
  • 你的登录界面不够花里胡哨,3D 版本的来了

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

    程序IT圈
  • three.js 材质

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

    郭先生的博客
  • 用Three.js建模

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

    用户5687508
  • Three.js的入门案例(上)

    在Three.js的赋能下,WEB网页效果逐渐丰富起来,今天我们就来运用之前学习的Three.js基础知识,实现一个旋转的几何体-球体。

    前端达人
  • three.js 新手指南

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

    疯狂的技术宅
  • Three.js教程(3):场景

    场景(Scene)相当于是一个容器,可以在它上面添加光线,物体等,最后Three.js把它和相机一起渲染到DOM中。

    kai666666
  • 前端迈进3D时代-Three.js初识

    Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景。 Three.js学习之前,我们需要了解他的三个关键对象: 1. 场景(场...

    Javanx

扫码关注云+社区

领取腾讯云代金券