教 程 目 录
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个面中的每一个. 如果您具有具有不同属性索引的文件格式,则需要将它们展开,以便在您的缓冲区中属性(位置,正常,纹理坐标等)的每个唯一组合(位置,正常,纹理坐标等). 大多数游戏引擎都会脱机地做这
)