教 程 目 录
WebGL教程
WebGL(Web图形库)是Web上3D图形的新标准，专为渲染2D图形而设计和交互式3D图形.本教程首先介绍WebGL，OpenGL和HTML-5的Canvas元素，然后是示例应用程序.本教程包含编写基本WebGL应用程序所需的所有步骤的专用章节.它还包含解释如何使用WebGL进行仿射变换(例如平移，旋转和缩放)的章节.
受众
本教程非常有用对于那些想要学习WebGL编程基础知识的读者都很有用.
先决条件
这是一个基础教程，可以很容易地理解这些概念这里解释了JavaScript或HTML-5编程的基本知识.但是，如果您之前接触过与3D图形相关的OpenGL语言和矩阵操作，它将会有所帮助.
本文地址：https://itbaoku.cn/tutorial/webgl-index.html
相关问答
我想知道是否有任何可以利用的 WebGL 异步调用? 我查看了 Spec v1 和 Spec v2，他们没有提及任何内容.在 V2 中，有一个 WebGL 查询机制，我认为这不是我想要的. 在网络上搜索并没有找到任何确定的结果.有这个例子，并不清楚同步和异步版本有何不同.http://toji.github.io/shader-perf/ 最终我希望能够异步处理所有这些: 读取像素 texSubImage2D 和 texImage2D 着色器编译 程序链接 画??? 有一个 glFinish 操作，它的文档说:“在所有先前调用的 GL 命令的效果完成之前不会返回.".对我来说，这意味着可以通过调用 Finish() 来等待异步操作? 网络上的一些帖子表明，调用 getError() 也会强制实现一些同步性，并且在每次调用后都不是非常理想的事情. 解决方案 这取决于你对异步的定义. 在 Chrome 中(Firefox 现在也可能这样做?不确定).Chrome 在与 JavaScript 不同的进程中运行所有 GPU 代码.这意味着您的命令正在异步运行.甚至 OpenGL 本身也被设计为异步的.函数 (WebGL/OpenGL) 将命令插入命令缓冲区.这些是由其他一些线程/进程执行的.你告诉 OpenGL “嘿，我有新的命令要
)
我在WebGL中有颜色和alpha的问题. 我的JavaScript程序的一部分: gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 和我的片段阴影: precision highp float; void main(void) { float c = 0.5; float a = 0.7; if(gl_FragCoord.x 330.0) // right color gl_FragColor = vec4(c, c , c , a); else gl_FragColor = vec4(c / a, c / a, c / a, 1.0); // middle color } 我正在渲染一个立方体. 但不幸的是，该立方体以3种不同的颜色渲染.结果: 图像参见 PNG 第一个GL_FRAGCOLOR-COMMAND的alpha = 1.0.颜色是按预期呈现的. 第二个GL_FRAGCOLOR-
)
是否有某种列出所有功能等的WebGL手册?我尝试了Google，但什么也没有找到. 解决方案 这两个资源对我有很大帮助 mozilla devloper页面 我遵循的课程很棒的博客！ 其他解决方案 WebGL备忘单 WebGL快速参考卡 其他解决方案 还有官方手册 - WebGL规范:
)
我正在尝试比较移动设备上 3d 应用程序的性能.我在 webGL 中设置了一个 3d 太阳能系统，我试图记录或至少显示 FPS.到目前为止，这就是我所拥有的: 在体内 var x, message; x = Time; message = "fps is equal to "; document.write (message); // prints the value of the message variable document.write (x); //prints the value of x 为了在画布的绘制功能中获得 Time Var，我有这个 var Time = 0; function drawScene() { var startTime = new Date(); //draw scene here var endTime = new Date(); Time = (endTime - startTime) } 我在画布底部得到的输出是“fps 等于 null" 任何帮助都会很棒！ 解决方案 我假设你重复调用 drawScene 但如果你只设置一次 x 那么它不会在每次调用 drawScene 时更新.此外，您在 Time 中存储的是经过时间，而不是
)
问 题 想在此问下关于webgl性能优化的问题，自己用webgl写了一个房间，放了20个大约60MB左右的物件，实现漫游的功能， (做法比较简单，就是普通的导入，绘制，添加纹理，移动视角的时候整个重绘(实际上是一直在循环重绘) 结果卡帧一顿一顿的....汗，一开始我以为webgl本来就性能低下，但是看到这个网页： http://www.hightopo.com/guide... 才觉得自己优化做的不行。 我现在也在研究中..想听听大家好的想法 放上我的代码: https://github.com/aircloud/W... 解决方案 现在已经用了一个方法，就是通过向量判断一下，不在视线范围内的就不画了。 这样的话，如果能看到的物体不多，是不卡的。
)
我发现在呈现数据时，很难理解顶点和纹理之间的相关性.我有一个使用绘制的绘制绘制形式的数据，形成了从OBJ解析的数据.我得到的纹理接近使用一个简单的平面，在该平面上，位置和纹理坐标的顶点数量，但是一旦我使用一个更复杂的模型，甚至只是一个更复杂的紫外线包装，我最终都会出现纹理. 从我阅读的内容中，没有看到一种使用纹理坐标索引的方法，就像您在顶点位置相同的方式，这是不幸的，因为OBJ具有该信息.我接近工作的方式是从OBJ中的索引数据中构建一系列纹理坐标.但是，由于顶点和纹理坐标阵列的长度不同(例如，在一个Cube的OBJ中，有8个顶点，最多36个纹理坐标，具体取决于固定网状)它们不相关. 使用绘制并将顶点映射到其正确纹理坐标的正确工作流程是什么. 解决方案 您是正确的，您不能轻易地将不同的索引用于不同的属性(在您的情况位置和纹理坐标中). 一个常见的例子是一个立方体.如果您想渲染带有照明的立方体，则需要正常.立方体上只有8个位置，但是立方体的每个脸部都需要3个不同的正常位置，对于相同的位置，每个脸部共享该位置的正常.这意味着您总共需要24个顶点，对于立方体的6个面中的每一个. 如果您具有具有不同属性索引的文件格式，则需要将它们展开，以便在您的缓冲区中属性(位置，正常，纹理坐标等)的每个唯一组合(位置，正常，纹理坐标等). 大多数游戏引擎都会脱机地做这
)
联系站长