轻量封装WebGPU渲染系统示例<34>-数据驱动之Json构建场景

news2024/11/24 12:05:36

场景和数据之间的互通: 场景数据化或者数据化场景,是当前的主流场景数据构成方式。方便传输方便交换甚至是交互。

内置数据互通机制更有利于用户在各种应用场合下实现具体的3D相关的应用需求。用户只需要关心标准的或者约定好的数据定义及操作方式就能方便使用。

这样,也能方便应用GLB或者USD数据规范。

当前示例源码github地址:

https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/DataDrivenTest.ts

当前示例运行效果:

json数据:

{
	"renderer": {
		"camera": { "eye": [1100, 1100, 500], "up": [0, 1, 0] }
	},
	"entities": [
		{ "axis": { "entity": { "size": 500 } } },
		{ "sphere": { "entity": { "radius": 80, "transform": { "position": [0, 0, 200] }, "albedo": [0.9, 0.1, 0.02], "arm": { "a": 1.0, "r": 0.2, "m": 0 } } } },
		{
			"cube": {
				"entity": {
					"size": 80,
					"transform": { "position": [200, 0, 0], "scale": [2, 1.5, 3], "rotation": [-190, 0, 200] },
					"albedo": [0.1, 0.9, 0.02],
					"arm": { "a": 1.0, "r": 0.2, "m": 0 },
					"animate": {}
				}
			}
		},
		{
			"torus": {
				"entity": {
					"radius": 90,
					"axisType": 1,
					"longitudeNumSegments": 20,
					"latitudeNumSegments": 50,
					"transform": { "position": [0, 150, 0] },
					"albedo": [0.9, 0.1, 0.7],
					"arm": [1.0, 0.3, 0]
				}
			}
		},
		{
			"model": {
				"entity": {
					"url": "static/assets/draco/monkey.drc",
					"transform": { "position": [0, 320, 0], "scale": [100, 100, 100], "rotation": [0, 90, 0] },
					"albedo": [0.1, 0.7, 0.9],
					"arm": [1, 0.3, 0.1]
				}
			}
		},
		{
			"boundsFrame": {
				"entity": {
					"minPos": [-300, -300, -300],
					"maxPos": [300, 300, 300],
					"frameColor": [0.9, 1.0, 0.1]
				}
			}
		},
		{
			"gltf": { "entity": {} }
		},
		{
			"usd": { "entity": {} }
		}
	]
}

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

export class DataDrivenTest {

	private mScene = new DataDrivenRScene();
	initialize(): void {

		let url = "static/assets/scene/sceneData01.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();
	}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1224210.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

PostgreSQL 入门

文章目录 PostgreSQL介绍PostgreSQL和MySQL的区别PostgreSQL的安装PostgreSQL的配置远程连接配置配置数据库的日志 PostgreSQL基本操作用户操作权限操作 图形化界面安装总结 PostgreSQL介绍 PostgreSQL是一个功能强大的 开源 的关系型数据库,底层基于C实现。其开源…

Sam Altman 被罢免细节曝光,投资 100+ 公司或成「话柄」?

2022 年 11 月,ChatGPT 发布掀起 AI 狂潮。时隔 1 年,2023 年 11 月,ChatGPT 之父、Sam Altman 的一项人事巨变,再次掀起了一场 AI 界的风暴,只是这次并不是技术革命,而是 OpenAI 巨头换帅——Sam Altman 被…

YOLO目标检测——烟雾检测数据集下载分享【含对应voc、coco和yolo三种格式标签】

实际项目应用:烟雾检测数据集可用于监控烟雾情况,实现火灾的早期预警。数据集说明:烟雾检测数据集,真实场景的高质量图片数据,数据场景丰富,含烟雾1个类别标签说明:使用lableimg标注软件标注&am…

QtCreator开发环境的安装和配置

QtCreator开发环境的安装和配置 介绍下载与安装环境介绍示例新建工程示例程序 帮助模式Qt Designer(设计师)Qt Linguist(预言家)结论 介绍 Qt Creator是一个跨平台、完整的集成开发环境(IDE),专门用于Qt开发。它包含了完整的编辑器、调试器和…

数据结构 栈与队列详解!!

一.栈 关于内存中的栈和数据结构中的栈是不同的,本章着重讲的是数据结构的栈。 这是一张关于栈的表达图。从图中可以看出栈很像是一副卡牌,发牌时只能从上取出,即出栈。 而入栈则是像你出牌后,要把你出的牌压在上一张出的牌上面。…

Android跨进程通信,IPC,RPC,Binder系统,C语言应用层调用

文章目录 Android跨进程通信,IPC,RPC,Binder系统,C语言应用层调用()1.概念2.流程3.bctest.c3.1 注册服务,打开binder驱动3.2 获取服务 4.binder_call Android跨进程通信,IPC&#xf…

Swagger示例

对于项目完成后不用写文档,好处还是蛮大的 不需要关注项目其他 只关注接口与实体类即可 SpringBoot项目 依赖 <!--Swagger依赖--> <dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId><version…

Vue3 插槽 v-slot

插槽 视频链接&#xff1a;尚硅谷vue-插槽章节 不使用插槽的情况下 结果&#xff1a; 1 默认插槽 结果&#xff1a; 2 具名插槽 #b是v-slot:b 的缩写 顾名思义就是指着名字去插入 结果&#xff1a; 3 作用域插槽 可以传递数据的插槽&#xff0c;子组件可以将数据回…

​软考-高级-系统架构设计师教程(清华第2版)【第15章 面向服务架构设计理论与实践(P527~554)-思维导图】​

软考-高级-系统架构设计师教程&#xff08;清华第2版&#xff09;【第15章 面向服务架构设计理论与实践&#xff08;P527~554&#xff09;-思维导图】 课本里章节里所有蓝色字体的思维导图

经典ctf ping题目详解 青少年CTF-WEB-PingMe02

题目环境&#xff1a; 根据题目名称可知 这是一道CTF-WEB方向常考的知识点&#xff1a;ping地址 随便ping一个地址查看接受的数据包?ip0.0.0.0 有回显数据&#xff0c;尝试列出目录文件 堆叠命令使用’;作为命令之间的连接符&#xff0c;当上一个命令完成后&#xff0c;继续执…

【数字人】7、GeneFace++ | 使用声音驱动的面部运动系数作为 condition 来指导 NeRF 重建说话头

文章目录 一、背景二、相关工作2.1 唇形同步的 audio-to-motion2.2 真实人像渲染 三、方法3.1 对 GeneFace 的继承3.2 GeneFace 的结构3.2.1 Pitch-Aware Audio-to-Motion Transform3.2.2 Landmark Locally Linear Embedding3.2.3 Instant Motion-to-Video Rendering 四、效果 …

谷歌投资Character.AI,展现AI领域的战略布局和创新能力

谷歌&#xff08;Google&#xff09;作为全球最大的互联网公司之一&#xff0c;一直在人工智能&#xff08;AI&#xff09;领域发挥着引领和推动的作用。近日&#xff0c;据消息人士透露&#xff0c;谷歌正与人工智能初创公司 Character.AI 进行投资谈判&#xff0c;计划投资数…

前端 js 之 promise( 第一版 23.11.18) 09

感觉自己好笨&#xff0c;知识点表达的不够明晰&#xff0c;也正是因为如此&#xff0c;说明有很大的进步空间&#xff0c;更要在此努力&#xff01; 文章目录 前言一、作用二、使用步骤三、promise 类四、promise 方法 前言 每一个新技术的出现&#xff0c;都是解决原有技术上…

Linux网络——HTTP

一.应用层 我们程序员写的一个个解决我们实际问题, 满足我们日常需求的网络程序, 都是在应用层. 我们上一次写的网络版本计算器就是一个应用层的网络程序。 我们约定了数据的读取&#xff0c;一端发送时构造的数据, 在另一端能够正确的进行解析, 就是ok的. 这种约定, 就是应…

电子电器架构 —— 车载网关边缘节点路由转发策略

电子电器架构 —— 车载网关边缘节点路由转发策略 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 PS:小细节,本文字数5000+,详细描述了网关在车载框架中的具体性能设置。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 没有人关注你。也无…

SpringCloud -Token传递之Feign

目录 方法一 RequestHeader 方法二 使用Feign的Interceptor 步骤一 实现RequestInterceptor接口 步骤二&#xff1a;配置Feign 通常微服务对于用户认证信息解析有两种方案 在 gateway 就解析用户的 token 然后路由的时候把 userId 等相关信息添加到 header 中传递下去。在…

观测云助力跨境电商大幅提高加载性能

话不多说&#xff0c;先上结果 什么是用户体验 用户体验基本包含访问网站的性能、可用性和正确性。通俗的讲&#xff0c;就是一把通过用户访问测量【设计者】意图的尺子。 用户体验的基本价值 如果正确实施了终端用户体验&#xff0c;可以第一时间发现&#xff0c;确认影响了…

腾讯云服务器新用户优惠有哪些?腾讯云服务器新人优惠整理汇总

你们是否曾经幻想过拥有一台属于自己的服务器&#xff0c;却因为价格而望而却步呢&#xff1f;今天&#xff0c;我要告诉你一个好消息——腾讯云服务器现在针对新用户推出了一系列的优惠政策&#xff0c;让你可以用超低的价格购买到性能强大的服务器&#xff01; 首先&#xf…

后端老项目迁移方法

老项目迁移方法 需求&#xff1a; 因某个模块MySQL表结构、表关系 错乱复杂&#xff0c;而且其他模块的代码也在操作这个模块的数据库 耦合严重 导致Web工程代码紊乱、不易理解、性能低下&#xff0c; 故在 系统由A JavaWeb工程迁移至B工程 时&#xff0c;重构MySQL表结构、表…

LaTeX 数学公式常见问题及解决方案

本文汇总了博主在使用 LaTeX 写文档过程中遇到的所有数学公式常见问题及对应的 LaTeX 解决方案 持续更新... 目录 1. 连等式2. 公式重新开始编号2.1 图片/表格重新编号 1. 连等式 在数学公式推导过程中常常会遇到如 Figure 1 所示的连等式&#xff0c;一般需要保证等号或者不等…