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…...
UE5 学习系列（二）用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇，在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下： 【Note】：如果你已经完成安装等操作，可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作，重…...
深入剖析AI大模型：大模型时代的 Prompt 工程全解析
今天聊的内容，我认为是AI开发里面非常重要的内容。它在AI开发里无处不在，当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"，或者让翻译模型 "将这段合同翻译成商务日语" 时，输入的这句话就是 Prompt。…...
系统设计 --- MongoDB亿级数据查询优化策略
系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log，共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题，不能使用ELK只能使用…...
el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...
cf2117E
原题链接：https://codeforces.com/contest/2117/problem/E 题目背景： 给定两个数组a,b，可以执行多次以下操作：选择 i (1 < i < n - 1)，并设置 或，也可以在执行上述操作前执行一次删除任意 和 。求…...
零基础设计模式——行为型模式 - 责任链模式
第四部分：行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习！行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想：使多个对象都有机会处…...
大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型（LLM）参数规模的增长，推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长，而KV缓存的内存消耗可能高达数十GB（例如Llama2-7B处理100K token时需50GB内存&a…...
CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)
漏洞概览 漏洞名称：Apache Flink REST API 任意文件读取漏洞CVE编号：CVE-2020-17519CVSS评分：7.5影响版本：Apache Flink 1.11.0、1.11.1、1.11.2修复版本：≥ 1.11.3 或 ≥ 1.12.0漏洞类型：路径遍历&#x…...
【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配
目录 一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分 二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例 三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载 四、智能指针…...
华为OD机试-最短木板长度-二分法(A卷,100分)
此题是一个最大化最小值的典型例题， 因为搜索范围是有界的，上界最大木板长度补充的全部木料长度，下界最小木板长度； 即left0,right10^6; 我们可以设置一个候选值x(mid)，将木板的长度全部都补充到x，如果成功…...