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…...
浅谈 React Hooks
React Hooks 是 React 16.8 引入的一组 API，用于在函数组件中使用 state 和其他 React 特性（例如生命周期方法、context 等）。Hooks 通过简洁的函数接口，解决了状态与 UI 的高度解耦，通过函数式编程范式实现更灵活 Rea…...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞！！！ 抽象 现代智能交通系统 （ITS） 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 （…...
基于服务器使用 apt 安装、配置 Nginx
🧾 一、查看可安装的 Nginx 版本 首先，你可以运行以下命令查看可用版本： apt-cache madison nginx-core输出示例： nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...
关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述：iview使用table 中type: "index",分页之后 ，索引还是从1开始，试过绑定后台返回数据的id, 这种方法可行，就是后台返回数据的每个页面id都不完全是按照从1开始的升序，因此百度了下，找到了…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包（Closure）？闭包有什么应用场景和潜在问题？2.解释 JavaScript 的作用域链（Scope Chain） 二、原型与继承3.原型链是什么？如何实现继承&a…...
（转）什么是DockerCompose?它有什么作用？
一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用，而无需手动一个个创建和运行容器。 Compose文件是一个文本文件，通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...
【论文阅读28】-CNN-BiLSTM-Attention-（2024）
本文把滑坡位移序列拆开、筛优质因子，再用 CNN-BiLSTM-Attention 来动态预测每个子序列，最后重构出总位移，预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵（S…...
【Oracle】分区表
个人主页：Guiat 归属专栏：Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...
Java多线程实现之Thread类深度解析
Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...