文章目录
前言
最近打算整理一下 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 程序渲染的一个整体的流程;如下图:
图片出自 https://coding.imooc.com/class/chapter/432.html#Anchor
首先通过 JavaScript 将坐标点数据通过顶点着色器传入到 webgl 系统,然后进行图元的装配,也就是说根据传入的点进行组装图形;组装完毕之后进行将装备好的图片变成像素的形式,也就是图形的光栅化过程。栅格化之后该片元着色器上场,对每个片元进行着色;片元着色器是对每一个像素点进行渲染。最后渲染进去到帧缓冲区存储到内存中,通过 GPU 进行渲染。
对于 canva 元素,我这里就不详细描述,可以通过 mdn 查看对应用法。
首先先来一段最简单的 HelloWorld 程序:绘制一个点;