测试WebGL的第一步是要得到一个支持WebGL的浏览器;WebGL被研发中的所有主流浏览器所支持,除了IE浏览器,所以你需要做的就是获得一个适合你机器的浏览器版本。这一步是否容易得根据你电脑的具体情况了:
Windows:
1、如果你的电脑上安装了最近的ATI显卡或Nvidia显卡,你的情况会更好点。继续尝试下安装Firefox或是Chromium,无论你喜欢哪一种——如果不能正常运行,请浏览下面的故障查找向导。
2、如果你用的是Intel的显卡芯片(也包括笔记本),这样情况会稍微好点。Intel提供的显卡驱动不是非常地支持OpenGL,而现在浏览器支持WebGL运行是通过OpenGL的(这个在今后将会发生改变)。你也许想要尝试上面的说明安装Firefox或者Chromium,但是它们将很有可能不会运行WebGL。如果是这种情况的话,你现在最好的选择是使用带有软件渲染的Firefox(也就是说3D图像通过CPU来运算,而不是靠显卡运算)。这种方法运行起来将会慢一点,但是至少你能够将一些WebGL文本运行出来!
Macintosh:
如果你正在使用Snow Leopard (OS X 10.6),情况将会好点;我推荐使用WebKit的开发版,这个可以作为Safari的一个可选版本运行。如果你正在使用Leopard (OS X 10.5),你将不能使用这种WebKit,但是你能使用Firefox或者Chromium。Snow Leopard用户当然也能使用Firefox或者Chromium。如果你在用老版本的OS X,非常不幸,现在我还不知道任何一个你能用的WebGL浏览器。
Linux:跟Windows的情况非常相似:
如果你的设备是ATI卡或是Nvidia卡,并且是最近的驱动,这样运行Firefox或是Chromium都一样的好。
如果你是Intel显卡,就像Windows用户一样你有可能不得不用缓慢的软件来渲染;尝试Firefox或是Chromium,但是它们默认情况下为硬件渲染,很有可能不能运行WebGL。为了在Linux上运行软件渲染,您需要确定安装了Mesa(您仅仅需要通过使用您的distro’s package manager获得最新版本),然后将最新版本的Firefox进行一些额外的设置。
Firefox
Firefox发布的不稳定的开发版被称为Minefield。Minefield每天晚上都更新,实际上它现在比较稳定了:最近我还没有看到它崩溃(我用它来运行任何文件)。它也能够和Firefox普通的版本同时安装,因此你不需要担心卸载它如果你放弃使用它或是仅仅想要一段时间回归到以前普通版本。
获得Minefield:
1、进入每夜构建页面并且下载适合你机器的版本。注意:这儿有很多版本,名字像firefox-4.0b8或是firefox-4.0b9。您想要最新的版本,“b”后面的数字也就越大。
2、安装它(当安装时您需要阻止任何在Firefox上运行的程序)。
3、启动Minefield。
4、在地址栏输入“about:config”(译者注:切换为英文模式输入“about:config”)。
5、找到“webgl”。
6、将“webgl.enabled_for_all_sites”的值改为“true”。
(感谢Vladimir Vukicevic提供相关信息。)
下一步,点击这里进入WebGL页面
http://www.web3dmarket.com/html/demo.html
在Windows上运行Minefield的软件渲染
如果你的显卡不支持OpenGL 2.0,现在在你的机器上运行WebGL文本的唯一方法是使用一个叫Mesa的库。Mesa基本上仿效了软件里面的显卡,所以运行起来有一点慢——但是这总比不能运行要好!它和Minefield整合到了一起,Minefield就是Firefox的“不稳定”开发版,要使得它们在Windows上全运行起来:
1、进入每夜构建页面并且下载适合你机器的版本。
2、安装它(当安装时您需要阻止任何在Firefox上运行的程序)。
3、下载这个版本的Mesa库,由Mozilla的Vladimir Vukicevic友情提供。
4、解压这个Mesa zip文件:它包括一个DLL文件,文件名为“OSMESA32.DLL”,您只需把它放在你机器的任何一个地方。
5、启动Minefield。
6、在地址栏输入“about:config”,进入“about:config”页面。
7、找到“webgl”栏。
8、将“webgl.enabled_for_all_sites”的值改为“true”。
9、将“webgl.osmesalib”的值设为指向你的“OSMESA32.DLL”路径。例如,如果你把它放在目录“C:\temp”下,你需要将“webgl.osmesalib”设为“C:\temp\osmesa32.dll”。
10、将“webgl.software_rendering”的值变为“true”。
(再次感谢Vladimir Vukicevic提供相关信息,并且提供 osmesa library。)
一旦你完成了上述步骤,你就可以测试了。点击这里来测试一下WebGL网页。
在Linux上运行Minefield的软件渲染
如果你的显卡不支持OpenGL 2.0,现在在你的机器上运行WebGL文本的唯一方法是使用一个叫Mesa的库。Mesa基本上仿效了软件里面的显卡,所以运行起来有一点慢——但是这总比不能运行要好!它和Minefield整合到了一起,Minefield就是Firefox的“不稳定”开发版,它也通常是你的LInux distro的一部分。这儿介绍怎样使它们运行起来:
1、下载最新版本的Minefield;
2、安装它(当安装时您需要阻止任何在Firefox上运行的程序);
3、使用你的Linux distro’s package manager,确定你安装了Mesa并且更新为最新版本;
4、启动Minefield;
5、在地址栏输入“about:config”(译者注:切换为英文模式输入“about:config”);
6、找到“webgl”;
7、将“webgl.enabled_for_all_sites”的值改为“true”;
8、将“webgl.software_rendering”的值变为“true”;
9、设定“webgl.osmesalib”为您OSMesa分享库的地址(通常像这样/usr/lib/libOSMesa.so)
10、到2010年2月9号为止,我仍然建议您也设置“dom.ipc.plugins.enabled”为“false”——禁用最新添加的特性,我发现这个特性很容易造成你的浏览器被锁住,尤其是当使用一个显示PDF文件不可见标签的时候。
一旦你完成了上述步骤,你就可以测试了。点击这里来测试一下WebGL网页。
Safari
记住,Safari只支持WebGl在Mac Snow Leopard (OS X 10.6)上运行;如果你在用Leopard (10.5)、Windows或是Linux,你将不得不使用Firefox或是Chromium(如果你使用一个老版本的OS/X,我不知道你能够使用的任何一种WebGl浏览器)。
如果你在使用Snow Leopard,为了运行它,你需要:
1、确定你使用的是至少4版本的Safari;
2、下载和安装WebKit nightly build;
3、启动Terminal,在里面运行如下命令:
defaults write com.apple.Safari WebKitWebGLEnabled -bool YES
4、运行新安装的Webkit应用程序。
(感谢Chris Marrin提供相关信息)
下一步,点击这里进入WebGl页面。
http://www.web3dmarket.com/html/demo.html
Chromium
Chrome开发者最近建议你在Chrome运行WebGL的方法是使用每夜构建Chromium,Chrome就是以这个开源浏览器为基础的。设置的步骤对于每一个支持的操作系统有一点的不同;这儿是一些介绍:Windows、Macintosh和Linux(注意——我自己仅仅在Windows上试过,但我被告之在其它操作系统上运行也很好。如果有错误的地方请在下面给我留言)。
对于Windows
1、进入连续整合页面下载chrome-win32.zip;
2、在最方便的地方解压这个文件;
3、在这个解压包里,双击“chrome.exe”文件。
对于Macintosh
1、进入连续整合页面下载chrome-mac.zip;
2、在最方便的地方解压这个文件;
3、打开Terminal窗口,进入刚才解压得到的chrome-mac目录;
4、确定你现在没有运行Chrome;
5、运行下面的命令:
./Chromium.app/Contents/MacOS/Chromium
6、一旦你检查到这个是能运行的,你可能想让这运行起来更自动化一点以至于您不用每次都得输入命令;在留言里面,Julien Limoges提供了一个很有用的shell script来处理它。
对于Linux
1、如果你使用32-bit Linux,到the 32-bit continuous integration latest build page 下载 chrome-linux.zip。如果你使用64-bit版本,您可以到the 64-bit continuous integration latest build page下载 chrome-linux.zip。
2、在方便的地方解压它,打开解压的 chrome-linux 目录;
3、确定现在没有运行Chrome;
4、运行下面的命令:
./Chromium
(感谢Mohamed Mansour 提供相关信息,感谢 Ehsun Amanolahi提供最新Chrome Linux 64-bit 下载链接。)
下一步,点击这里进入WebGl页面。http://www.web3dmarket.com/html/demo.html
故障处理
我没有任何有用的建议关于让WebGL在Macs上运行,因为以前没有人问过我关于这方面的帮助,我认为我以前在论坛里也没有看见过这样的问题。我只能推断这意味着在OSX上都能运行……
对于Windows和Linux用户:WebGL不能运行的最普遍的原因是(除了没按照上述说明操作的错误)显卡的问题。所有当前的浏览器完成WebGL是以OpenGL为基础的(这个很有希望在将来的某个时候会改变),OpenGL是靠你的显卡驱动支持的。如果你用的是Intel显卡,并且你按照上面的说明对于Windows和对于Linux操作,最后还是不能工作,请在下面给我留言,我将尝试帮助解决。
如果你用的是ATI卡或是Nvidia卡,第一件事就是检查你机器上运行的OpenGL版本。对于Windows,GLview是一个极好的工具来让你得到相关信息。在Linux上,仅仅需要运行glxinfo来查找头为“OpenGL version string”的语句。如果你看到的版本数比2.0要小,你需要更新你的驱动。查看你的电脑制造商的网站,看看Windows更新或是你的 Linux distro’s package manager。
如果你仍然不能让WebGL运行,很有可能是OpenGL驱动不能被您的显卡和操作系统所利用。您现在最好的选择是使用软件渲染。这儿是关于Windows和Linux的说明。
分享到:
相关推荐
这个“WebGL教程教程教程”显然是为那些对在网页上创建交互式图形感兴趣的初学者设计的。通过学习这个教程,你可以深入了解WebGL的基础知识,包括如何设置场景、绘制几何体、应用纹理、处理光照,以及如何利用...
WebGL的核心是渲染流水线,它包括顶点着色器、片段着色器等阶段,每个阶段都允许我们对图形进行定制处理。 接下来,让我们关注TypeScript在WebGL中的应用。TypeScript为WebGL的代码带来了一些显著的好处。例如,...
写给自己看的webGL教程 初识WEBGL 假设你和我一样有一定的前端基础,而且又对于图形学很感兴趣,在CSS/canvas/svg之外的领域想要去学习更多的知识, 那就让我们一起来揭开webgl新世界的大门吧 1.什么是 计算机图形学...
这个"webgl-guide"教程是为想要学习和掌握 WebGL 的初学者以及有一定经验的开发者准备的,它包含了丰富的示例和资源,帮助你深入理解 WebGL 的核心概念和技术。 1. **WebGL 基础** - **上下文创建**:在 ...
这个“每日WebGL教程”很可能是为了帮助开发者逐步掌握这项技术,通过每日的学习和实践来提升技能。JavaScript是WebGL的基础,因为WebGL是与JavaScript紧密集成的,用于在Web上创建动态、交互式的图形体验。 WebGL...
2. **顶点和坐标系统**:WebGL使用笛卡尔坐标系,其中(0,0)位于画布中心。顶点是构成几何形状的基本单元,它们定义了模型的空间位置。你可以使用`gl.bufferData()`方法将顶点数据上传到GPU。 3. **着色器**:WebGL...
- **学习WebGL**:理解WebGL的基本概念和渲染流水线是使用webgl.js的前提,可以参考MDN Web Docs或在线教程如“Learning WebGL”系列。 - **webgl.js文档**:了解框架的具体用法,通常需要查阅项目文档或源代码,...
修复移动端访问webgl出现弹窗警告脚本,方便大家快速解决问题。
WebGL文字将文字写到WebGL画布上 :fire:安装使用安装: npm install webgl-text例该示例使用 ,但是此库可与任何webgl canvas一起使用。 import React , { Component } from 'react' ;import { autobind } from '...
webgl打包后支持中文输入,unity2021已经测试,将webglinput.cs 脚本添加到inputfield组件上即可
本次分享的WEBGL视频教程目录如下, 本次分享的WEBGL最新视频第一季主要包括如下内容,全集49集,主要是WEBGL的基础知识,包括基本的几何基础,着色器,渲染等知识,基本上涉及到了WEBGL的基础知识的方方面面!...
WebGL教程_源码 # WebGL Tutorial * https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial * http://mdn.github.io/webgl-examples/tutorial/sample1/ * ...
Unity-WebGL-实用程序 基于Unity团队的博客文章和WebGL Essentials资产包并从中获得启发的Unity WebGL游戏的一些有用实用程序。 正在安装 获取并将unitypackage导入到您的项目中。 WebGLMemoryStats 这是一种简单的...
车间-webgl-glsl 关于使用WebGL和GLSL的高级图形编程技术的大师班研讨会此仓库包含我的前端大师高级创意编码:WebGL和着色器研讨会的源代码。内容 :books: 导游 :open_book: 互动书 :fire: 演示版(在本地运行) :...
WebGL粒子系统是一种在网页上实现动态视觉效果的技术,它利用了WebGL,这是一个JavaScript API,允许在浏览器中进行硬件加速的3D图形渲染。WebGL粒子系统通常用于创建火焰、烟雾、水波、星光等特效,为网页增加丰富...
"WebGL-Snowcube" 是一个基于WebGL技术的项目,它主要展示了如何在网页中实现动态的雪景效果。WebGL是一种JavaScript API,用于在任何兼容的浏览器中进行交互式2D和3D图形渲染,无需插件。这个项目通过WebGL实现了...
#Famous WebGL 事件 使用 Famous 展示 WebGL 和 DOM 事件的实现 这是一个简单的展示了使用相同的 API 将 WebGL 和 DOM 事件一起工作的实现。 如果您有兴趣查看这个特定的 WebGL 事件模型,这里有一个使用的示例。 ...
- WebGL图形管道:详细解释了WebGL图形管道的各个阶段,以及数据是如何在各个阶段中流动和处理的。 - 与其他图形技术比较:将WebGL与其他图形技术如Canvas 2D API、SVG、WebVR等进行比较,说明了WebGL的特点和优势。...