初识WebGL 2 | 青训营笔记

简介: 上期简单介绍了webgl的基本使用流程,并试着绘制了一个三角形。这期我们再深入了解一下这个图形处理工具。

上期简单介绍了webgl的基本使用流程,并试着绘制了一个三角形。这期我们再深入了解一下这个图形处理工具。


一、Polygons 绘制多边形


我们现代绘图一般会把多边形进行三角剖分,然后进行绘制

image.png

简单多边形有Earcut三角剖分算法——

image.png

不断“削平”,最终分成三角形


二、Transforms 图形移动


绘制静态的图形回了,如何让它们活起来呢?

image.png

我们可以用数学中的几何学知识来实现。


三、好工具分享


老师还提供了一些开源项目,有素材库也有工具

image.png

spriteJS可以像操作dom一样调用,内容非常丰富

ThreeJS里有许多用shader渲染出来的3d效果

我们一起来看看吧


1、theejs

利用Three.JS可以制作出很多酷炫的3D动画,并且Three.js还可以通过鼠标、键盘、拖拽等事件形成交互,在页面上增加一些3D动画和3D交互可以产生更好的用户体验。

通过Three.JS可以实现全景视图,这些全景视图应用在房产、家装行业能够带来更直观的视觉体验。在电商行业利用Three.JS可以实现产品的3D效果,这样用户就可以360度全方位地观察商品了,给用户带来更好的购物体验。另外,使用Three.JS还可以制作类似微信跳一跳那样的小游戏。随着技术的发展、基础网络的建设,web3D技术还能得到更广泛的应用。


2、spritejs

Sprite 为图形创建类似于 DOM 的对象模型,因此我们可以像创建 DOM 元素一样,创建 Sprite 元素,并将它们 append 到 layer 上,从而将元素呈现到画布上。SpriteJS 有如下特点:

基于 canvas 绘制的文档对象模型

四种基本精灵类型:Sprite、Path、Label、Group

支持基础和高级的精灵属性,精灵盒模型、属性与 CSS3 具有高度一致性。

简便而强大的 Transition、Animation API

支持雪碧图和资源预加载

可扩展的事件机制

高性能的缓存策略

D3Matter-jsProton和其他第三方库友好

跨平台,支持服务端渲染微信小程序


相关文章
|
SQL 数据格式
视图有哪些特点?哪些使用场景?
视图有哪些特点?哪些使用场景?
|
6月前
|
消息中间件 存储 Kafka
10倍降本、10倍无损弹性!Kafka Serverless 基础版与专业版重磅发布!
云消息队列 Kafka 版基于 Apache Kafka 构建,提供高吞吐量与高可扩展性的分布式消息队列服务,广泛应用于日志收集、监控数据聚合、流式数据处理及在离线分析等场景,是 AI 与大数据时代企业数据处理体系的核心组件。
|
人工智能 机器人 数据库
人工智能|RAG 检索增强生成
1. 理解什么是 RAG 检索增强。 2. 理解 RAG 检索增强应用场景。 3. 了解 RAG 检索增强有哪些相关的使用方法。 4. 在后续的学习过程中,会结合 LangChain 与 assistant 完成 RAG 相关的实战练习。
|
Ubuntu Linux 网络安全
ubuntu linux通过rclone 挂载onedrive 到本地磁盘
ubuntu linux通过rclone 挂载onedrive 到本地磁盘
635 2
|
关系型数据库 PostgreSQL
postgresql如何将没有关联关系的两张表的字段合并
【6月更文挑战第2天】postgresql如何将没有关联关系的两张表的字段合并
314 3
|
前端开发 JavaScript 云计算
系统工程 | 系统工程概识
系统工程 | 系统工程概识
343 1
|
人工智能 文字识别 API
iOS MachineLearning 系列(4)—— 静态图像分析之物体识别与分类
本系列的前几篇文件,详细了介绍了Vision框架中关于静态图片区域识别的内容。本篇文章,我们将着重介绍静态图片中物体的识别与分类。物体识别和分类也是Machine Learning领域重要的应用。通过大量的图片数据进行训练后,模型可以轻易的分析出图片的属性以及图片中物体的属性。
593 0
|
消息中间件 Oracle 关系型数据库
Flink CDC 数据源问题之参数配置如何解决
Flink CDC数据源指的是使用Apache Flink的CDC特性来连接并捕获外部数据库变更数据的数据源;本合集将介绍如何配置和管理Flink CDC数据源,以及解决数据源连接和同步过程中遇到的问题。
272 0
|
存储 人工智能 运维
spring国际化 - i18n
spring国际化 - i18n
229 0
|
关系型数据库 MySQL Shell
Mysql数据库平滑扩容解决高并发和大数据量问题 3
Mysql数据库平滑扩容解决高并发和大数据量问题
275 1