WebGL之旅（一）canvas WebGL和shader简介

最新推荐文章于 2024-04-21 18:36:16 发布

本人视频

最新推荐文章于 2024-04-21 18:36:16 发布

阅读量357

点赞数

本文链接：https://blog.csdn.net/qq_44910471/article/details/89300293

版权

本文介绍了HTML5的canvas标签及其在2D绘图的局限性，进而引出WebGL作为3D图形渲染的解决方案。详细阐述了WebGL的基本概念，并通过示例讲解了顶点着色器和片段着色器的工作原理，以及WebGL坐标系的特性。同时，文章还讨论了如何向shader传递值，包括attribute和uniform变量的使用。

摘要由CSDN通过智能技术生成

一 canvas

canvas（翻译为画布）是HTML5的一个标签，canvas可以使用JavaScript在网页上绘制图像，例如下面的代码就使用canvas绘制一个简单的矩形。

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>WebGL</title></head><body onload="main()">    <canvas id="container" width="1280px" height="720px"></canvas></body></html><script type="text/javascript" src="main.js"></script>
  
  
  
   1
   2
   3
   4
   5
   6
   7
   8