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

Three使用WebGPU的关键TSL

news 2025/7/17 21:02:46

Three.js 使用 WebGPU 的关键 TSL

TSL: three.js shader language

介绍 three.js 材质转为webgpu的关键流程, 从而引出 TSL.

1、关键类关系

在这里插入图片描述

WebGPURenderer|-- library: StandardNodeLibrary|-- _nodes: Nodes|-- _objects: RenderObjects|-- createRenderObject()StandardNodeLibrary extends NodeLibrary|-- materialNodes: Map|-- fromMaterial()Nodes|-- backend: WebGPUBackend|-- needsRefresh()|-- getForRender()RenderObjectsRenderObject|-- _nodes: Nodes|-- _monitor: NodeMaterialObserver|-- _nodeBuilderState: NodeBuilderState|-- getNodeBuilderState()|-- getMonitor()WebGPUBackendWGSLNodeBuilder|-- object: Mesh|-- stack: StackNode // 被代理|-- renderer: WebGPURenderer|-- cache: NodeCatche|-- build()NodeFrameNodeBuilderState|-- binding: BindGroup[]|-- updateNodes: NodeAttribute []|-- nodeAttributes: UniformNode []NodeMaterialObserver|-- monitor: NodeMaterialObserverNodeMaterial|-- build()|-- setup()MeshBasicNodeMaterial extends NodeMaterial

2、执行流程

2.1 注册材质解析类

在创建 WebGPURenderer 时，会创建 StandardNodeLibrary。

StandardNodeLibrary.addMaterial( MeshBasicNodeMaterial, 'MeshBasicMaterial' );

2.2 创建 WGSLNodeBuilder

这个 WGSLNodeBuilder 是和 Mesh 一一对应。

WebGPURenderer.render()._renderObjectDirect()// step1: 创建 RenderObjectconst renderObject: RenderObject = this._objects.get();// step2: 创建 WGSLNodeBuilderthis._nodes.needsRefresh( renderObject );

详细调用过程:

Nodes.needsRefresh() {const monitor = renderObject.getMonitor();
}RenderObject.getMonitor() {return this._monitor = this.getNodeBuilderState().monitor;
}RenderObject.getNodeBuilderState() {return this._nodeBuilderState = this._nodes.getForRender();
}Nodes.getForRender() {const nodeBuilder: WGSLNodeBuilder = this.backend.createNodeBuilder();nodeBuilder.build();
}

2.3 开始构建

// 书接上文, 创建后开始构建
nodeBuilder.build() {// 根据材质类型，获取对应的 NodeMateriallet nodeMaterial = renderer.library.fromMaterial( material );if ( nodeMaterial === null ) {console.error( `NodeMaterial: Material "${ material.type }" is not compatible.` );nodeMaterial = new NodeMaterial();}nodeMaterial.build( this );
}

这里以MeshBasicMaterial为例, 那么nodeMaterial就是 MeshBasicNodeMaterial。

NodeMaterial.build() {this.setup( this.nodeBuilder );
}NodeMaterial.setup() {const vertexNode = this.setupVertex()
}NodeMaterial.setupVertex() {return modelViewProjection;
}// modelViewProjection 被引入:
import { modelViewProjection } from '../../nodes/accessors/ModelViewProjectionNode.js';

至此, 就拉开了 TSL 的序幕。

附录、测试例子

<html lang="en"><body><div id="container"></div><script type="importmap">{"imports": {"three": "../build/three.webgpu.js","three/webgpu": "../build/three.webgpu.js","three/tsl": "../build/three.tsl.js","three/addons/": "./jsm/"}}</script><script type="module">import * as THREE from 'three';import Stats from 'three/addons/libs/stats.module.js';import { GUI } from 'three/addons/libs/lil-gui.module.min.js';import { OrbitControls } from 'three/addons/controls/OrbitControls.js';let container, stats;let camera, scene, renderer;let controls, water, sun, mesh;init();function init() {container = document.getElementById('container');//renderer = new THREE.WebGPURenderer();renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);renderer.setAnimationLoop(animate);renderer.toneMapping = THREE.ACESFilmicToneMapping;renderer.toneMappingExposure = 0.5;container.appendChild(renderer.domElement);window.renderer = renderer;//scene = new THREE.Scene();camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 1, 20000);camera.position.set(30, 30, 100);const waterGeometry = new THREE.PlaneGeometry( 100, 100 );mesh = new THREE.Mesh(waterGeometry, new THREE.MeshBasicMaterial({color: 0x00ff00}));scene.add(mesh)}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);}function animate() {render();}function render() {const time = performance.now() * 0.001;renderer.render(scene, camera);}</script></body>
</html>

Three使用WebGPU的关键TSL

Three.js 使用 WebGPU 的关键 TSL TSL: three.js shader language 介绍 three.js 材质转为webgpu的关键流程, 从而引出 TSL. 1、关键类关系 WebGPURenderer|-- library: StandardNodeLibrary|-- _nodes: Nodes|-- _objects: RenderObjects|-- createRenderObject()StandardN…...

编程日记 2024/12/19 1:14:24

ESP32-S3模组上跑通ES8388（30）

接前一篇文章：ESP32-S3模组上跑通ES8388（29）二、利用ESP-ADF操作ES8388 2. 详细解析上一回终于解析完了es8388_init函数的所有代码。本回回到调用它的地方，继续往下讲解。我们是从ESP32-S3模组上跑通ES8388（7）-CSDN博客开始进入es8388_init函数，展开对于它的解析的…...

编程日记 2024/12/19 1:09:17

概率论得学习和整理24：EXCEL的各种图形，统计图形

目录 0 EXCEL的各种图形，统计图形 1 统计图形 / 直方图 / 其实叫频度图 hist最合适(用原始数据直接作图) 1.1 什么是频度图 1.2 如何创建频度图，一般是只选中1列数据（1个数组） 1.3 如何修改频度图的宽度 1.4 hist图的一个特…...

编程日记 2024/12/19 1:03:08

WPF中依赖属性的底层和普通属性的底层有什么不一样

WPF中依赖属性的底层在 WPF 中，依赖属性（Dependency Property）是 WPF 属性系统的核心，它支持功能强大的特性（如数据绑定、动画、样式等）。其底层实现是围绕 DependencyObject 类展开的。以下是 WPF 中依赖…...

编程日记 2024/12/19 1:02:07

【Qt】drawText字体大小问题探究

背景软件的一个功能是： 打开图片在图片上绘制序号，序号的样式是圆圈内包含数字将带有序号的图片打印出来实现思路也很简单，在屏幕上显示时重写paintEvent函数，利用QPainter完成图片和序号的绘制。打印时只需要将QPainter对应…...

编程日记 2024/12/19 0:55:57

Mapbox-GL 的源码解读的一般步骤

Mapbox-GL 是一个非常优秀的二三维地理引擎，随着智能驾驶时代的到来，应用也会越来越广泛，关于mapbox-gl和其他地理引擎的详细对比（比如CesiumJS），后续有时间会加更。地理首先理解 Mapbox-GL 的源码是一项复…...

编程日记 2024/12/19 0:54:56

【C++】高级分析 switch 语句的应用

博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 💯前言💯switch 语句的基本用法语法结构核心要点实例演示正确实现期望输出错误实现错误输出 💯if 与 switch 语句的实现比较使用 if 语句使用 switch 语句比较分析 &am…...

编程日记 2024/12/19 0:52:54

活动预告 | Surface 来了#11：Windows 11 AI+ PC，释放 AI 办公设备的无限潜能

课程介绍欢迎来到 Surface 来了第 11 期节目。今年 5 月底，微软推出了专为 AI 体验而设计的全新 Windows PC 品类：Windows 11 AI PC。微软通过 Windows 11 AI PC，进一步强调了 NPU 在运行设备端 AI 功能的重要性。并要求符合这一品类的…...

编程日记 2024/12/19 0:46:46

php基础：正则表达式

1.正则表达式正则表达式是用于描述字符排列和匹配模式的一种语法规则。它主要用于字符串的模式分割、匹配、查找及替换操作。到目前为止，我们前面所用过的精确（文本）匹配也是一种正则表达式。在PHP中，正则表达式一般是由正规字…...

编程日记 2024/12/19 0:39:41

go语言压缩[]byte数据为zlib格式的时候，耗时较多，应该怎么修改？

在Go语言中使用compress/flate包来实现Zlib格式的压缩时，如果发现压缩耗时较多，可以考虑以下几个优化方向： ### 1. 压缩级别默认情况下，compress/flate包中的NewWriter函数使用的是默认压缩级别（BestSpeed和BestComp…...

编程日记 2024/12/19 0:37:39

[机器学习]AdaBoost（数学原理 + 例子解释 + 代码实战）

AdaBoost AdaBoost（Adaptive Boosting）是一种Boosting算法，它通过迭代地训练弱分类器并将它们组合成一个强分类器来提高分类性能。 AdaBoost算法的特点是它能够自适应地调整样本的权重，使那些被错误分类的样本在后续的训练中得到…...

编程日记 2024/12/19 0:36:38

深入了解Spring

目录 Spring基础什么是Spring框架？ Spring 包含的模块有哪些？ Core Container AOP Data Access/Integration Spring Web Messaging Spring Test Spring,Spring MVC,Spring Boot 之间什么关系? Spring基础什么是Spring框架？ Sp…...

编程日记 2024/12/19 0:34:36

jar 包如何下载

maven官网：https://mvnrepository.com/ 点击搜索，找对应搜索结果点击...

编程日记 2024/12/19 0:28:31

ESlint代码规范，手动与自动修复

规范说明规则参考 - ESLint - 插件化的 JavaScript 代码检查工具规范说明可看到是main.js文件报错分别是第三行第30个字符，以及第七行第一个字符后面则是规范说明，可以根据说明查找相应的规范一.手动修正 ctrl f 可以搜索二.自动修正 …...

编程日记 2024/12/19 0:25:29

利用编程获得money？

在当今数字化时代，编程技能为人们开辟了众多赚钱途径。无论你是编程新手还是经验丰富的开发者，都能在广阔的市场中找到适合自己的盈利方式。以下是一份详细的用编程赚钱指南。一、自由职业平台像 Upwork、Freelancer 和 Fiverr 等知名自由职业平台&am…...

编程日记 2024/12/19 0:20:24

设计规规范：【App 配色】

文章目录引言I App 配色组成色彩象征 & 联想II 知识扩展设计流程图UI设计交互设计UI交互设计引言设计规范，保持设计一致性，提高设计效率。宏观上对内统一，管理与合作变得容易。按类型管理颜色、文本样式、图标、组件(symbol)。蓝湖设计规范云 https://lanhuapp.co…...

编程日记 2024/12/19 0:16:21

react 使用 PersistGate 白屏解决方案

我在全局添加 PersistGate 组件后报错了报错信息如下： Uncaught Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped wi…...

编程日记 2024/12/19 0:12:17

F5中获取客户端ip地址(client ip)

当F5设备对其原始设置上的所有IP地址使用NAT时，连接到poo成员（nodes、backend servers）的出站连接将是NAT IP地址。 pool 成员（nodes、backend servers）将无法看到真实的客户端 ip地址，因为看到的是F5上的…...

编程日记 2024/12/19 0:10:11

Maven（生命周期、POM、模块化、聚合、依赖管理）详解

目录 Maven构建项目的生命周期 Maven的常用命令 POM 依赖管理依赖导入依赖范围设置依赖版本维护依赖传递依赖冲突解决依赖冲突的方法使用maven提供的依赖调节原则排除依赖，排除依赖的jar包锁定版本项目模块化 Maven项目的继承 Maven项目…...

编程日记 2024/12/19 0:08:07

电力场景绝缘子缺陷识别分割数据集labelme格式1099张3类别

数据集格式：labelme格式(不包含mask文件，仅仅包含jpg图片和对应的json文件) 图片数量(jpg文件个数)：1099 标注数量(json文件个数)：1099 标注类别数：3 标注类别名称:["brokenpart","brokeninsulator…...

编程日记 2024/12/19 0:07:06

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势：专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发，是一款收费低廉但功能全面的Windows NAS工具，主打“无学习成本部署” 。与其他NAS软件相比，其优势在于： 无需硬件改造：将任意W…...

编程新知 2025/7/10 6:25:54

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码思路进入页面发现是一个登录框，很难让人不联想到SQL注入，但提示都说了不是SQL注入，所以就不往这方面想了先查看一下网页源码，发现一段JavaScript代码，有一个关键类ctfs…...

编程新知 2025/7/12 18:28:25

苍穹外卖--缓存菜品

1.问题说明用户端小程序展示的菜品数据都是通过查询数据库获得，如果用户端访问量比较大，数据库访问压力随之增大 2.实现思路通过Redis来缓存菜品数据，减少数据库查询操作。缓存逻辑分析： ①每个分类下的菜品保持一份缓存数据…...

编程新知 2025/7/14 16:25:07

Mac软件卸载指南，简单易懂！

刚和Adobe分手，它却总在Library里给你写"回忆录"？卸载的Final Cut Pro像电子幽灵般阴魂不散？总是会有残留文件，别慌！这份Mac软件卸载指南，将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2025/7/17 13:15:46

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件路径：src/utils/timer.ts 完整代码： import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

编程新知 2025/7/16 10:11:42

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接：3403. 从盒子中找出字典序最大的字符串 I 代码如下： class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/6/21 22:11:13