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

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

内置数据互通机制更有利于用户在各种应用场合下实现具体的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();
	}
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

GPS信号的数字接收处理matlab仿真,包括频率点搜索,捕获跟踪,相关峰检测等步骤

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1. 频率点搜索 4.2. 捕获跟踪 4.3. 相关峰检测 5.算法完整程序工程 1.算法运行效果图预览 低信噪比下仿真结果如下: 2.算法运行软件版本 matlab2022a 3.部分核心程序 ...…

直接插入排序

一.介绍. 其基本思想为数据元素被已经放入一个已经排好的有序数组中,现插入一个元素进入该数组,按顺序(即大小关系)放进适当位置,并且其后面的元素都向后移动移位。 如图: 对于上述问题: 代码…

【AI视野·今日Sound 声学论文速览 第三十六期】Mon, 30 Oct 2023

AI视野今日CS.Sound 声学论文速览 Mon, 30 Oct 2023 Totally 7 papers 👉上期速览✈更多精彩请移步主页 Daily Sound Papers Style Description based Text-to-Speech with Conditional Prosodic Layer Normalization based Diffusion GAN Authors Neeraj Kumar, A…

湖科大计网:网络层

一、网络层概述 一、基本概念 网络层的主要任务是实现网络互连,进而实现数据包在各网络之间传输。 若只有单个网络,只需要物理层和数据链路层即可。 不同的异构网络需要路由器将其互连,路由器的每一个接口代表一个不同的网络,也区…

Windows安装nvm【node.js版本管理工具】

目录 下载安装包 安装 配置 配置node的国内镜像源 配置npm的国内镜像源 常用命令 查看可安装的node版本 安装指定的版本 查看已有的node版本列表 切换版本 下载安装包 https://github.com/coreybutler/nvm-windows/releases/tag/1.1.11 安装 安装过程就不贴了&#xff0…

leetcode刷题日志-14最长公共前缀

编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀,返回空字符串 “”。 示例 1: 输入:strs [“flower”,“flow”,“flight”] 输出:“fl” 示例 2: 输入:strs [“dog”,“raceca…

Java进阶笔记(面向对象后, 持续更新)

常用API 游戏打包成exe 考虑的因素 要有图形化界面代码要打包起来游戏用到的图片也要打包JDK也要打包 核心步骤 把所有代码打包成一个压缩包, jar后缀的压缩包把jar包转换成exe安装包把第二部的exe, 图片, JDK整合在一起, 变成最终的exe安装包 1. Math 是一个帮助我们用…

Android Studio 写一个Java调用c++ 的demo

前提条件: 本地已经配置好了ndk环境,如果没有配置好,建议参考macos 配置ndk环境-CSDN博客 这篇链接。 新建一个Empty Project 比如我这里的Project的名字是HelloJNI,包名是com.example.hellojni 然后在src目录下,右键选择Add C …

解决Requests中使用httpbin服务器问题:自定义URL的实现与验证

问题背景 在使用Python的Requests模块进行单元测试时,可能会遇到无法使用本地运行的httpbin服务器进行测试的问题。这是因为测试脚本允许通过环境变量HTTPBIN_URL指定用于测试的本地httpbin实例,但在某些测试用例中,URL是硬编码为httpbin.or…

SpringCloud -Token传递之Feign

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

提取纯色马赛克

​​​​​​ 图像预处理 将彩色图像加载到内存。 转换图像为灰度图像,以简化处理。 对灰度图像应用二值化处理,将图像中的纯色区域分为前景和背景。这可以使用阈值处理来完成。 轮廓检测 使用轮廓检测算法,例如OpenCV的 findContours 函数&…

vite+vue3+electron开发环境搭建

环境 node 18.14.2 yarn 1.22 项目创建 yarn create vite test01安装vue环境 cd test01 yarn yarn dev说明vue环境搭建成功 安装electron # 因为有的版本会报错所以指定了版本 yarn add electron26.1.0 -D安装vite-plugin-electron yarn add -D vite-plugin-electron根目…

〖大前端 - 基础入门三大核心之JS篇㊱〗- JavaScript 的DOM节点操作

说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费,如需要项目实战或者是体系化资源,文末名片加V!作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 从事过全栈研发、产品经理等工作&#xf…

专注于绘画,不受限制!尝试Growly Draw for Mac的快速绘画应用

Growly Draw Mac版是Mac平台上的一款绘画应用,它提供了简单易用的画板页面和多种色彩、画笔工具,让你可以轻松地完成作画。无论你是初学者还是专业人士,都可以在这款应用中找到适合自己的绘画方式。通过使用Growly Draw Mac版,你可…

ChatGPT + DALL·E 3

参考链接: https://chat.xutongbao.top/

基于R语言平台Biomod2模型的物种分布建模与可视化分析

!](https://img-blog.csdnimg.cn/84e1cc8c7f9b4b6ab60903ffa17d82f0.jpeg#pic_center)

​软考-高级-系统架构设计师教程(清华第2版)【第11章 未来信息综合技术(P384~P419)-思维导图】​

软考-高级-系统架构设计师教程(清华第2版)【第11章 未来信息综合技术(P384~P419)-思维导图】 课本里章节里所有蓝色字体的思维导图

Pandas 累计统计函数【cumsum、cumprod、cummax、cummin】【计算前1/2/3/…/n个数的和、积、最大值、最小值】

一、累计统计函数 函数作用cumsum计算前1/2/3/…/n个数的和cummax计算前1/2/3/…/n个数的最大值cummin计算前1/2/3/…/n个数的最小值cumprod计算前1/2/3/…/n个数的积 import numpy as np import pandas as pd# np.nan :空值 df pd.DataFrame({key1: np.arange(1…

LLM大模型 (chatgpt) 在搜索和推荐上的应用

目录 1 大模型在搜索的应用1.1 召回1.1.1 倒排索引1.1.2 倒排索引存在的问题1.1.3 大模型在搜索召回的应用 (实体倒排索引) 1.2 排序1.2.1 大模型在搜索排序应用(融入LLM实体排序) 2 大模型在推荐的应用2.1 学术界关于大模型在推荐的研究2.2 …

HttpClient示例

HttpClient官网 HttpClient - HttpClient Home 每个对应版本都有 快速开始的示例 maven项目 pom依赖 <dependencies><dependency><groupId>org.apache.httpcomponents</groupId><artifactId>httpclient</artifactId><version>4.5.…