Electronic Joint Business

Solution for E-Business

webgl

WebGL 教程(三)动起来!

欢迎来到Lesson 3!在这一课中我们将开始尝试让物体运动起来。本节课的内容是基于 NeHe 的 OpenGL 教程的第四课改写的。

Here’s what the lesson looks like when run on a browser that supports WebGL:

Click here and you’ll see the live WebGL version, if you’ve got a browser that supports it; here’s how to get one if you don’t.

More on how it all works below…

The usual warning: these lessons are targeted at people with a reasonable amount of programming knowledge, but no real experience in 3D graphics; the aim is to get you up and running, with a good understanding of what’s going on in the code, so that you can start producing your own 3D Web pages as quickly as possible. If you haven’t read the first and second tutorials already, you should probably do so before reading this one — here I will only explain the differences between the code for lesson 2 and the new code.

>>> 阅读全文

 

, , , ,

WebGL 教程 (二) 添加颜色

文章评价:
英文原文
欢迎来到 WebGL 教程的第二篇。在本文中我们将会研究一下如何给场景中的物体上色。本文的内容是基于 NeHe 的 OpenGL 教程的第三章改写的。

如果你的浏览器支持 WebGL 的话,你可以点击这里 来浏览线上版本。

事先声明,本系列的教程是面向那些具备相应编程知识,但没有实际 3D 图形经验的人群;目标是让学习者创建并运行代码,并且明白代码其中的含义,从而可以快速地创建自己的 3D Web 页面。如果你还没有阅读第一课,请先看一下第一课的内容吧。因为本课中我只会讲解那些与第一课中不同的新知识。

和上一篇文章一样,本教程应该有不少错误和混淆,如果你发现了哪些毗漏,请不吝留言斧正。

有两种方法可以获得上面实例的代码:在浏览线上版本时在页面中选择“查看源代码”;你也可以从 Github 中克隆源代码的压缩包。

>>> 阅读全文

 

, , , , , ,

WebGL 教程 (一)三角形和正方形

文章评价:

欢迎来到我的第一篇 WebGL 教程 !本文借鉴了 NeHe 的 OpenGL 教程第二章,它是学习游戏开发的 3D 图形中好文章。本文将带你学习如何在网页上绘制三角形和正方形。也许这不够酷,但很好地阐述了如何用 WebGL 编程;如果你明白了这部分是如何工作,那么剩下的就相当简单了。

我们先看一下本文在支持 WebGL 的浏览器中的运行效果:

要继续本教程,你需要安装支持 WebGL 的浏览器,比如 IE11、 FireFox、Chrome 或者 Safari 等。 下面我们将继续了解如何用 WebGL 绘制三角形和正方形。

注意: 本教程是面向那些具有一定的编程知识,但没有体验过 3D 图形编程的人群,目标是让你从零开始,透过运行代码深入了解其工作原理,以便能尽快地开始编写自己的 3D 网页。我在自学 WebGL 的时候顺便写了这些教程,难免会有毗漏,欢迎大家斧正。如果您发现哪里存在谬误,请麻烦给我留言并加以指正。

>>> 阅读全文

 

, , , , , , ,

用 WebGL 和 HTML5 创建三维分子查看器

简介
许多人对 OpenGL 相当熟悉,但是对使用 WebGL 就有一点陌生。然而,许多 OpenGL 的概念和格式都可以应用到 WebGL 上。本文打算在 WebGL 编程方面做出一些尝试,可以让你了解 WebGL 的一些难易程度。象我这种略知 OpenGL 而对 WebGL 完全没概念的新手,这个例子也只花了我不到 6 个小时。现在有许多用 Java applet 或 C++ 程序写好的查看器。本项目尝试用 Javascript 和 WebGL 来完成同样的工作。让人惊讶的是,这一点也不难。

背景
WebGL 是一种 3D 绘图标准,这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起,通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定,WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染,这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了,还能创建复杂的导航和数据视觉化。显然,WebGL 技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计 3D 网页游戏等等。

如何使用本文的代码

将本文的代码安装到 Web 服务器上,你可以选用本地服务器,也可以选择远程服务器。打开 index.html ,选择 Choose File 按钮,从本机选一个 PDB 文件,然后你就可以看到分子了。

这是一些快捷键:

>>> 阅读全文

 

, , , , , ,