轻量封装WebGPU渲染系统示例<1>-彩色三角形(源码)

news2024/11/16 10:43:01

当前示例源码github地址: https://github.com/vilyLei/voxwebgpu/blob/version-1.01/src/voxgpu/sample/VertColorTriangle.ts

此示例渲染系统实现的特性:

1. 用户态与系统态隔离。

2. 高频调用与低频调用隔离。

3. 面向用户的易用性封装。

4. 渲染数据和渲染机制分离。

5. 用户操作和渲染系统调度并行机制。

当前示例运行效果:

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


const positions = new Float32Array([-1.0, -1.0, 0.0, 1.0, -1.0, 0.0, 0.0, 1.0, 0.0]);
const colors = new Float32Array([1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0]);

export class VertColorTriangle {

	renderer = new WGRenderer();

	initialize(): void {
		console.log("VertColorTriangle::initialize() ...");
		this.createEntity();
	}
	private createEntity(): void {
		const renderer = this.renderer;

		const shdSrc = {
			vertShaderSrc: { code: vertWGSL, uuid: "vtxShdCode" },
			fragShaderSrc: { code: fragWGSL, uuid: "fragShdCode" }
		};
		const material = new WGMaterial({
			shadinguuid: "shapeMaterial",
			shaderCodeSrc: shdSrc
		});

		const geometry = new WGGeometry().addAttributes([
			{ shdVarName: "position", data: positions, strides: [3] },
			{ shdVarName: "color", data: colors, strides: [3] }
		]);

		const entity = new Entity3D(false);
		entity.materials = [material];
		entity.geometry = geometry;
		entity.applyCamera(this.renderer.camera);

		renderer.addEntity(entity);
	}
	run(): void {
		this.renderer.run();
	}
}

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

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

相关文章

FL Studio21最新中文版DAW数字音频工作站

大概从去年开始,“电子音乐制作技术”成为越来越常见的说法。一开始我们觉得这种说法太过于笼统,因为电子音乐制作的技术早已不限于用在电子音乐,它更像是现代音乐制作技术。毕竟现代化的90%的音乐都是这么做出来的。 对,我们说的…

如何使用 Rask AI 进行视频本地化

链接: Login or Sign up Rask AI 是一个提供视频本地化服务的平台,支持 60 多种语言。该服务的主要功能包括: VoiceClone:利用 AI 生成来自原始影片发言人的语音,让你可以将其用作全球范围内品牌形象的一部分。Mul…

如何做到在 5 分钟之内将应用大小减少 60% 的?

移动设备的资源总是有限的。有限的电量,有限的存储,有限的处理能力,有限的内存,有限的网络带宽……无论你面对的是 Android 还是 iOS,这都是真理。 在前几个月,我在开发一个安卓应用。当有人尝试用错误的密…

蓝桥杯 第 2 场算法双周赛 第3题 摆玩具【算法赛】 c++ 贪心

题目 摆玩具【算法赛】https://www.lanqiao.cn/problems/5888/learning/?contest_id145 问题描述 小蓝是一个热爱收集玩具的小伙子,他拥有 n 个不同的玩具。 这天,他把 n 个玩具按照高度顺序从矮到高摆放在了窗台上,然后,他希…

JetBrains ReSharper Ultimate 2023.2.2

JetBrains ReSharper Ultimate 国外知名软件公司JetBrains专为软件开发软件编程人员制作的各类应用工具箱,如;PHP集成开发工具PHPStorm,Java整合开发工具IntelliJ IDEA,Python集成开发工具PyCharm,HTML/CSS/JS开发工具…

conda虚拟环境笔记收录

1、安装conda 增加执行权限: chmod x Anaconda3-2023.03-1-Linux-x86_64.sh 开始执行:./Anaconda3-2023.03-1-Linux-x86_64.sh2、查看版本 conda --version3、查看当前虚拟环境 虚拟环境和全局环境有前缀可见 如果不进行设置,重新启动就变成…

hdlbits系列verilog解答(移位寄存器)-23

文章目录 一、问题描述二、verilog源码三、仿真结果 一、问题描述 您将获得一个具有两个输入和一个输出的模块 my_dff (实现 D 触发器)。实例化其中的三个,然后将它们链接在一起以形成长度为 3 的移位寄存器。端口 clk 需要连接到所有实例。…

uniapp 在 Android Studio 模拟器中运行项目

在开发App时,无论是使用 Flutter 还是 React native,还是使用uni-app 开发跨端App时,总是需要运行调试。一般调试分为两种。 第一:真机调试 第二:模拟器调试 真机调试的好处是可以看到更好的效果,缺点就是…

2023年中国冷风机分类、销量及市场规模分析[图]

冷风机通常是指一种设备,用于通过冷却空气来调节室内或工业环境的温度。这些设备通过循环空气并通过冷却元件(如冷却盘或冷凝器)来降低空气的温度,从而实现温度控制。冷风机在家庭、商业和工业领域都有广泛的应用,可以…

Linux Mint 21.2 “EDGE” ISO 发布

Linux Mint 团队近日宣布发布最新 Linux Mint 21.2 “Victoria “版本的 “EDGE “ISO 版本,并提供下载。 “这个镜像是为那些硬件太新而无法启动 Linux Mint 21.x 中包含的 5.15 LTS 内核的用户制作的。 Linux Mint 21.2 “Victoria “于2023年7月中旬发布&#x…

【开源】基于SpringBoot的城市桥梁道路管理系统的设计和实现

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、系统展示四、核心代码4.1 查询城市桥梁4.2 新增城市桥梁4.3 编辑城市桥梁4.4 删除城市桥梁4.5 查询单个城市桥梁 五、免责说明 一、摘要 1.1 项目介绍 基于VueSpringBootMySQL的城市桥梁道路管理系统,支持…

JAVA实现智能停车场管理系统 开源

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容A. 车主端功能B. 停车工作人员功能C. 系统管理员功能1. 停车位模块2. 车辆模块3. 停车记录模块4. IC卡模块5. IC卡挂失模块 三、界面展示3.1 登录注册3.2 车辆模块3.3 停车位模块3.4 停车数据模块3.5 IC卡档案模块3.6 IC卡挂…

了解RAID5和RAID6的区别,让数据存储更安全

RAID(Redundant array of inexpensive disk)通过给磁盘阵列增加冗余磁盘提高了磁盘阵列的可靠性。 所谓冗余磁盘,即该磁盘不用于存放实际数据,而用来存放一些冗余信息,而这些冗余信息可用来在必要的时候进行有效数据恢…

在docker中创建EMQX 加数据卷

1、从虚拟容器中复制出来文件 docker run --rm emqx/emqx:5.3.0 sh -c cd /opt/emqx && tar -c etc | tar -C $PWD -x 2、将这三个文件夹分别赋予最高权限,也可以777可以755 chmod -R 777 data chmod -R 777 etc chmod -R 777 log 3、创建容器代码 docke…

【鸿蒙软件开发】ArkTS基础组件之Select(下拉菜单)、Slider(滑动条)

文章目录 前言一、Select下拉菜单1.1 子组件1.2 接口参数 1.3 属性1.4 事件1.5 示例代码 二、Slider2.1 子组件2.2 接口参数:SliderStyle枚举说明 2.3 属性2.4 事件SliderChangeMode枚举说明 2.5 示例代码 总结 前言 Select组件:提供下拉选择菜单&#…

【Java基础】JDK8-17新特性

JDK8-17新特性 文章目录 JDK8-17新特性1. 如何学习新特性2. Java8新特性:Lambda表达式3. Java8新特性:函数式(Functional)接口3.1 什么是函数式接口3.2 如何理解函数式接口3.3 举例3.4 Java 内置函数式接口3.4.1 之前的函数式接口3.4.2 四大核心函数式接…

Vue3.3指北(三)

Vue3.3指北 1、Vue2和Vue31.1、 Vue2 选项式 API vs Vue3 组合式API1.2、Vue3的优势 2、组合式API - setup2.1、setup选项2.2、setup中写代码的特点2.3、<script setup>语法糖2.4、props和context 3、组合式API - reactive和ref函数3.1、reactive3.2、ref3.3、reactive 对…

2023年中国背光显示面板分类、市场规模及企业分析[图]

背光显示面板行业&#xff0c;指生产背光显示面板及其相关配件的制造商和供应商&#xff0c;这些制造商和供应商主要为电视机、电脑显示器、智能手机等电子产品提供背光显示面板及配件。背光显示面板是一种电子器件&#xff0c;其功能主要是将电信号转化为视觉图像&#xff0c;…

2023年中国调音台产业链、产量及市场规模分析[图]

调音台是一种专业音频设备&#xff0c;用于混音、处理和控制音频信号。它通常用于音乐制作、现场演出、录音室以及广播等场景中。调音台允许用户调整不同声音来源的音频信号&#xff0c;使其在混音过程中达到理想的音质和平衡。调音台按信号出来方式可分为&#xff1a;模拟式调…

业务设计——注册用户如何防止缓存穿透

什么是缓存穿透 缓存穿透是指在使用缓存系统时&#xff0c;恶意或频繁地请求一个不存在于缓存中的数据&#xff0c;导致每次请求都需要查询数据库或其他数据存储系统&#xff0c;从而绕过了缓存的效果&#xff0c;严重影响系统性能。 这种情况通常发生在恶意攻击、大量请求缓存…