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

news2024/12/24 0:11:45

线条对象包括:

        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();
	}
}

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

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

相关文章

【kafka】 查看节点的消息

对于初学者来说&#xff0c;可能想去节点看看有没有消息产生和消费&#xff0c;可以去kafka的bin目录下执行这个命令&#xff1a; kafka-console-consumer.bat --bootstrap-server localhost:9092 --topic myTopic --from-beginning 这个命令可以理解为&#xff1a;生产过的消…

HarmonyOS分布式文件系统开发指导

分布式文件系统概述 分布式文件系统&#xff08;hmdfs&#xff0c;HarmonyOS Distributed File System&#xff09;提供跨设备的文件访问能力&#xff0c;适用于如下场景&#xff1a; 两台设备组网&#xff0c;用户可以利用一台设备上的编辑软件编辑另外一台设备上的文档。平板…

threejs(13)-着色器设置点材质

着色器材质内置变量 three.js着色器的内置变量&#xff0c;分别是 gl_PointSize&#xff1a;在点渲染模式中&#xff0c;控制方形点区域渲染像素大小&#xff08;注意这里是像素大小&#xff0c;而不是three.js单位&#xff0c;因此在移动相机是&#xff0c;所看到该点在屏幕…

PTE-RS 练习(二)

目录 内容分漏多漏少没有什么关系 Write Essay 感知比记忆强的多 记住骨干&#xff0c;剩下脑补 套上有含义的帽子 &#xff0c; 套上了信息就会很牢固 谁在说&#xff0c;为什么会说这句话 听不懂那个文本如何处理 要产生表达欲 会分为很多的块 做好意群分割…

论文精读 MediaPipe BlazeFace

BlazeFace:Sub-millisecond Neural Face Detection on Mobile GPUs BlazeFace&#xff1a;基于移动GPUs的亚毫秒神经人脸检测 论文地址&#xff1a;arxiv.org/pdf/1907.05047.pdf 源码地址&#xff1a;GitHub - tkat0/PyTorch_BlazeFace: Unofficial PyTorch implementation…

AI大模型的制作:RAG和向量数据库,分别是什么?

目录 一、什么是 AI 大模型 二、RAG 三、向量数据库 四、如何制作一个好的 AI 大模型 一、什么是 AI 大模型 AI大模型是指具有大规模参数和复杂结构的人工智能模型。传统的机器学习模型通常有限的参数量&#xff0c;而AI大模型则通过增加参数量和层数来提升模型的表达能力…

《洛谷深入浅出进阶篇》 P2367语文成绩——差分

上链接&#xff1a;P2367 语文成绩 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn)https://www.luogu.com.cn/problem/P2367 上题干&#xff1a; 题目背景 语文考试结束了&#xff0c;成绩还是一如既往地有问题。 题目描述 语文老师总是写错成绩&#xff0c;所以当她修改成绩的…

【vue+amap】高德地图绘制多边形区域

参考文档&#xff1a; 高德地图参考手册 高德地图示例代码 1、高德地图控制台创建应用&#xff0c;获取权限ak 高德地图控制台 Ps.本项目里按钮等基础控件使用的是element-ui版本控件 2、项目内全局引入 index.html内引入高德地图代码&#xff1a; <script type"te…

【Linux系统编程十七】:(基础IO4)--文件系统(inode与软硬链接)

【Linux系统编程十六】&#xff1a;文件系统&#xff08;inode与软硬链接&#xff09; 一.磁盘硬件二.文件系统(inode)三.软硬链接 一.磁盘硬件 Linux下的文件在磁盘中存储&#xff0c;文件的内容和属性是分开存储的&#xff01; 文件的内容存储在数据块。 文件的属性存储在in…

github 私人仓库clone的问题

github 私人仓库clone的问题 公共仓库直接克隆就可以&#xff0c;私人仓库需要权限验证&#xff0c;要先申请token 1、登录到github&#xff0c;点击setting 打开的页面最底下&#xff0c;有一个developer setting 这里申请到token之后&#xff0c;注意要保存起来&#xff…

【3】Spring Boot 3 集成mybatis-plus+druid+mysql

目录 【3】Spring Boot 3 集成组件&#xff1a;Druid Mybatis Plus Mysql集成方案1. Hikari jdbc mysql 集成方案增加依赖添加配置Spring Testng 测试用例 2. Druid Mybatis Plus Mysql集成方案2.1 配置Druid添加依赖配置启动Spring Boot Web StarterSpring Testng测试用…

VS项目属性变量

VS项目属性变量 $(SolutionDir) 获取解决方案的路径 $(Platform) 平台名字 → x86 / x64 $(ProjectName) 工程名字 $(Configuration) 当前的项目模式 → Debug / Release

第十九章总结:Java绘图

19.1&#xff1a;Java绘图类 19.2&#xff1a;绘制图形 package nineteentn; import java.awt.*; import javax.swing.*;public class DrawCircle extends JFrame {private final int OVAL_WIDTH 80; // 圆形的宽private final int OVAL_HEIGHT 80; // 圆形的高public DrawC…

接口测试和功能测试有什么区别

本文主要分为两个部分&#xff1a; 第一部分&#xff1a;主要从问题出发&#xff0c;引入接口测试的相关内容并与前端测试进行简单对比&#xff0c;总结两者之前的区别与联系。但该部分只交代了怎么做和如何做&#xff1f;并没有解释为什么要做&#xff1f; 第二部分&#xff1…

JavaScript中的事件冒泡、事件捕获、事件委托

DOM事件流&#xff08;event flow &#xff09;存在三个阶段&#xff1a;事件捕获阶段、处于目标阶段、事件冒泡阶段。 Dom标准事件流的触发的先后顺序为&#xff1a;先捕获再冒泡。即当触发dom事件时&#xff0c;会先进行事件捕获&#xff0c;捕获到事件源之后通过事件传播进行…

应届裁员,天胡开局——谈谈我的前端一年经历

应届裁员&#xff0c;天胡开局——谈谈我的前端一年经历 许久没有更新了&#xff0c;最近一个月都在忙&#xff0c;没错&#xff0c;正如题目所说&#xff0c;裁员然后找工作… 这周刚重新上班&#xff0c;工作第二天&#xff0c;感慨良多&#xff0c;记录些什么吧。 去年十…

AWS实战(一)-创建S3 存储桶

1&#xff09;登录AWS账号&#xff0c;选择服务—>存储—>S3。 2&#xff09;查看存储桶列表 3&#xff09;点击"创建存储桶"创建bucket。 4&#xff09;设置跨域 点击编辑&#xff0c;修改跨域设置即可。

基于SSM+Vue的健身房管理系统

基于SSMVue的健身房管理系统的设计与实现~ 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringMyBatisSpringMVC工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 主页 课程信息 健身器材 管理员界面 用户界面 摘要 健身房管理系统是一种利用现…