首页 > 开发 > CSS > 正文

在支持HTML5的浏览器上运行WebGL程序的方法

2024-07-11 08:30:05

字体：大中小

来源：转载

供稿：网友

前提条件和预期结果

目前只有少数的浏览器支持 WebGL ，请看我的另外一篇文章：Can I use WebGL?.

下面的例子是在 Windows 下的 Chrome 16/23 以及 Android 下的 Firefox 17 进行测试。如果你使用的是非兼容浏览器访问则会弹出一个警告。
2015618155306361.png (418×380)

图1：包含 Hello world 文本的动画的 WebGL 立方体
在兼容 HTML5 的浏览器上，你将会看到如下图所示的带动画效果的立方体：
2015618155324527.jpg (600×404)

图2: 示例运行的屏幕截图

该代码基于 Lighting in WebGL - How to simulate lighting effects in your WebGL context - 非常感谢这篇教程。在该实例初始运行时，动画的立方体是通过一个静态的 Bitmap 图形对象渲染的。

下面的代码演示如何在程序中动态的渲染文本：

XML/HTML Code复制内容到剪贴板

// TODO #1 New method to create a texture function createCubeTexture(text) {
... }

在这里使用 gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); 是非常重要的，用来确保写文本时不会前后颠倒。剩下的就很容易理解了：

XML/HTML Code复制内容到剪贴板

// TODO #2 Assign the created texture for display cubeTexture = createCubeTexture("Hello World!");

源码

// File #1: webgl-demo.htm

XML/HTML Code复制内容到剪贴板

<html> <head>
<title>WebGL - Hello World!</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="sylvester.js" type="text/javascript"></script> <script src="glUtils.js" type="text/javascript"></script>
<script src="webgl-demo.js" type="text/javascript"></script>
<script id="shader-fs" type="x-shader/x-fragment">

上一篇：详解CSS中clear:left/right的用法

下一篇：CSS中currentColor关键字的使用教程

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注