WebGL 设置和安装

如何进行WebGL的开发. ... 就是说WebGL不能随意使用网络获图像， 还有一点需要注意的是WebGL读取本地数据的速度很快。

如果你想运行和编辑本站示例，首先下载本网站。

English Français 日本語 한국어 Polski Portuguese Русский 简体中文 目录 WebGLFundamentals.org Fix,Fork,Contribute WebGL设置和安装 事实上，开发WebGL只需要一个网页浏览器。

你可以用jsfiddle.net、jsbin.com或codepen.io当本教程的学习环境。

如果你想在之前的网站里引用外部脚本，只需要添加一对标签。

但这么做有一些限制。

WebGL在使用图片上有着比Canvas2D更强的限制，就是说WebGL不能随意使用网络获图像， 还有一点需要注意的是WebGL读取本地数据的速度很快。

如果你想运行和编辑本站示例，首先下载本网站。

你可以从这里下载。

解压缩文件到任一文件夹。

使用一个简单易用的WebServer 下一步你需要搭建一个简单的web服务器。

我知道“web服务器”听起来很吓人，但搭建web服务器实际上是非常简单的。

如果你使用的是Chrome浏览器，这有一个扩展Servez可以当web服务器。

只需选择解压后的文件夹，点击“Start”，然后在地址http://localhost:8080/webgl/中选择例子。

如果你更喜欢使用命令行，另一种方法是使用node.js。

在下载并安装后，打开命令行/控制台/终端窗口。

如果你是Windows系统，安装过程会提示你额外安装“NodeCommandPrompt”，同意就可以了。

然后通过输入如下内容安装servez npm-ginstallservez 如果你用的是OSX系统 sudonpm-ginstallservez 完成安装后接着输入 servez你/的/文/件/解/压/地/址 然后应该显示类似的东西 最后你就可以在你的网页浏览器里访问http://localhost:8080/webgl/了。

如果你不指定路径，servez会使用当前所在文件夹。

使用浏览器中的开发者工具 大多数浏览器都内置了大量的开发者工具。

Chrome浏览器的使用文档在这里， Firefox浏览器的在这。

这有个简单的使用技巧：若是没有显示任何内容就查看JavaScript控制台，如果有什么问题的话控制台上面通常都有错误信息。

通过仔细的阅读错误信息可以帮你确定问题的根源。

WebGL辅助工具 有很多WebGL监测工具/辅助工具。

这有个Chrome浏览器的。

Firefox也有个类似的。

它需要在about:flags中设置启用，而且可能你需要Firefox开发者版本。

它们可能会对你有帮助。

它们大多数的功能是运行程序时可以捕获某一帧并查看这一帧中WebGL的详细调用。

它在你的程序正常运行时或运行并崩溃的情况下很有用。

但是如果你初始化阶段出了问题或你没有在每一帧中使用动画它就不会捕捉任何东西。

尽管如此，但它仍然是一个非常有用的工具。

我经常会在绘制中加调试断点，用来查看uniform变量。

如果我看到一堆NaN就会跟踪设置uniform变量的部分以便找到错误代码。

它们大多数是为动画样本而设计的，并且会捕获一个帧，让你能够看到所有用来生成这个帧的WebGL的详细调用。

若是你正在编写或是已经写完，它们可以对你有帮助，这是极好的，但是，若是你的问题是出在绘制的初始化阶段或是你没有使用动画来绘制每一帧动画，它们就难以帮你捕捉到错误了。

尽管如此，它们总的来说还是很有用的。

我就会经常检查绘制时的调用和各种uniform变量。

如果我看到一堆NaN(NotaNumber)冒出我通常可以追寻到产生bug的代码。

查看源码 通常只需要右键选择查看源代码 但若遇到不能右键网页或网页的源代码是在多个文件中的情况，你可以通过开发者工具看到源代码 开始学习 希望这有助于你完成准备工作以便开始接下来的学习。

现在回到教程。

English Français 日本語 한국어 Polski Portuguese Русский 简体中文 基础概念 WebGL基础概念 WebGL工作原理 WebGL着色器和GLSL WebGLStateDiagram 图像处理 WebGL图像处理 WebGL进一步处理图像 二维平移，旋转，缩放和矩阵运算 WebGL二维平移 WebGL二维旋转 WebGL二维缩放 WebGL二维矩阵 三维 WebGL三维正射投影 WebGL三维透视投影 WebGL三维相机 光照 WebGL三维方向光源 WebGL三维点光源 WebGL三维聚光灯 组织和重构 WebGL码少趣多 WebGL绘制多个物体 WebGL场景图 几何 WebGL三维几何加工 WebGL加载.obj文件 WebGL加载带.mtl的.obj文件 纹理 WebGL三维纹理 WebGL数据纹理 WebGL使用多个纹理 WebGL跨域图像 WebGL纹理映射的透视纠正 平面的和透视的投影映射 渲染到纹理 WebGL渲染到纹理 Shadows 阴影 技术 二维 WebGL二维DrawImage WebGL二维矩阵栈 精灵 三维 WebGL立方体贴图 WebGL环境贴图 WebGL天空盒 WebGL蒙皮 WebGL雾 Picking(clickingonstuff) 文字 WebGL文字-HTML WebGL文字-二维Canvas WebGL文字-使用纹理 WebGL文字-使用字形纹理 纹理 RampTextures(ToonShading) GPGPU GPGPU Tips WebGL最小的程序 DrawingWithoutData Shadertoy PullingVertices Optimization 顶点索引（gl.drawElements) 实例化绘制 杂项 WebGL设置和安装 WebGL样板 WebGL重置画布尺寸 WebGL动画 WebGL点、线和三角 MultipleViews,MultipleCanvases 可视化相机 WebGL和阿尔法通道 WebGL2Dvs3D库 WebGL错误模式 WebGL矩阵vs数学中的矩阵 PrecisionIssues 截屏 防止画布被清空 在画布中获取键盘输入 将WebGL作为HTML的背景 WebGL跨平台相关问题 QuestionsandAnswers Reference WebGL属性 WebGL纹理单元 WebGL帧缓冲 WebGLreadPixels WebGL参考 API帮助文档 TWGL,一个轻量级WebGL辅助库 GitHub 有意见或建议?在GitHub上提issue。

commentspoweredbyDisqus