初始 webgl(一)

文章目录

前言

最近打算整理一下 webgl 相关的基础知识;方便自己复习查看。
首先 webgl 是一种在 web 端进行三维相关开发的技术;引一段 mdn 上的介绍:

WebGL(Web图形库)是一个JavaScript API,可在任何兼容的Web浏览器中渲染高性能的交互式 3D 和 2D 图形,而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 非常一致的 API 来做到这一点,该 API 可以在HTML5 <canvas> 元素中使用。 这种一致性使API可以利用用户设备提供的硬件图形加速。

了解了他是什么,那么我们如何利用 web 技术进行 webgl 的开发呢,主要是通过 HTML 的 canvas、JavaScript 以及着色器语言 GLSL ES,也就是说 webgl 页面包含这三种语言;

WebGL 入门

WebGL 渲染流程

首先我们先说一下 webgl 程序渲染的一个整体的流程;如下图:
初始 webgl(一)

图片出自 https://coding.imooc.com/class/chapter/432.html#Anchor

首先通过 JavaScript 将坐标点数据通过顶点着色器传入到 webgl 系统,然后进行图元的装配,也就是说根据传入的点进行组装图形;组装完毕之后进行将装备好的图片变成像素的形式,也就是图形的光栅化过程。栅格化之后该片元着色器上场,对每个片元进行着色;片元着色器是对每一个像素点进行渲染。最后渲染进去到帧缓冲区存储到内存中,通过 GPU 进行渲染。

对于 canva 元素,我这里就不详细描述,可以通过 mdn 查看对应用法。
首先先来一段最简单的 HelloWorld 程序:绘制一个点;

上一篇:webgl canvas 大小变化导致绘制出现偏差


下一篇:Javascript高性能WebGL图表--LightningChart JS