轻量封装WebGPU渲染系统示例<31>- 若干线条对象(源码)

线条对象包括:

        AABB包围盒,OBB包围盒, 曲线,直线,圆,坐标轴,视锥体线框,矩形网格等。

当前示例源码github地址:

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

当前示例运行效果:

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

xport class LineObjectTest {
	private mRscene = new RendererScene();
	initialize(): void {

		document.oncontextmenu = function (e) {
			e.preventDefault();
		}
		this.initEvent();
		this.initScene();
	}
	private initEvent(): void {
		const rc = this.mRscene;
		rc.addEventListener(MouseEvent.MOUSE_DOWN, this.mouseDown);
		new MouseInteraction().initialize(rc, 0, false).setAutoRunning(true);
	}

	private testOBB(): void {
		const rsc = this.mRscene;

		let box = new BoxEntity();
		box.setColor([0.8, 0.2, 0.6]);
		box.transform.setRotationXYZ(70,150,0);
		box.transform.setXYZ(100, 100, 500);
		rsc.addEntity( box );

		let obb = new OBB();
		obb.fromAABB(box.getLocalBounds(), box.transform.getMatrix());

		let boxFrame = new BoundsFrameEntity({obb, obbFrameScale: 1.01});
		boxFrame.setColor([0.1, 0.8, 0.7]);
		rsc.addEntity( boxFrame );
	}
	private testFrustumFrame( ): void {

		const cam = new Camera({eye: new Vector3(500, 500, -300), near: 50, far: 200});
		const rsc = this.mRscene;
		let frameColors = [[1.0, 0.0, 1.0], [0.0, 1.0, 1.0], [1.0, 0.0, 1.0], [0.0, 1.0, 1.0]];
		let boxFrame = new BoundsFrameEntity({ posList8: cam.getWordFrustumVtxArr(), frameColors });
		rsc.addEntity( boxFrame );
	}
	private mouseDown = (evt: MouseEvent): void => {};

	private createCurve(): void {
		const rsc = this.mRscene;

		let total = 100;
		let linePositions = new Array(total);
		let lineColors = new Array(total);
		for(let i = 0; i < total; ++i) {
			const factor = Math.sin(20.0 * i / total);
			linePositions[i] = [350, factor * 100 + 100 , -300 + i * 10.0];
			lineColors[i] = [factor * 0.5 + 0.5, 1.0 - (factor * 0.5 + 0.5), 1.0];
		}
		let line = new Line3DEntity({linePositions, lineColors});
		rsc.addEntity( line );

		let circleLine = createLineCircleXOZ( 100 );
		circleLine.transform.setY(100.0);
		circleLine.color = [0.1, 0.5, 1.0];
		rsc.addEntity( circleLine );

	}
	private initScene(): void {

		const rsc = this.mRscene;

		let color = new Color4().toBlack().setColor([1.0]);
		let sph = new SphereEntity();
		sph.transform.setXYZ(-200, 200, -300);
		rsc.addEntity( sph );
		sph.color = color;

		this.createCurve();

		let gridPlane = new RectLineGridEntity();
		gridPlane.color = [0.2, 0.3, 0.1];
		rsc.addEntity( gridPlane );

		let axis = new AxisEntity({axisLength: 300});
		axis.transform.setY(1.5);
		rsc.addEntity( axis );

		this.testOBB();

		this.testFrustumFrame();

		let boxFrame = new BoundsFrameEntity({bounds: sph.getGlobalBounds()});
		rsc.addEntity( boxFrame );

		let tor = new TorusEntity();
		tor.color = [0.1, 0.8, 0.3];
		tor.transform.setXYZ(-300, 200, 300);
		tor.transform.setRotationXYZ(60, 130, 70);
		rsc.addEntity( tor );
		boxFrame = new BoundsFrameEntity({bounds: tor.getGlobalBounds()});
		rsc.addEntity( boxFrame );
		let obb = new OBB();
		obb.fromAABB(tor.getLocalBounds(), tor.transform.getMatrix());
		boxFrame = new BoundsFrameEntity({obb, obbFrameScale: 1.01});
		boxFrame.color = [0.6, 0.8, 0.3];
		rsc.addEntity( boxFrame );

		boxFrame = new BoundsFrameEntity({minPos: new Vector3(200, 200, 400), maxPos: new Vector3(300, 300, 450)});
		boxFrame.color = [1.0, 0.2, 0.6];
		rsc.addEntity( boxFrame );

	}

	run(): void {
		this.mRscene.run();
	}
}

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

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

相关文章

rk3588 usb网络共享连接

出门在外总会遇到傻 X 地方 没有能连接公网的 网口给香橙派连网 而我的香橙派5plus 没有wifi模块。。。话不多说 在手机上看一眼手机的mac地址&#xff0c; 在rk3588 上执行以下命令&#xff1a; sudo ifconfig usb0 down sudo ifconfig usb0 hw ether 58:F2:FC:5D:D4:7A //该m…

【备忘】ChromeDriver 官方下载地址 Selenium,pyppetter依赖

https://googlechromelabs.github.io/chrome-for-testing/#stable windows系统选择win64版本下载即可

口袋参谋:99.99%的商家,都不知道这个选品神器!!!

​至少有99.99%的商家是不知道如何选品的&#xff1f;很多人都是看人家卖什么&#xff0c;自己就卖什么&#xff1f;就比如卖连衣裙的&#xff0c;试问咱们卖之前都不做一下调查吗&#xff1f; 现在同质化的商品太多了&#xff0c;随便搜一个&#xff0c;就有成千上万的竞争者…

论文十问:ResNet(Deep Residual Learning for Image Recognition)

文章目录 1. 论文试图解决什么问题?2. 这是否是一个新的问题?3. 这篇文章要验证一个什么科学假设?4. 有哪些相关研究&#xff1f;如何归类&#xff1f;谁是这一课题在领域内值得关注的研究员&#xff1f;5. 论文中提到的解决方案之关键是什么?6. 论文中的实验是如何设计的?…

[文件读取]webgrind 文件读取 (CVE-2018-12909)

1.1漏洞描述 漏洞编号CVE-2018-12909漏洞类型文件读取漏洞等级⭐⭐⭐漏洞环境VULFOCUS攻击方式 1.2漏洞等级 高危 1.3影响版本 Webgrind 1.5版本 1.4漏洞复现 1.4.1.基础环境 1.4.2.前提 网站后台地址&#xff1a; 后台管理账密&#xff1a; 后台登录地址 1.5深度利用 …

《AI超级个体:ChatGPT与AIGC实战指南 》书籍分享

前言 ChatGPT是一款通用人工智能&#xff08;AI&#xff09;工具&#xff0c;使用过它的人都能感受到它的魅力。AI并不是一个新事物&#xff0c;它在全世界都发展很多年了&#xff0c;但在ChatGPT诞生之前&#xff0c;我们的AI只能算垂直AI&#xff0c;比如AlphaGo&#xff0c…

【论文阅读】(VAE-GAN)Autoencoding beyond pixels using a learned similarity metric

论文地址;[1512.09300] Autoencoding beyond pixels using a learned similarity metric (arxiv.org) / 一、Introduction 主要讲了深度学习中生成模型存在的问题&#xff0c;即常用的相似度度量方式&#xff08;使用元素误差度量&#xff09;对于学习良好的生成模型存在一定…

零代码秒集成打通小鹅通订单支付信息与 CRM合同接口

随着科技的不断进步&#xff0c;数字化已经成为了商业世界的核心。企业和组织必须紧跟数字化趋势&#xff0c;以适应快速变化的市场需求和消费者行为。企业需要做到快速反应市场的需求变化&#xff0c;从产品设计到产品生产&#xff0c;每一步都离不开技术人员对系统的操作&…

【开源】基于Vue.js的校园失物招领管理系统的设计和实现

目录 一、摘要1.1 项目介绍1.2 项目详细录屏 二、研究内容2.1 招领管理模块2.2 寻物管理模块2.3 系统公告模块2.4 感谢留言模块 三、界面展示3.1 登录注册3.2 招领模块3.3 寻物模块3.4 公告模块3.5 感谢留言模块3.6 系统基础模块 四、免责说明 一、摘要 1.1 项目介绍 基于Vue…

如何理解 Linux 当中 “一切皆文件“

我们在 操作系统 当中的所有操作&#xff0c;包括对文件的所有操作&#xff0c;最终其实都是 通过 进程来实现的。 我们想象我们实现的各种C/C 程序&#xff0c;或者是各种语言实现的程序&#xff0c;本质上都是要 编译形成 可执行文件&#xff0c;然后操作系统把这个可执行文…

Linux内存问题排查

目录 概念工具 概念 工具 vmstat&#xff1a;查看内存变化情况 通过vmstat&#xff0c;可以看到空闲列是否一直是减少的趋势&#xff0c;而缓冲和缓存一直不变&#xff0c;说明存在内存泄漏 top/htop ps pmap&#xff1a;查看进程的内存分布 bcc工具&#xff1a; memlea…

缩点+图论路径网络流:1114T4

http://cplusoj.com/d/senior/p/SS231114D 重新梳理一下题目 我们先建图 x → y x\to y x→y&#xff0c;然后对点分类&#xff1a;原串出现点&#xff0c;原串未出现点。 假如我们对一个原串出现点进行了操作&#xff0c;那么它剩余所有出边我们立刻去操作必然没有影响。所…

建造者模式(创建型)

目录 一、前言 二、建造者模式 三、链式编程实现建造者模式 四、总结 一、前言 当我们开发一个软件应用时&#xff0c;我们通常需要创建各种对象。有些对象是简单的&#xff0c;可以直接实例化&#xff0c;但有些对象则比较复杂&#xff0c;需要多个步骤才能创建完成。这时…

合肥中科深谷嵌入式项目实战——基于ARM语音识别的智能家居系统(二)

目录 基于ARM语音识别的智能家居系统 练习一 一、程序编译 练习二&#xff1a; 二、文件IO 三、文件IO常用API接口函数 1、打开文件 open&#xff08;&#xff09; 2、将数据内容写入文件 write&#xff08;&#xff09; 3、关闭&#xff08;保存&#xff09;文件 四、…

教务必备:php+Mysql多条件都输对版万用查分系统

查分吧PHP多条件都输对版已有表万用查询系统 V1.8 极简单文件实现一至多条件都输对成绩录取分班等通用查询。 支持隐藏指定列、支持网址列显示为图片或链接、支持验证码开关。 适合学校或教育机构信息中心技术员使用&#xff0c;快速部署并用于已有数据表查询。 无后台管理…

实战Leetcode(五)

Practice makes perfect&#xff01; 实战一&#xff1a; 思路&#xff1a;我们要用复制的节点来组成一个新的链表&#xff0c;而原链表的节点随机指向其中一个节点&#xff0c;我们首先给每一个节点都复制并且插入到原来节点的后面&#xff0c;然后用复制的节点指向我们原来节…

CTFSHOW 文件上传

web151 JS前端绕过 直接上传 png的图片马 然后抓包修改为php asystem("ls /var/www/html"); asystem("cat /var/www/html/flag.php"); web152 和151一样的方法也可以实现上传 asystem("ls /var/www/html"); asystem("cat /var/www/html…

D. Jumping on Walls bfs

Problem - 199D - Codeforces 题目大意&#xff1a;有一个两个垂直的平行墙壁组成的一个峡谷。一个人初始是在左边墙壁第一层。在每个墙壁上有些障碍点&#xff0c;用X表示&#xff0c;这些障碍点不能被到达。&#xff0c;他可以执行以下三个操作&#xff1a; 向当前墙壁往上…

Swift制作打包framework

新建framework项目 设置生成fat包&#xff0c;包括模拟器x86_64和arm64 Buliding Settings -> Architectures -> Build Active Architecture Only 设置为NO 设置打包环境&#xff0c;选择release edit Scheme -> run -> Build configuration 设置为 Release 设置…

微信小程序:tabbar、事件绑定、数据绑定、模块化、模板语法、尺寸单位

目录 1. tabbar 1.1 什么是tabbar 1.2 配置tabbar 2. 事件绑定 2.1 准备表单 2.2 事件绑定 2.3 冒泡事件及非冒泡事件 3. 数据绑定 3.1 官方文档 4. 关于模块化 5. 模板语法 6. 尺寸单位 1. tabbar 1.1 什么是tabbar 下图中标记出来的部分即为tabbar&#xff1a…