WebGL / 计算机图形学
文章平均质量分 89
记录 WebGL 相关知识点
凯小默
专注前端领域开发。
展开
-
【性能篇】30 # 怎么给WebGL绘制加速?
【跟月影学可视化】学习笔记。例子:在一个画布上渲染 3000 个不同颜色的、位置随机的三角形,并且让每个三角形的旋转角度也随机。我这台电脑渲染出来只有 可以创建一个正三角形,然后通过视图矩阵的变化来实现绘制多个三角形,而视图矩阵可以放在顶点着色器中计算。也是 ,由于浏览器的 JavaScript 引擎的运算速度很快,感觉将顶点计算放到顶点着色器中进行了,性能差别也很微小。重复图形的批量绘制,在 WebGL 中也叫做,它是一种减少绘制次数的技术。多实例渲染的局限性:只能在绘制相同的图形时使用。效果如下:原创 2022-12-20 19:40:29 · 845 阅读 · 0 评论 -
【图形基础篇】04 # GPU与渲染管线:如何用WebGL绘制最简单的几何图形?
比如要绘制下面这个二维的三角形,三个顶点分别如下:WebGL 使用的数据需要用类型数组定义,默认格式是 Float32Array。是 JavaScript 的一种类型化数组(TypedArray),JavaScript 通常用类型化数组来处理二进制缓冲区。原创 2022-10-10 18:46:57 · 845 阅读 · 0 评论 -
从0到1实现Web端H.265播放器:YUV渲染篇
说明本文转载自:从0到1实现Web端H.265播放器:YUV渲染篇前言上一篇文章《视频解码篇》主要介绍了原始HEVC码流如何解码成YUV数据(通常视频采用的都是YUV格式),本章主要介绍如何将解码的YUV数据渲染成图像。在此之前我们先回顾一下DEMO架构上图中可以看到,我们接收到YUV数据后需要使用WebGL对YUV处理转换成RGB数据然后进行渲染。那么为什么要转换成RGB呢,首先我们先了解下什么是YUV,以及YUV和RGB的区别。什么是YUV(从上至下分别是原图,Y分量,U分量,V分量)转载 2021-05-20 21:29:48 · 2610 阅读 · 0 评论 -
WebGL 入门必看(二)
说明本文转载自:淘系前端团队:一起来玩玩WebGL–第二弹NO.1 书接上文上一弹中主要介绍了一下什么是WebGL,和大家一起理解了这货到底是个啥东西,不知道大家还记得多少,毕竟这一更也太久了,忘记了的话可以回去快速回顾一下哦,其实嘛,内容不多,就是图形编程的简单过程,最重要的还是,WebGL可以为HTML5的Canvas提供硬件加速,也就是说在浏览器用JS调用GL的API进行渲染咯,哇塞(kao),JS真的是啥都可以干啊!然后让大家感受了OpenGLES(WebGL是基于它的嘛)的渲染管线以及着色语转载 2021-04-22 14:54:27 · 849 阅读 · 0 评论 -
WebGL 入门必看(一)
说明本文转载自:淘系前端团队:一起来玩玩WebGL–第一弹NO.1 序上一篇文章说到我从客户端转前端的历程,短短一年的时间就打开了前端世界的大门,简直就是有无穷多的东西可玩,以前酷爱Java的我终于见识到什么都可以写的JavaScript的厉害了,不仅仅可以写Web,客户端,后端,系统应用,还可以在神经网络、物联网,甚至嵌入式都可以,简直就是一个万能的语言,可以说能编程的地方理论上都可以用JS来写!转前端后,我就发现了不少新奇好玩的东西,WebGL,WebAssembly(后面再起这一个系列),前端转载 2021-04-22 11:06:00 · 1336 阅读 · 0 评论 -
WebGL 基础概念
参考文章:https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-fundamentals.html#toc着色器WebGL 仅仅是一个光栅化引擎,它可以根据你的代码绘制出点,线和三角形。WebGL 在电脑的 GPU 中运行。因此你需要使用能够在 GPU 上运行的代码。 这样的代码需要提供成对的方法。并且使用一种和C或C++类似的强类型的语言 GLSL。 (GL着色语言)。每一对组合起来称作一个 program(着色程序)。两种着色器每对原创 2021-04-20 20:42:32 · 659 阅读 · 2 评论 -
WebGL 理论基础
说明本文转载自https://webglfundamentals.org/webgl/lessons/zh_cn/介绍从基础理论开始学习 WebGL,稳!这有一系列教程,从 WebGL 的基本理论讲起。 它们不像大多数其他教程那样改编自旧的 OpenGL 文章。 它们去旧迎新,丢弃一些过时的思想,让你彻底了解 WebGL 的工作原理。如果你对 WebGL2 感兴趣可以到这里看看 webgl2fundamentals.org理论基础基础概念WebGL 基础概念WebGL 工作原理WebG转载 2021-04-18 13:58:15 · 259 阅读 · 0 评论 -
什么是 WebGL?
概念WebGL(全写Web Graphics Library)是一种3D绘图协议。这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起,通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定,WebGL 可以为HTML5 Canvas 提供硬件 3D 加速渲染,这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了,还能创建复杂的导航和数据视觉化。WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有原创 2021-04-13 23:24:12 · 3128 阅读 · 1 评论