当前位置：首页 > news >正文

ThreeJS-3D教学十二：ShaderMaterial

news 2025/12/17 19:47:04

一、首先 Shader 是做什么的
Shader 可以自定义每个顶点、每个片元/像素如何显示，而控制顶点和片元显示是通过设置 vertexShader 顶点着色器和 fragmentShader 片元着色器，这两个着色器用在 ShaderMaterial 和 RawShaderMaterial 材质上。
我们先看一个例子：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><title>three.js webgl - raw shader</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<div id="container"></div>
<script id="vertexShader" type="x-shader/x-vertex">uniform mat4 modelViewMatrix;uniform mat4 projectionMatrix;attribute vec3 position;void main()	{gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );}
</script><script id="fragmentShader" type="x-shader/x-fragment">void main()	{gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);}</script>
<script type="importmap">{"imports": {"three": "../three-155/build/three.module.js","three/addons/": "../three-155/examples/jsm/"}}
</script><script type="module">import * as THREE from 'three';import Stats from 'three/addons/libs/stats.module.js';import { OrbitControls } from 'three/addons/controls/OrbitControls.js';let container, stats, controls;let camera, scene, renderer;init();animate();initObject();function initObject() {// geometry// 第一个是生成几个三角形 const vertexCount = 2 * 3;const geometry = new THREE.BufferGeometry();const positions = [];const colors = [];for ( let i = 0; i < vertexCount; i ++ ) {// adding x,y,zpositions.push( Math.random() - 0.5 );positions.push( Math.random() - 0.5 );positions.push( Math.random() - 0.5 );// adding r,g,b,acolors.push( Math.random() * 255 );colors.push( Math.random() * 255 );colors.push( Math.random() * 255 );colors.push( Math.random() * 255 );}const positionAttribute = new THREE.Float32BufferAttribute( positions, 3 );const colorAttribute = new THREE.Uint8BufferAttribute( colors, 4 );colorAttribute.normalized = true; // this will map the buffer values to 0.0f - +1.0f in the shadergeometry.setAttribute( 'position', positionAttribute );geometry.setAttribute( 'color', colorAttribute );// materialconst material = new THREE.RawShaderMaterial({uniforms: {time: { value: 1.0 }},vertexShader: document.getElementById( 'vertexShader' ).textContent,fragmentShader: document.getElementById( 'fragmentShader' ).textContent,side: THREE.DoubleSide,transparent: true});const mesh = new THREE.Mesh( geometry, material );scene.add( mesh );}function init() {container = document.getElementById( 'container' );camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10 );camera.position.z = 2;scene = new THREE.Scene();scene.background = new THREE.Color( 0x101010 );renderer = new THREE.WebGLRenderer();renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );container.appendChild( renderer.domElement );controls = new OrbitControls( camera, renderer.domElement );stats = new Stats();container.appendChild( stats.dom );window.addEventListener( 'resize', onWindowResize );}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );}function animate() {requestAnimationFrame( animate );render();controls.update();stats.update();}function render() {const time = performance.now();const object = scene.children[0];if (object) {// object.rotation.y = time * 0.0005;object.material.uniforms.time.value = time * 0.005;}renderer.render( scene, camera );}
</script>
</body>
</html>

以上代码顶点着色器我们用的是固定写法计算顶点的位置

gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
或者也可以这样：
gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4( position, 1.0 );

而片元着色器我们设置了一个白色
我相信大家会对 scropt 中 x-shader/x-vertex、x-shader/x-fragment 很陌生，没关系咱们学习 Shader 其实大部分就是学这里面怎么写：
它是一种类似C语言的 GLSL 语言——即 OpenGL Shading Language——，
JavaScript、C 等语言通常在 CPU 上执行，而着色器语言通常在 GPU 上执行，由 GPU 分别对每个顶点、每个片元独立执行

shader 程序可以单独写在诸如 vertex.glsl、fragment.glsl 的文件里再导入使用，也可以和示例一样写在script中，或者在 JavaScript 里用字符串格式表示（后面会介绍）

在顶点着色器里需要设置 gl_Position顶点位置，在片元着色器里需要设置 gl_FragColor 片元/像素颜色，两者都在没有返回值的 void main() {} 主函数里设置，并且 main 函数会被自动执行

着色器语言三种变量 attribute、uniform 和 varying

简单总结
顶点着色器渲染定位顶点位置
片段着色器为该几何体的每个可见片元（像素）进行着色
片段着色器在顶点着色器之后执行
在每个顶点之间会有变化的数据（如顶点的位置）称为attribute，只能在顶点着色器中使用
顶点之间不变的数据（如网格位置或颜色）称为uniform，可以在顶点着色器和片段着色器中使用
从顶点着色器发送到片元着色器中的插值计算数据被称为varying

看了上面的内容，我们再来看一个案例，提前说下在这里我无意将所有 GLSL 语言的方法一一列出，我相信大家也不愿意看，毕竟网上一大堆类似文章，官网上也能看，我只是通过案例，把一些常用的知识点给到大家，能让各位对编写Shader有个初步的认知：

let vertexShader = `precision mediump float;precision mediump int;uniform mat4 modelViewMatrix;uniform mat4 projectionMatrix;attribute vec3 position;attribute vec4 color;varying vec3 vPosition;varying vec4 vColor;void main()	{vPosition = position;vColor = color;gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );}
`;
let fragmentShader = `precision mediump float;precision mediump int;uniform float time;varying vec3 vPosition;varying vec4 vColor;void main()	{vec4 color = vec4( vColor );color.g += sin( vPosition.x * 10.0 + time ) * 0.5;gl_FragColor = color;}
`;

上面有几点知识点，先从简单的来，
1、通过 varying 可以将vPosition、vColor 从 vertexShader 到 fragmentShader
2、上面的写法是 shader 程序刚才提到的字符串格式写法
3、precision 一个新的知识点 - 着色器运算精度设置
通过设置着色器数值的精度可以更好的配置资源，可以根据需要，在不太影响渲染效果前提下，可以尽量降低运算精度。
lowp、mediump和highp关键字分别对应低、中、高三个精度

1）通过precision关键字可以批量声明一些变量精度。
比如顶点着色器代码设置precision highp float;，表示顶点着色器中所有浮点数精度为高精度。

2）比如片元着色器代码设置precision lowp int;，表示片元着色器中所有整型数精度为低精度。

3）顶点和片元着色器不同类型数据默认精度
顶点着色器默认精度

数据类型	默认精度
int	高精度hight
float	高度hight
sampler2D	低精度lowp
samplerCube	低精度lowp

片元着色器默认精度

数据类型	默认精度
int	中精度mediump
float	无默认值，如果片元着色器用到浮点数，注意一定手动设置
sampler2D	低精度lowp
samplerCube	低精度lowp

4、我们发现有申明 modelViewMatrix、projectionMatrix、position、color变量，这是因为我们使用 RawShaderMaterial材质，这个方法没有默认的内置变量声明，与之对应的我们可以用 ShaderMaterial 材质，此时就可以这样写：

let vertexShader = `precision mediump float;precision mediump int;varying vec3 vPosition;varying vec4 vColor;void main()	{vPosition = position;vColor = color;gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );}
`;

更多的内置变量请看这里
通过以上案例我们算是简单的了解了 Shader，发现 Shader其实就是改变顶点位置和片元/像素颜色

二、图形构成的基础三角形
我们将 geometry 换为一个球体来认识一下图形的基础构成

const geometry = new THREE.SphereGeometry( 0.5, 16, 8 );
const material = new THREE.RawShaderMaterial({uniforms: {time: { value: 1.0 }},vertexShader: document.getElementById( 'vertexShader1' ).textContent,fragmentShader: document.getElementById( 'fragmentShader1' ).textContent,side: THREE.DoubleSide,transparent: false,wireframe: true  // 将几何体渲染为线框，默认值为false（即渲染为平面多边形）。});

在这里插入图片描述
通过这个球体可以很好的理解图形的构成，其实就是一个个的三角形，三角形越是多，图形效果越好当然对电脑性能要求越高，

const geometry = new THREE.SphereGeometry( 0.5, 128, 64);

在这里插入图片描述
可以看到这个球体就很完美了，通过这个案例也能更好的帮大家理解
顶点着色器渲染顶点位置的顶点是哪些点、从哪来的点
片段着色器为该几何体的每个可见片元（像素）进行着色

ThreeJS-3D教学十二：ShaderMaterial

相关文章：

ThreeJS-3D教学十二：ShaderMaterial

计算机网络面试TCP篇之TCP三次握手与四次挥手

Python-数据分析组合可视化实例图【附完整源码】

【JavaEE】Spring Web MVC详解

docker安装rocketMq5x以上的版本

【Spring】DAO 和 Repository 的区别

高阶面试-秒杀系统的设计

四十五、证券基金业数据出境有无特别规范需要注意？

02.Linux下安装FFmpeg

华为RH2288H V2服务器，远程端口安装Linux操作系统

JS在线加密简述

理想汽车提出3DRealCar：首个大规模3D真实汽车数据集

HTML5文旅文化旅游网站模板源码

山东大学多核并行2024年回忆版

CentOS 7 上搭建 JavaEE 环境

库与表管理的终极指南

等级保护测评在测评中Linux系统怎么改

Python项目开发实战：微信跳一跳辅助工具，案例教程编程实例课程详解

STM32 SWD烧写

数据库系统概论（第5版教材）

R语言AI模型部署方案：精准离线运行详解

Python：操作 Excel 折叠

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

ffmpeg（四）：滤镜命令

Keil 中设置 STM32 Flash 和 RAM 地址详解

MySQL中【正则表达式】用法

是否存在路径（FIFOBB算法）

智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制

Reasoning over Uncertain Text by Generative Large Language Models

#Uniapp篇：chrome调试unapp适配