轻量封装WebGPU渲染系统示例<52>- Json数据描述材质、纹理等3D渲染场景信息

本文主要是介绍轻量封装WebGPU渲染系统示例<52>- Json数据描述材质、纹理等3D渲染场景信息,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

当前示例源码github地址:

https://github.com/vilyLei/voxwebgpu/blob/feature/material/src/voxgpu/sample/DataDrivenScene3.ts

当前示例运行效果:

Json数据:

{"renderer": {"mtplEnabled": true,"camera": {"eye": [1100,1100,500],"up": [0,1,0]}},"resource": {"textures": [{"name": "plastic","list": [{"albedo": {"url": "static/assets/pbr/plastic/albedo.jpg"}},{"normal": {"url": "static/assets/pbr/plastic/normal.jpg"}},{"ao": {"url": "static/assets/pbr/plastic/ao.jpg"}},{"roughness": {"url": "static/assets/pbr/plastic/roughness.jpg"}},{"metallic": {"url": "static/assets/pbr/plastic/metallic.jpg"}},{"specularEnv": {}}]},{"name": "rusted_iron","list": [{"albedo": {"url": "static/assets/pbr/rusted_iron/albedo.jpg"}},{"normal": {"url": "static/assets/pbr/rusted_iron/normal.jpg"}},{"ao": {"url": "static/assets/pbr/rusted_iron/ao.jpg"}},{"roughness": {"url": "static/assets/pbr/rusted_iron/roughness.jpg"}},{"metallic": {"url": "static/assets/pbr/rusted_iron/metallic.jpg"}},{"specularEnv": {}}]},{"name": "wall","list": [{"albedo": {"url": "static/assets/pbr/wall/albedo.jpg"}},{"normal": {"url": "static/assets/pbr/wall/normal.jpg"}},{"ao": {"url": "static/assets/pbr/wall/ao.jpg"}},{"roughness": {"url": "static/assets/pbr/wall/roughness.jpg"}},{"metallic": {"url": "static/assets/pbr/wall/metallic.jpg"}},{"specularEnv": {}}]}]},"scene": {"light": {"pointLights": [{"position": [0,190,0],"color": [5,0,0],"factor1": 0.00001,"factor2": 0.00002}],"directionLights": [{"direction": [-1,-1,0],"color": [0.5,0.5,0.5]}],"spotLights": [{"position": [-200,600,100],"direction": [2,-1,-0.5],"color": [5,10,0],"degree": 50,"factor1": 0.00001,"factor2": 0.00002}]},"shadow": {"intensity": 0.4,"radius": 4},"fog": {"color": [0.3,0.7,0.2]}},"entities": [{"entityType": "plane","axisType": 1,"extent": [-600,-600,1200,1200],"transform": {"position": [0,0,0]},"materials": [{"type": "default","lighting": true,"shadow": false,"shadowReceived": true,"fogging": true,"arms": [1,0.8,0.2],"albedo": [0.7,0.6,0.5],"uvParam": [3,3,0,0],"textures": 2}]},{"entityType": "sphere","radius": 80,"transform": {"position": [0,100,200]},"materials": [{"type": "default","lighting": true,"shadow": true,"shadowReceived": true,"fogging": true,"arms": [1,0.9,0.2],"albedo": [0.7,0.8,0.5],"emissive": [0.5,0.5,0.5],"textures": 0}]},{"entityType": "cube","size": 80,"transform": {"position": [220,130,-10],"scale": [2,1.5,3],"rotation": [-190,0,200]},"materials": [{"type": "default","lighting": true,"shadow": true,"shadowReceived": true,"fogging": true,"arms": [1,0.4,0.2],"albedo": [0.3,0.7,0.8],"uvParam": [2,2,0,0],"textures": 1}]},{"entityType": "torus","radius": 150,"axisType": 1,"rings": 50,"segments": 30,"transform": {"position": [0,230,0]},"materials": [{"type": "default","lighting": true,"shadow": true,"shadowReceived": true,"fogging": true,"arms": [1,0.6,0.2],"albedo": [1.3,0.9,1.3],"uvParam": [8,2,0,0],"textures": 2}]},{"entityType": "model","url": "static/assets/draco/monkey.drc","transform": {"position": [0,380,0],"scale": [100,100,100],"rotation": [0,90,0]},"materials": [{"type": "default","lighting": true,"shadow": true,"shadowReceived": true,"fogging": true,"arms": [1,0.5,0.2],"albedo": [1.6,0.9,1.8],"textures": 1}]},{"entityType": "cube","size": 2050,"normalScale": -1,"materials": [{"type": "default","lighting": true,"fogging": true,"arms": [1,0.3,0.2],"albedo": [0.3,0.3,0.7],"faceCullMode": "front"}]},{"gltf": {"entity": {}}},{"usd": {"entity": {}}}]
}

此示例基于此渲染系统实现,当前示例TypeScript源码如下:


export class DataDrivenScene3 {private mScene = new DataDrivenRScene();initialize(): void {console.log("DataDrivenScene3::initialize() ...");let url = "static/assets/scene/sceneData03.json";new HttpFileLoader().loadJson(url,(json: object, url: string): void => {console.log("json: ", json);this.initScene(json);});}private initScene(json: object): void {this.mScene.initialize(json);this.initEvent();}private initEvent(): void {const rc = this.mScene;new MouseInteraction().initialize(rc.rscene, 0, false).setAutoRunning(true);}run(): void {this.mScene.run();}
}

这篇关于轻量封装WebGPU渲染系统示例<52>- Json数据描述材质、纹理等3D渲染场景信息的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/518681

相关文章

防止Linux rm命令误操作的多场景防护方案与实践

《防止Linuxrm命令误操作的多场景防护方案与实践》在Linux系统中,rm命令是删除文件和目录的高效工具,但一旦误操作,如执行rm-rf/或rm-rf/*,极易导致系统数据灾难,本文针对不同场景... 目录引言理解 rm 命令及误操作风险rm 命令基础常见误操作案例防护方案使用 rm编程 别名及安全删除

Python中logging模块用法示例总结

《Python中logging模块用法示例总结》在Python中logging模块是一个强大的日志记录工具,它允许用户将程序运行期间产生的日志信息输出到控制台或者写入到文件中,:本文主要介绍Pyt... 目录前言一. 基本使用1. 五种日志等级2.  设置报告等级3. 自定义格式4. C语言风格的格式化方法

Spring 中的切面与事务结合使用完整示例

《Spring中的切面与事务结合使用完整示例》本文给大家介绍Spring中的切面与事务结合使用完整示例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考... 目录 一、前置知识:Spring AOP 与 事务的关系 事务本质上就是一个“切面”二、核心组件三、完

MyBatis-plus处理存储json数据过程

《MyBatis-plus处理存储json数据过程》文章介绍MyBatis-Plus3.4.21处理对象与集合的差异:对象可用内置Handler配合autoResultMap,集合需自定义处理器继承F... 目录1、如果是对象2、如果需要转换的是List集合总结对象和集合分两种情况处理,目前我用的MP的版本

Three.js构建一个 3D 商品展示空间完整实战项目

《Three.js构建一个3D商品展示空间完整实战项目》Three.js是一个强大的JavaScript库,专用于在Web浏览器中创建3D图形,:本文主要介绍Three.js构建一个3D商品展... 目录引言项目核心技术1. 项目架构与资源组织2. 多模型切换、交互热点绑定3. 移动端适配与帧率优化4. 可

sky-take-out项目中Redis的使用示例详解

《sky-take-out项目中Redis的使用示例详解》SpringCache是Spring的缓存抽象层,通过注解简化缓存管理,支持Redis等提供者,适用于方法结果缓存、更新和删除操作,但无法实现... 目录Spring Cache主要特性核心注解1.@Cacheable2.@CachePut3.@Ca

C#下Newtonsoft.Json的具体使用

《C#下Newtonsoft.Json的具体使用》Newtonsoft.Json是一个非常流行的C#JSON序列化和反序列化库,它可以方便地将C#对象转换为JSON格式,或者将JSON数据解析为C#对... 目录安装 Newtonsoft.json基本用法1. 序列化 C# 对象为 JSON2. 反序列化

QT Creator配置Kit的实现示例

《QTCreator配置Kit的实现示例》本文主要介绍了使用Qt5.12.12与VS2022时,因MSVC编译器版本不匹配及WindowsSDK缺失导致配置错误的问题解决,感兴趣的可以了解一下... 目录0、背景:qt5.12.12+vs2022一、症状:二、原因:(可以跳过,直奔后面的解决方法)三、解决方

MySQL中On duplicate key update的实现示例

《MySQL中Onduplicatekeyupdate的实现示例》ONDUPLICATEKEYUPDATE是一种MySQL的语法,它在插入新数据时,如果遇到唯一键冲突,则会执行更新操作,而不是抛... 目录1/ ON DUPLICATE KEY UPDATE的简介2/ ON DUPLICATE KEY UP

Python中Json和其他类型相互转换的实现示例

《Python中Json和其他类型相互转换的实现示例》本文介绍了在Python中使用json模块实现json数据与dict、object之间的高效转换,包括loads(),load(),dumps()... 项目中经常会用到json格式转为object对象、dict字典格式等。在此做个记录,方便后续用到该方