标签：渲染 webgl JavaScript API 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 程序渲染的一个整体的流程；如下图：
图片出自 https://coding.imooc.com/class/chapter/432.html#Anchor
首先通过 JavaScript 将坐标点数据通过顶点着色器传入到 webgl 系统，然后进行图元的装配，也就是说根据传入的点进行组装图形；组装完毕之后进行将装备好的图片变成像素的形式，也就是图形的光栅化过程。栅格化之后该片元着色器上场，对每个片元进行着色；片元着色器是对每一个像素点进行渲染。最后渲染进去到帧缓冲区存储到内存中，通过 GPU 进行渲染。
对于 canva 元素，我这里就不详细描述，可以通过 mdn 查看对应用法。
首先先来一段最简单的 HelloWorld 程序：绘制一个点；
标签：渲染,webgl,JavaScript,API,WebGL,着色器,初始 来源： https://blog.csdn.net/cj9551/article/details/114373758
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。