初识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和其他第三方库友好

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


相关文章
|
5月前
|
开发者 C# 容器
【独家揭秘】当WPF邂逅DirectX:看这两个技术如何联手打造令人惊艳的高性能图形渲染体验,从环境搭建到代码实践,一步步教你成为图形编程高手
【8月更文挑战第31天】本文通过代码示例详细介绍了如何在WPF应用中集成DirectX以实现高性能图形渲染。首先创建WPF项目并使用SharpDX作为桥梁,然后在XAML中定义承载DirectX内容的容器。接着,通过C#代码初始化DirectX环境,设置渲染逻辑,并在WPF窗口中绘制图形。此方法适用于从简单2D到复杂3D场景的各种图形处理需求,为WPF开发者提供了高性能图形渲染的技术支持和实践指导。
354 0
|
7月前
|
移动开发 JSON JavaScript
一篇文章讲明白Egret白鹭H5小游戏开发入门(一)
一篇文章讲明白Egret白鹭H5小游戏开发入门(一)
137 1
|
8月前
微信小游戏制作工具关于游戏屏幕适配,看这篇就够了!
微信小游戏制作工具关于游戏屏幕适配,看这篇就够了!
279 0
|
移动开发 数据可视化 JavaScript
谈一谈|小白如何使用egret
谈一谈|小白如何使用egret
261 0
|
缓存 程序员 图形学
WebGL初识1 | 青训营笔记
今天跟着青训营网课学习了月影大大的“WebGL与动画实现”,感觉打开了新世界的大门,特记笔记来加深印象、巩固学习。
WebGL初识1 | 青训营笔记
|
缓存 移动开发 前端开发
WebGL | 青训营笔记
WebGL | 青训营笔记
113 0
WebGL | 青训营笔记
|
移动开发 前端开发 图形学
小游戏开发 | 青训营笔记
小游戏开发 | 青训营笔记
110 0
小游戏开发 | 青训营笔记
|
图形学
egret连连看项目实战之二(礼盒动画)
egret连连看项目实战之二(礼盒动画)
egret连连看项目实战之二(礼盒动画)
|
Web App开发 前端开发 图形学
Unity实战问题-WebGL问题集锦-上篇
众所周知,人生是一个漫长的流程,不断克服困难,不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考,于是我决定将自己的思考,经验和故事全部分享出来,以此寻找共鸣!!!
457 1
|
前端开发 JavaScript 异构计算
WebGL基础笔记
WebGL基础笔记
204 0