threejs(webgl)-shader入门教程(1)

最新推荐文章于 2025-04-14 12:08:46 发布
最新推荐文章于 2025-04-14 12:08:46 发布
阅读量4.4k 收藏 23
点赞数 15
分类专栏： demo 可视化 THREE 文章标签： shader webgl three.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_29814417/article/details/117959894
版权

1.shader基本使用
2.shader粒子

shader是什么？

shader是一个用GLSL编写的小程序，也就是着色器语言，我们可以通过shader来编写顶点着色器和片元着色器，在WEBGL编程一书中 25-26页有详细说明

shader在Three.js中如何使用？

threejs提供了关于shader的材质 RawShaderMaterial 和 ShaderMaterial 两种编写shader的材质。
RawShaderMaterial：不内置uniforms和attributes
ShaderMaterial：内置一些需要的参数，后期的使用都为此材质
这里的教程使用的教程为ShaderMaterial

ShaderMaterial

如果使用ShaderMaterial？
首先的了解ShaderMaterial时我们需要的参数。

attributes

顶点数据，我们使用的geometry和加载的模型中就已经创建好顶点数据了
这是使用PlaneGeometry生成的一段数据，一般的geometry数据有三个属性

position(vec3) 为模型的点位，没有这个属性，物体就无法显示出来
normal(vec3) 法线数据 用于光照计算 法线贴图等
uv(vec2) 贴图的点位attributes

uniforms

通过材质传递给shader的值，可以动态的去修改shader的参数 这些值需要满足在shader中的基础类型（最底下），可以通过传递参数来对物体进行不同的操作。例如修改颜色，透明度，计算的参数等。
在接受当前参数时，一定要确定好当前参数的基本类型。传递的浮点数接受一定是浮点数

vertexShader

在顶点着色器中运行的代码， 顶点着色器在片元着色器前运行，可以自行搜索下webgl的渲染流程。

fragmentShader

在片元着色器中运行的代码

第一个Demo（修改颜色）

我们输出一个最简单的Demo，修改颜色

const geometry = new THREE.PlaneGeometry(100, 100);

const shader = new THREE.ShaderMaterial({
    uniforms: {

    },
    vertexShader: `
        void main() {
        	// 顶点着色器计算后的Position
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }`,
    fragmentShader: `
        void main() {
        	// 输出到页面中。当前物体的每一个材质为红色，输出的颜色为rgba的归一化，
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
        }`
});

const plane = new THREE.Mesh(geometry, shader);

scene.add(plane);

在这里插入图片描述

修改输出
我们在uniforms传递一个参数，然后通过着色器去接收这个参数。

// uniforms
uniforms: {
	uColor: {
		value: new THREE.Color('#FFFF00') // 传递一个黄色
	}
}

// fragmentShader
fragmentShader: `
    uniform vec3 uColor;
    void main() {
        // // 输出到页面中。当前物体的每一个材质为红色，输出的颜色为rgba的归一化，
        gl_FragColor = vec4(uColor, 1.0);
	}`

最终我们得到了一个黄色的面
在这里插入图片描述
然后我们可以通过直接修改材质中uniforms.uColor.value的参数，就可以直接修改面的颜色

// 动态的修改颜色
setInterval(() => {
   const color = `rgb(${radom()}, ${radom()}, ${radom()})`;
    shader.uniforms.uColor.value.setStyle(color);
}, 200)

这样我们就编写了一个最简单的可以修改物体颜色的shader材质

第二个Demo

通过接受顶点数据，来输出对应的颜色。通过varying变量，可以把顶点的数据着色器传递到片元着色器之中

申明一个三维向量接受position传递给片元，然后我们判断y轴小于0的为uColor的颜色，否则为uColor1的颜色

在这里插入图片描述

const geometry = new THREE.PlaneGeometry(100, 100);

const shader = new THREE.ShaderMaterial({
    uniforms: {
        uColor: {
            value: new THREE.Color('#FFFF00'),
        },
        uColor1: {
            value: new THREE.Color('#FFFFFF'),
        }
    },
    vertexShader: `
        varying vec3 vPosition; // + 新增
        void main() {
            // 顶点着色器计算后的Position
            vPosition = position; // + 新增
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }`,
    fragmentShader: `
        uniform vec3 uColor;
        uniform vec3 uColor1; // + 新增
        varying vec3 vPosition; // + 新增
        void main() { 
            if (vPosition.y < 0.0) { // + 新增
                gl_FragColor = vec4(uColor, 1.0);
            } else { // + 新增
                gl_FragColor = vec4(uColor1, 1.0); // + 新增
            } // + 新增
        }`
});

const plane = new THREE.Mesh(geometry, shader);

scene.add(plane);

最后我们得到了一个上下不一样颜色的图形
在这里插入图片描述
也可以在片元着色器中画一个圆


const geometry = new THREE.PlaneGeometry(100, 100);

const shader = new THREE.ShaderMaterial({
    uniforms: {
        uColor: {
            value: new THREE.Color('#FFFF00'),
        },
        uColor1: {
            value: new THREE.Color('#FFFFFF'),
        },
        uRadius: {
            value: 0
        }
    },
    vertexShader: `
        varying vec3 vPosition;
        void main() {
            // 顶点着色器计算后的Position
            vPosition = position;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }`,
    fragmentShader: `
        uniform float uRadius; // 设置一个半径范围
        uniform vec3 uColor;
        uniform vec3 uColor1;
        varying vec3 vPosition;
        void main() { 
        	// 中心点
            vec3 vCenter = vec3(.0, .0, .0);
			// 计算顶点离中心点的距离
            float len = distance(vCenter, vPosition);
			// 设置在半径范围内的颜色为uColor 反之 为 uColor
            if (len < uRadius) {
                gl_FragColor = vec4(uColor1, 1.0);
            } else {
                gl_FragColor = vec4(uColor, 1.0);
            }
        }`
});

const plane = new THREE.Mesh(geometry, shader);

scene.add(plane);

let radius = 1;
setInterval(() => {
    const color = `rgb(${radom()}, ${radom()}, ${radom()})`;
    shader.uniforms.uColor.value.setStyle(color);

    shader.uniforms.uRadius.value = radius % 50;

    radius++;
}, 50)

就得到了以下的图形
在这里插入图片描述

把图片纹理传递到当前DEMO中

顶点着色器：varying把图片的uv传递给片元。使用纹理必须有对应的uv


const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('/textures/texture.jpg')

const geometry = new THREE.PlaneGeometry(100, 100);

const shader = new THREE.ShaderMaterial({
    uniforms: {
        uColor: {
            value: new THREE.Color('#FFFF00'),
        },
        uRadius: {
            value: 0
        },
        uTexture: {
            value: texture
        }
    },
    vertexShader: `
        varying vec3 vPosition;

        varying vec2 vUV; // 
        void main() {
            // 顶点着色器计算后的Position
            vPosition = position;
            // 把uv数据传递给片元
            vUV = uv;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }`,
    fragmentShader: `
        uniform float uRadius; // 设置一个半径范围
        uniform vec3 uColor; // 颜色1
        varying vec3 vPosition; // 顶点数据
        varying vec2 vUV; // uv
        uniform sampler2D uTexture; // 材质
        void main() { 
            // 材质和uv计算为当前位置颜色
            vec4 mapColor = texture2D(uTexture, vUV);

            vec3 vCenter = vec3(.0, .0, .0);

            float len = distance(vCenter, vPosition);

            if (len < uRadius) {
                gl_FragColor = mapColor;
            } else {
                gl_FragColor = vec4(uColor, 1.0);
            }
            
        }`
});

const plane = new THREE.Mesh(geometry, shader);

scene.add(plane);

let radius = 1;
setInterval(() => {
    const color = `rgb(${radom()}, ${radom()}, ${radom()})`;
    shader.uniforms.uColor.value.setStyle(color);

    shader.uniforms.uRadius.value = radius % 50;

    radius++;
}, 50)

在这里插入图片描述

总结

在着色器中，操控顶点数据和片元输出的颜色，就能做出更多的效果。
更深入的待续。

代码地址
觉得可以的话请给一个小星星或者一个赞
QQ群:1082834010

基本类型:

类型说明
void空类型,即不返回任何值
bool布尔类型 true,false
int带符号的整数 signed integer
float带符号的浮点数 floating scalar
vec2, vec3, vec4n维浮点数向量 n-component floating point vector
bvec2, bvec3, bvec4n维布尔向量 Boolean vector
ivec2, ivec3, ivec4n维整数向量 signed integer vector
mat2, mat3, mat42x2, 3x3, 4x4 浮点数矩阵 float matrix
sampler2D2D纹理 a 2D texture
samplerCube盒纹理 cube mapped texture
ThreeJS入门（147）：THREE.ShaderLib 知识详解，示例代码
大剑师兰特的GIS世界
11-03 985
`THREE.ShaderLib` 是 Three.js 中的一个对象，它包含了一系列预定义的着色器程序，这些着色器程序被设计用于实现特定的效果或功能。通过 `THREE.ShaderLib`，开发者可以快速地使用这些预定义的着色器程序来渲染不同的材质效果，而无需从头开始编写复杂的着色器代码。
Three.js shader 城市 雷达 扫描 波动 扩散效果
11-05
Three.js shader 城市 雷达 扫描 波动 扩散效果
threejs(webgl)-shader入门教程-粒子入门(2)
stonerao
06-22 2157
回顾 1.shader基本使用 粒子
深入理解 Three.js 中 Shader 的使用及示例
最新发布
2401_86373285的博客
04-14 402
首先，我们来看如何在 Three.js 中使用 ShaderMaterial 创建一个简单的自定义材质。// 顶点着色器代码// 片段着色器代码// 创建ShaderMaterial});// 创建一个几何体，这里以平面为例// 创建Mesh在上述代码中，顶点着色器简单地将顶点位置进行了标准的矩阵变换，使其正确显示在屏幕上。片段着色器则直接将每个像素的颜色设置为红色（rgba (1, 0, 0, 1)）。
WebGL Shader 入门教程
gitblog_00085的博客
09-04 594
WebGL Shader 入门教程 jam3-lesson-webgl-shader-introA brief introduction to fragment shaders.项目地址:https://gitcode.com/gh_mirrors/ja/jam3-lesson-webgl-shader-intro 1. 项目的目录结构及介绍 jam3-lesson-webgl-shader-i...
threejs中的shader
weixin_63443072的博客
10-29 1271
比如一条直线，你把直线几何体两个端点，分别设置一个颜色，threejs会根据两端的颜色，在两点之间，按照距离远近插入不同颜色，就是所谓的颜色插值计算，距离某个点越近受某个点颜色影响越大。以这个距离距离r作为临界值，每个方形点的所有片元凡是距离中心vec2(0.5, 0.5)的距离大于r，都舍弃，就会生成一个圆形的点。对于网格的三角形也是类似，三角形内部一个点的颜色，同时收到三个点的颜色影响，距离某个点越近，受影响越大。的时候，threejs会在内部给你写的顶点着色器代码中，插入一行代码。
Three.js-Shaders着色器
damadashen的博客
07-15 2949
Three中着色器、glsl的介绍及使用，使用着色器实现旗帜飘动效果案例。
1、three.js shader 入门 红旗飘动效果
淋雨一直走~
09-20 528
three.js shader 入门案例，红旗随风飘扬，带高光效果。
threejs--02threejs手册起步+进阶
墨迹斑斑的老墙
04-14 272
快速过一下基本用法。
THREE.JS入门教程(3)着色器-下
10-27
Three.js是一个伟大的开源WebGL库，WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D本文将介绍模拟光照/Attribut变量/更新着色器材质/更新着色器材质等等感兴趣的朋友可以了解下啊
THREE.JS入门教程(2)着色器-上
12-11
译序 Three.js是一个伟大的开源WebGL库，WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D。但是目前这项技术还处在发展阶段，资料极为匮乏，爱好者学习基本要通过Demo源码和Three.js本身的源码来学习。 0....
跳动的心（three.js,shader）
01-23
结合three.js，shader打造跳动的心， 凑字数 。
threejs-shader-materials:Three.js的着色器材料集合
05-09
threejs-shader-materials Three.js的着色器材料集合 演示版 入门 安装 npm install https://github.com/MasatoMakino/threejs-shader-materials.git --save-dev 进口 threejs-shader-materials由ES6模块和TypeScript d.ts文件组成。 首先，导入类 import { HexGridMaterial } from "threejs-shader-materials" ; 并设置材料。 const geo = new SphereGeometry ( 10 , 64 , 64 ) ; const mat = new HexGridMaterial ( ) ; const mesh = new Mesh ( geo , mat ) ; scen
基于three.js的shader入门教程 八
webgpu
05-14 812
threejs交流群511163089 后期特效 先说下概念。 比喻一下，就像先将物体都画在一张纸上，再对纸进行涂鸦（写一些shader），最后给你看这张纸。 还能将纸画在另外一张纸上，继续涂鸦，涂鸦很多层造出神奇的效果。 实质是使用了FBO,frame buffer object。 在three里头封装之后名字是WebglRenderTarget，或者你都不用设置这个，使用他的EffectComposer。 用target的栗子是webgl_rtt.html。 别的就是webgl_p.
WebGL GLSL Shader 编辑器扩展使用教程
gitblog_00653的博客
04-10 841
WebGL GLSL Shader 编辑器扩展使用教程 ShaderEditorExtension Google Chrome DevTools extension to live edit WebGL GLSL shaders ...
WebGl Shader 学习
ChenXiaoTemp的专栏
03-06 1017
http://www.tuicool.com/articles/I7fU7n 这是一个很好的深度讲解Webgl Shader的文章，非常不错。
WebGL Shaders教程
gitblog_00465的博客
09-05 516
WebGL Shaders教程 webglshadersWebGL Shader demos - GPU rendering shader experiments with procedural 3D scene generation using ray marching and distance field (also known as 'sphere tracing') rendering ...
three.js学习笔记(十四)——Shaders着色器
hongsir的博客
05-11 9766
什么是着色器？ 实际上着色器是WebGL的主要组件之一。如果我们在没接触Three.js情况下开始学习WebGL，着色器将是我们首先且必须要学的知识，这也是为什么原生WebGL很难入门。 着色器是一种使用GLSL(OpenGL Shading Language)编写并在GPU上运行的程序。它们被用于定位几何体的每个顶点，并为该几何体的每个可见像素着色。使用“像素Pixel”来描述其实并不准确，因为渲染的每个点不一定与屏幕上的每个像素相匹配，因此我们更倾向于使用术语“片元fragment”。 之后我们会向着色
4.WebGL+Shader课程基础
code for life
05-31 1714
变量名只能包含英文字符、数字和下划线即(a-z、A-Z、0-9、_)变量名的首字母不能是数字不能以 gl_ 、webgl_ 或 webgl 开头，这些前缀已经被OpenGL ES 保留了不能是GLSL ES内置的关键字和保留的关键字变量类型说明具有2、3、4个浮点数元素的矢量具有2、3、4个整形元素的矢量具有2、3、4个布尔值元素的矢量。
Three.js基础教程：从入门到高阶应用全面指南
本指南是一个全面的Three.js入门教程，它不仅适合初学者学习如何使用Three.js制作基本的3D网页应用，也适合有一定基础的开发者进阶学习。通过阅读本书，读者可以掌握Three.js的核心概念和高级特性，为开发复杂的3D...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

菜鸡饶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值