简单了解three.js 着色器材质

2024-12-24 21:23:21

说起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)

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

以上就是简单了解three.js 着色器材质的详细内容，更多关于three.js 着色器材质的资料请关注我们其它相关文章！

three.js 将图片马赛克化的示例代码

这篇郭先生来说说BufferGeometry,类型化数组和粒子系统的使用,并且让图片有马赛克效果(同理可以让不清晰的图片清晰化),如图所示 1. 解析图片解析图片和上一篇一样 initCanvas() { canvas = document.createElement('canvas'); content = canvas.getContext('2d'); canvas.width = 1600; canvas.height = 1200; img = new Image(); img.cr
Vue使用Three.js加载glTF模型的方法详解

前言 Three.js是一个跨浏览器的脚本,使用JavaScript函数库或API来在网页浏览器中创建和展示动画的三维计算机图形,基于WebGL实现,对WebGL进行了进一步的封装,简化了多数复杂的接口. Three.js支持包括 .obj..gltf等类型的模型结构.glTF(GL传输格式)是Khronos的一个开放项目,它为3D资产提供了一种通用的.可扩展的格式,这种格式既高效又与现代web技术高度互操作. obj格式的模型只支持顶点.法线.纹理坐标和基本材质,而glTF模型除上述所有内容外
THREE.JS入门教程(2)着色器-上

译序 Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU,在浏览器端实现真正意义的3D.但是目前这项技术还处在发展阶段,资料极为匮乏,爱好者学习基本要通过Demo源码和Three.js本身的源码来学习. 0.简介之前我已经给出了一篇<开始使用Three.js>.如果你还没有读过,你可能需要去读一下,本文的基础是在那一篇教程的基础上完成的. 我想讨论一下着色器.在Three.js帮助你免去了很多麻烦之前,原生WebGL就很优秀了.有的时候,你也许会想要完
浅谈Three.js截图并下载的大坑

最近做有关three.js的动画,想通过截图然后在新的页面打开截图,并且想把图片下载到本地,连环坑很ok:ok_hand:嗯.这个必须要记下来! 先来看看普通页面的截图一开始看到这个,完全没思路,普通的html标签要怎么才能变成一张图???,其实嘞,目前的截图方案都并不是我们理解的那种截图,不管是使用canvas还是svg,其实都是做了转化,但是这两种方法都不在这详细描述了,有兴趣的可以看看这篇,说的很详细了(canvas VS svg 截图),然鹅,肯定是有工具的啦,那就是git上开源的 h
three.js 如何制作魔方

因为之前的几节讲了一些数学方法,例如Vector3.Matrix4.Euler还有Quaternion的知识.所以这篇郭先生就来说说用three.js怎么制作一个魔方. 制作魔方主要运用坐标变换的知识,制作魔方的方法有很多,建议你先在大脑中构思,然后试着做一做,下面我将一种比较简单的方法. 制作出魔方各个方块的位置坐标(27个)的数组,然后制作出魔方各个面的材质(6个) 根据坐标和材质制作魔方的方块,并添加到一个组group 制作一个标志被选面的几何体(我是用球体),然后隐藏使用THREE.R
THREE.JS入门教程(3)着色器-下

译序 Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU,在浏览器端实现真正意义的3D.但是目前这项技术还处在发展阶段,资料极为匮乏,爱好者学习基本要通过Demo源码和Three.js本身的源码来学习. .简介这是WebGL着色器教程的后半部分,如果你没看过前一篇,阅读这一篇教程可能会使你感到困惑,建议你翻阅前面的教程. 上一篇结束的时候,我们在屏幕中央画了一个好看的粉红色的球体.现在我要开始创建一些更加有意思的东西了. 在这一篇教程中,我们会先花点时间
three.js 制作动态二维码的示例代码

今天郭先生说一下用canvas解析图片流,然后制作一个动态二维码的小案例,话不多说先上图,这是郭先生的微信二维码哦! 1. 解析图片流 canvas = document.createElement('canvas');//创建canvas画布 content = canvas.getContext('2d');//获取画布的上下文 canvas.width = 310;//设置尺寸 canvas.height = 310; img = new Image();//创建一张图片 img.src
简单了解three.js 着色器材质

说起three.js,着色器材质总是绕不过的话题,今天郭先生就说一说什么是着色器材质.着色器材质是很需要灵感和数学知识的,可以用简短的代码和绘制出十分丰富的图像,可以说着色器材质是脱离three.js的另一块知识,因此它十分难讲,我们只能在一个一个案例中逐渐掌握着色器语言的使用技巧. 1. 什么是着色器材质着色器材质(ShaderMaterial)是一个用GLSL编写的小程序 ,在GPU上运行.它能够提供 materials 之外的效果,也可以将许多对象组合成单个Geometry或Buffer
three.js着色器材质的内置变量示例详解

什么是着色器? 固定渲染管线: --标准的几何&光照(T&L)管线,功能是固定的,它控制着世界.视.投影变换及固定光照控制和纹理混合.T&L管线可以被渲染状态控制,矩阵,光照和采制参数.如果有了固定渲染管线,编写程序就比较容易了,因为所有的变换都是由固定渲染管线来完成的,但是缺点就是自由度低.固定渲染管线只能完成一些最基本的操作,如果想要做一些特殊的处理,就比较麻烦了. 可编辑渲染管线:--WebGL中不存在固定渲染管线,坐标变换必须全部由自己来做,这个记述了坐标变换的机制就叫做着
prettify 代码高亮着色器google出品

在<head></head>标签之间加入这两行代码: 复制代码代码如下: <link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css"/> <script src="http://google-code-prettify.go
深入理解requireJS-实现一个简单的模块加载器

在前文中我们不止一次强调过模块化编程的重要性,以及其可以解决的问题: ① 解决单文件变量命名冲突问题 ② 解决前端多人协作问题 ③ 解决文件依赖问题 ④ 按需加载(这个说法其实很假了) ⑤ ...... 为了深入了解加载器,中间阅读过一点requireJS的源码,但对于很多同学来说,对加载器的实现依旧不太清楚事实上不通过代码实现,单单凭阅读想理解一个库或者框架只能达到一知半解的地步,所以今天便来实现一个简单的加载器加载器原理分析分与合事实上,一个程序运行需要完整的模块,以下代码为例: /
Unity基于ShaderLab实现光照系统(着色器代码实现小结)

目录一.着色器 1.顶点片元着色器 2.表面着色器 3.固定函数着色器二.光照模型 1.逐顶点光照(Gourand Shading) 2.逐片元光照(Phong Shading) 3.HalfLambert 光照 4.逐顶点高光 5.逐像素高光 6.Bline-Phong光照模型三.纹理贴图 1.单张纹理 2.法线纹理 3.渐变纹理 4.遮罩纹理四.透明物体 1.透明测试 2.透明颜色混合 3.复杂模型双Pass颜色混合 4.透明混合渲染双面五.复杂光照处理 1.复杂光照 2.阴影处理
简单谈谈原生js的math对象

Math对象方法 //返回最大值 var max=Math.max(95,93,90,94,98); console.log(max); //返回最小值 var min=Math.min(95,93,90,94,98); console.log(min); //向上取整 console.log(Math.ceil(2.2)); console.log(Math.ceil(-2.2)); //向下取整 console.log(Math.floor(2.2));//2 console.log(Mat
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器

简单漂亮的js弹窗 - 自由拖拽复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>简单漂亮的js弹窗 - 自由
Javafx简单实现【我的电脑资源管理器】效果

本文实例讲述了Javafx简单实现[我的电脑资源管理器]效果.分享给大家供大家参考.具体如下: 1. java代码: package ttt; import java.io.File; import javafx.application.Application; import javafx.beans.value.ChangeListener; import javafx.beans.value.ObservableValue; import javafx.collections.FXColle

简单了解three.js 着色器材质

相关推荐

随机推荐