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

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>
http://www.lryc.cn/news/505598.html

相关文章:

  • ESP32-S3模组上跑通ES8388(30)
  • 概率论得学习和整理24:EXCEL的各种图形,统计图形
  • WPF中依赖属性的底层和普通属性的底层有什么不一样
  • 【Qt】drawText字体大小问题探究
  • Mapbox-GL 的源码解读的一般步骤
  • 【C++】高级分析 switch 语句的应用
  • 活动预告 | Surface 来了#11:Windows 11 AI+ PC,释放 AI 办公设备的无限潜能
  • php基础:正则表达式
  • go语言压缩[]byte数据为zlib格式的时候,耗时较多,应该怎么修改?
  • [机器学习]AdaBoost(数学原理 + 例子解释 + 代码实战)
  • 深入了解Spring
  • jar 包如何下载
  • ESlint代码规范,手动与自动修复
  • 利用编程获得money?
  • 设计规规范:【App 配色】
  • react 使用 PersistGate 白屏解决方案
  • F5中获取客户端ip地址(client ip)
  • Maven(生命周期、POM、模块化、聚合、依赖管理)详解
  • 电力场景绝缘子缺陷识别分割数据集labelme格式1099张3类别
  • 【k8s集群应用】Kubernetes 容器编排系统
  • Unity3D仿星露谷物语开发2之工程初始化
  • Kafka篇之参数优化进而提高kafka集群性能
  • 关于SAP Router连接不稳定的改良
  • 使用pygame做游戏(2):2048游戏的进一步改造,以失败告终
  • 【CSS in Depth 2 精译_078】12.6 调整字间距,提升可读性 + 12.7 本章小结
  • 泷羽sec学习打卡-brupsuite7搭建IP炮台
  • 使用Svelte构建轻量级应用详解
  • Qt设置部件的阴影效果
  • Python 助力 DBA:高效批量管理数据库服务器的多线程解决方案-多库查询汇总工具实现
  • vue响应式数据-修改对象的属性值,视图不更新