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

Three使用WebGPU的关键TSL

news 2026/4/4 13:56:15

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的各种图形&#xff0c;统计图形 1 统计图形 / 直方图 / 其实叫 频度图 hist最合适(用原始数据直接作图) 1.1 什么是频度图 1.2 如何创建频度图&#xff0c;一般是只选中1列数据&#xff08;1个数组&#xff09; 1.3 如何修改频度图的宽度 1.4 hist图的一个特…...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

php基础：正则表达式

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

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

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

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

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

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

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

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

深入了解Spring

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

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

jar 包如何下载

maven官网&#xff1a;https://mvnrepository.com/ 点击搜索&#xff0c;找对应搜索结果点击...

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

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

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

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

利用编程获得money？

在当今数字化时代&#xff0c;编程技能为人们开辟了众多赚钱途径。无论你是编程新手还是经验丰富的开发者&#xff0c;都能在广阔的市场中找到适合自己的盈利方式。以下是一份详细的用编程赚钱指南。 一、自由职业平台 像 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 组件后报错了 报错信息如下&#xff1a; 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时&#xff0c;连接到poo成员&#xff08;nodes、backend servers&#xff09;的出站连接将是NAT IP地址。 pool 成员&#xff08;nodes、backend servers&#xff09;将无法看到真实的客户端 ip地址&#xff0c;因为看到的是F5上的…...

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

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

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

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

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

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

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

ESP8266与STM32F103通信实战：从硬件连接到软件调试的完整解析

1. ESP8266与STM32F103通信基础 搞物联网开发的朋友应该都听说过ESP8266这个神器&#xff0c;它就像给传统单片机装上了Wi-Fi翅膀。我最早用STM32F103做项目时&#xff0c;为了联网功能折腾了好久&#xff0c;直到发现ESP-01S模块这个性价比之王。今天我就把这两者的通信实战经…...

编程新知 2026/4/4 13:13:50

在快马平台用Qt快速构建音乐播放器原型：十分钟搞定跨平台UI

最近在做一个音乐播放器的原型设计&#xff0c;尝试用Qt框架在InsCode(快马)平台上快速验证想法。整个过程比想象中顺利很多&#xff0c;特别适合需要快速验证UI方案的场景。这里记录下我的实践过程&#xff0c;分享给同样需要快速原型开发的朋友们。 为什么选择Qt做音乐播放器…...

编程新知 2026/4/4 12:31:09

OpCore-Simplify终极指南：3分钟打造完美黑苹果EFI配置

OpCore-Simplify终极指南&#xff1a;3分钟打造完美黑苹果EFI配置 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 想要体验macOS的强大功能&#xff0…...

编程新知 2026/4/4 11:52:13

卡证检测矫正模型惊艳案例：护照芯片区域反光消除+四角点亚像素定位

卡证检测矫正模型惊艳案例&#xff1a;护照芯片区域反光消除四角点亚像素定位 你有没有遇到过这样的烦恼&#xff1f;用手机拍身份证、护照或者驾照&#xff0c;准备上传办理业务时&#xff0c;系统总是提示“照片不清晰”、“证件边缘不完整”或者“请拍摄正面照”。尤其是护…...

编程新知 2026/4/4 11:23:59

无需重装！修复赛博朋克2077 DirectX错误：d3dx9_43.dll丢失的快速解决方法

当你满心期待地启动《赛博朋克2077》&#xff0c;却只等来一个“由于找不到d3dx9_43.dll&#xff0c;无法继续执行代码”的错误弹窗&#xff0c;游戏就此卡死&#xff0c;确实让人瞬间血压飙升。别急&#xff0c;这个报错并非意味着你的游戏文件损坏&#xff0c;更不需要重装那…...

编程新知 2026/4/4 11:03:42

3步零成本改造：让老旧打印机秒变AirPrint无线打印服务器

3步零成本改造&#xff1a;让老旧打印机秒变AirPrint无线打印服务器 【免费下载链接】cups-avahi-airprint Docker image for CUPS intended as an AirPrint relay 项目地址: https://gitcode.com/gh_mirrors/cu/cups-avahi-airprint 当iPad遇上旧打印机&#xff1a;现代…...

编程新知 2026/4/4 10:59:41

开始新篇章

此博客发表关于 计算机技术 等方面的文章&#xff0c;欢迎友好评论交流...

编程新知 2026/4/4 10:49:35

Notepad--跨平台文本编辑器：3个简单技巧提升长期使用性能

Notepad--跨平台文本编辑器&#xff1a;3个简单技巧提升长期使用性能 【免费下载链接】notepad-- 一个支持windows/linux/mac的文本编辑器&#xff0c;目标是做中国人自己的编辑器&#xff0c;来自中国。 项目地址: https://gitcode.com/GitHub_Trending/no/notepad-- N…...

编程新知 2026/4/4 10:41:34

深入解析XSpiPs_PolledTransfer与XSpiPs_Transfer的片选信号行为差异

1. 从波形图看片选信号的关键差异 第一次用逻辑分析仪抓取SPI波形时&#xff0c;我被XSpiPs_PolledTransfer和XSpiPs_Transfer的片选信号差异惊到了。同样是发送两个字节的数据&#xff0c;前者像老式电报机一样稳定保持CS低电平&#xff0c;后者却像发摩尔斯电码似地频繁跳变。…...

编程新知 2026/4/4 10:29:31

Phi-4-mini-reasoning镜像部署实操：7.2GB模型在24GB显存设备稳定运行

Phi-4-mini-reasoning镜像部署实操&#xff1a;7.2GB模型在24GB显存设备稳定运行 1. 项目概述 Phi-4-mini-reasoning是由微软Azure AI Foundry推出的轻量级开源模型&#xff0c;专为数学推理、逻辑推导和多步解题等强逻辑任务设计。这个3.8B参数的模型虽然体积小巧&#xff0…...

编程新知 2026/4/4 8:04:15