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

Three使用WebGPU的关键TSL

news 文章来源：https://blog.csdn.net/qq_21476953/article/details/144504337 2025/5/15 10:43:49

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

【k8s集群应用】Kubernetes 容器编排系统

文章目录 Kubernetes 容器编排系统背景与发展Kubernetes 基本概念Kubernetes 集群架构与组件Kubernetes 核心组件Master 组件配置存储中心Node 组件 Kubernetes核心概念1. Pod2. Pod控制器3. Label与Label选择器4. Service5. Ingress6. Volume7. Name与Namespace K8S创建Pod资源…...

编程日记 2024/12/18 23:57:57

Unity3D仿星露谷物语开发2之工程初始化

1、依赖包安装 进入【Window -> Package Manager】 安装如下插件&#xff1a; 1&#xff09;Cinemachine 它是一套专门控制Unity Camera的模块&#xff0c;适用于各种游戏场景中物体的移动变化&#xff0c;解决了许多关于摄像机间的复杂控制&#xff0c;混合&#xff0c…...

编程日记 2024/12/18 23:55:54

Kafka篇之参数优化进而提高kafka集群性能

1. Kafka性能优化分类 Kafka集群的性能优化涉及多个方面&#xff0c;包括硬件资源、网络、配置文件参数等。 调优目标通常是为了提高吞吐量、减少延迟、提升稳定性和故障恢复能力。 以下是Kafka集群调优的常见策略&#xff0c;以及调优后的配置文件示例。 1. 硬件资源调优 C…...

编程日记 2024/12/18 23:49:46

关于SAP Router连接不稳定的改良

这个也是网上看来的&#xff0c;之前在用的时候也在想是不是建立一个长连接&#xff0c;就不至于断线。今天正好看到。 关于SAP Router连接不稳定的改良 我们在使用SAPRouter时经常会碰到断线&#xff0c;其发生原因有很多&#xff0c;如&#xff1a;网络不稳定、操作间隔时间…...

编程日记 2024/12/18 23:48:45

使用pygame做游戏（2）：2048游戏的进一步改造，以失败告终

前言 受《Python树莓派编程从零开始》里的示例启发&#xff0c;我决定将上篇的2048游戏进行“面向对象化”改造。 这次除了要建立一些对象&#xff0c;还要能有移动效果&#xff0c;并能显示中文。 另外我还发现一个bug&#xff1a;方块放满了不代表输了&#xff0c;还要检查能…...

编程日记 2024/12/18 23:45:41

【CSS in Depth 2 精译_078】12.6 调整字间距，提升可读性 + 12.7 本章小结

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第四部分 视觉增强技术 ✔️【第 12 章 CSS 排版与间距】 ✔️ 12.1 间距设置 12.1.1 使用 em 还是 px12.1.2 对行高的深入思考12.1.3 行内元素的间距设置 12.2 Web 字体12.3 谷歌字体12.4 font-fac…...

编程日记 2024/12/18 23:44:39

泷羽sec学习打卡-brupsuite7搭建IP炮台

声明 学习视频来自B站UP主 泷羽sec,如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都 与本人无关,切莫逾越法律红线,否则后果自负 关于brupsuite的那些事儿-Brup-IP炮台搭建 搭建炮台服务端安装zmap1、更新系统和安装基础依赖&#xff…...

编程日记 2024/12/18 23:41:36

使用Svelte构建轻量级应用详解

文章目录 前言一、为什么选择Svelte&#xff1f;二、快速上手Svelte三、理解Svelte的核心概念四、优化性能与用户体验五、案例研究&#xff1a;构建一个待办事项应用结语 前言 Svelte是一款新兴的前端框架&#xff0c;以其小巧的体积、高效的性能和直观的API赢得了开发者的青睐…...

编程日记 2024/12/18 23:37:31

Qt设置部件的阴影效果

QT中的比如QWidget,QLabel,QPushbutton&#xff0c;QCheckBox都可以设置阴影效果&#xff0c;就像这样&#xff1a; 以QWidget为例&#xff0c;开始尝试使用样式表的形式添加阴影&#xff0c;但没有效果&#xff0c;写法如下&#xff1a; QWidget#widget1::shadow{color: rgb…...

编程日记 2024/12/18 23:36:30

Python 助力 DBA：高效批量管理数据库服务器的多线程解决方案-多库查询汇总工具实现

批量数据库服务器连接测试与数据汇总&#xff1a;Python实现方案 作为数据库服务器运维人员&#xff0c;我们经常需要面对大量服务器的连接测试和数据汇总工作。本文将介绍一个使用Python实现的高效解决方案&#xff0c;可以帮助我们快速完成这些任务。 需求概述 从配置文件…...

编程日记 2024/12/18 23:35:29