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()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…...
ESP32-S3模组上跑通ES8388（30）
接前一篇文章：ESP32-S3模组上跑通ES8388（29） 二、利用ESP-ADF操作ES8388 2. 详细解析 上一回终于解析完了es8388_init函数的所有代码。本回回到调用它的地方，继续往下讲解。 我们是从ESP32-S3模组上跑通ES8388（7）-CSDN博客开始进入es8388_init函数，展开对于它的解析的…...
概率论得学习和整理24：EXCEL的各种图形，统计图形
目录 0 EXCEL的各种图形，统计图形 1 统计图形 / 直方图 / 其实叫 频度图 hist最合适(用原始数据直接作图) 1.1 什么是频度图 1.2 如何创建频度图，一般是只选中1列数据（1个数组） 1.3 如何修改频度图的宽度 1.4 hist图的一个特…...
WPF中依赖属性的底层和普通属性的底层有什么不一样
WPF中依赖属性的底层 在 WPF 中，依赖属性（Dependency Property）是 WPF 属性系统的核心，它支持功能强大的特性（如数据绑定、动画、样式等）。其底层实现是围绕 DependencyObject 类展开的。以下是 WPF 中依赖…...
【Qt】drawText字体大小问题探究
背景 软件的一个功能是： 打开图片在图片上绘制序号，序号的样式是圆圈内包含数字将带有序号的图片打印出来 实现思路也很简单，在屏幕上显示时重写paintEvent函数，利用QPainter完成图片和序号的绘制。打印时只需要将QPainter对应…...
Mapbox-GL 的源码解读的一般步骤
Mapbox-GL 是一个非常优秀的二三维地理引擎，随着智能驾驶时代的到来，应用也会越来越广泛，关于mapbox-gl和其他地理引擎的详细对比（比如CesiumJS），后续有时间会加更。地理首先理解 Mapbox-GL 的源码是一项复…...
【C++】高级分析 switch 语句的应用
博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 💯前言💯switch 语句的基本用法语法结构核心要点实例演示正确实现 期望输出错误实现错误输出 💯if 与 switch 语句的实现比较使用 if 语句使用 switch 语句比较分析 &am…...
活动预告 | Surface 来了#11：Windows 11 AI+ PC，释放 AI 办公设备的无限潜能
课程介绍 欢迎来到 Surface 来了第 11 期节目。 今年 5 月底，微软推出了专为 AI 体验而设计的全新 Windows PC 品类：Windows 11 AI PC。 微软通过 Windows 11 AI PC，进一步强调了 NPU 在运行设备端 AI 功能的重要性。并要求符合这一品类的…...
php基础：正则表达式
1.正则表达式 正则表达式是用于描述字符排列和匹配模式的一种语法规则。它主要用于字符串的模式分割、匹配、查找及替换操作。到目前为止，我们前面所用过的精确（文本）匹配也是一种正则表达式。 在PHP中，正则表达式一般是由正规字…...
go语言压缩[]byte数据为zlib格式的时候，耗时较多，应该怎么修改？
在Go语言中使用compress/flate包来实现Zlib格式的压缩时，如果发现压缩耗时较多，可以考虑以下几个优化方向： ### 1. 压缩级别 默认情况下，compress/flate包中的NewWriter函数使用的是默认压缩级别（BestSpeed和BestComp…...
[机器学习]AdaBoost（数学原理 + 例子解释 + 代码实战）
AdaBoost AdaBoost（Adaptive Boosting）是一种Boosting算法，它通过迭代地训练弱分类器并将它们组合成一个强分类器来提高分类性能。 AdaBoost算法的特点是它能够自适应地调整样本的权重，使那些被错误分类的样本在后续的训练中得到…...
深入了解Spring
目录 Spring基础 什么是Spring框架？ Spring 包含的模块有哪些？ Core Container AOP Data Access/Integration Spring Web Messaging Spring Test Spring,Spring MVC,Spring Boot 之间什么关系? Spring基础 什么是Spring框架？ Sp…...
jar 包如何下载
maven官网：https://mvnrepository.com/ 点击搜索，找对应搜索结果点击...
ESlint代码规范，手动与自动修复
规范说明 规则参考 - ESLint - 插件化的 JavaScript 代码检查工具 规范说明 可看到是main.js文件报错分别是第三行第30个字符，以及第七行第一个字符 后面则是规范说明，可以根据说明查找相应的规范 一.手动修正 ctrl f 可以搜索 二.自动修正 …...
利用编程获得money？
在当今数字化时代，编程技能为人们开辟了众多赚钱途径。无论你是编程新手还是经验丰富的开发者，都能在广阔的市场中找到适合自己的盈利方式。以下是一份详细的用编程赚钱指南。 一、自由职业平台 像 Upwork、Freelancer 和 Fiverr 等知名自由职业平台&am…...
设计规规范：【App 配色】
文章目录 引言I App 配色组成色彩象征 & 联想II 知识扩展设计流程图UI设计交互设计UI交互设计引言 设计规范，保持设计一致性，提高设计效率。宏观上对内统一，管理与合作变得容易。 按类型管理颜色、文本样式、图标、组件(symbol)。 蓝湖设计规范云 https://lanhuapp.co…...
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…...
F5中获取客户端ip地址(client ip)
当F5设备对其原始设置上的所有IP地址使用NAT时，连接到poo成员（nodes、backend servers）的出站连接将是NAT IP地址。 pool 成员（nodes、backend servers）将无法看到真实的客户端 ip地址，因为看到的是F5上的…...
Maven（生命周期、POM、模块化、聚合、依赖管理）详解
目录 Maven构建项目的生命周期 Maven的常用命令 POM 依赖管理 依赖导入 依赖范围设置 依赖版本维护 依赖传递 依赖冲突 解决依赖冲突的方法 使用maven提供的依赖调节原则 排除依赖，排除依赖的jar包 锁定版本 项目模块化 Maven项目的继承 Maven项目…...
电力场景绝缘子缺陷识别分割数据集labelme格式1099张3类别
数据集格式：labelme格式(不包含mask文件，仅仅包含jpg图片和对应的json文件) 图片数量(jpg文件个数)：1099 标注数量(json文件个数)：1099 标注类别数：3 标注类别名称:["brokenpart","brokeninsulator…...
css实现圆环展示百分比，根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
【WiFi帧结构】
文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成：MAC头部frame bodyFCS，其中MAC是固定格式的，frame body是可变长度。 MAC头部有frame control，duration，address1，address2，addre…...
蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练
前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)：从基础到实战的深度解析-CSDN博客，但实际面试中，企业更关注候选人对复杂场景的应对能力（如多设备并发扫描、低功耗与高发现率的平衡）和前沿技术的…...
【算法训练营Day07】字符串part1
文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接：344. 反转字符串 双指针法，两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...
ETLCloud可能遇到的问题有哪些？常见坑位解析
数据集成平台ETLCloud，主要用于支持数据的抽取（Extract）、转换（Transform）和加载（Load）过程。提供了一个简洁直观的界面，以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...
使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台
🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...
PHP 8.5 即将发布：管道操作符、强力调试
前不久，PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5！作为 PHP 语言的又一次重要迭代，PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是，借助强大的本地开发环境 ServBay&am…...
土建施工员考试：建筑施工技术重点知识有哪些？
《管理实务》是土建施工员考试中侧重实操应用与管理能力的科目，核心考查施工组织、质量安全、进度成本等现场管理要点。以下是结合考试大纲与高频考点整理的重点内容，附学习方向和应试技巧： 一、施工组织与进度管理 核心目标： 规…...
如何通过git命令查看项目连接的仓库地址？
要通过 Git 命令查看项目连接的仓库地址，您可以使用以下几种方法： 1. 查看所有远程仓库地址 使用 git remote -v 命令，它会显示项目中配置的所有远程仓库及其对应的 URL： git remote -v输出示例： origin https://…...
Qwen系列之Qwen3解读：最强开源模型的细节拆解
文章目录 1.1分钟快览2.模型架构2.1.Dense模型2.2.MoE模型 3.预训练阶段3.1.数据3.2.训练3.3.评估 4.后训练阶段S1: 长链思维冷启动S2: 推理强化学习S3: 思考模式融合S4: 通用强化学习 5.全家桶中的小模型训练评估评估数据集评估细节评估效果弱智评估和民间Arena 分析展望 如果…...