前面文章：WebGL入门教程(一)-初识webglWebGL入门教程(二)-webgl绘制三角形WebGL入门教程(三)-webgl动画颜色效果图： 操作步骤： 1.创建HTML5 canvas 2.获取画布 canvas 的 ID 3.获取WebGL 4.编译着色器 5.使用缓冲区对象向顶点传入多个顶点数据 6.绘制图像以上1~3参考：http://www.cnblogs.com/bsman/p/6128447.html4.编译着色器改顶点着色器，片着色器//顶点着色器程序var VSHADER_SOURCE ="attribute vec4 a_Position;" +...
WebGL入门教程第1篇——六色立方WebGL，一项允许开发人员在浏览器里操纵GPU来显示图形的技术。让我们一起走进WebGL的世界。 读者对象 本系列适合具有基础JavaScript知识的开发人员。 准备工作 我们应该在本地搭建好web服务器，或者安装了具有预览功能的IDE。如果你安装了Visual Studio，Nivk童鞋为我们开发了WebGL代码提示功能，你可以通过以下步骤使Visual Studio支持WebGL代码提示：打开Visual Studio——点击工具——点击选项—...
webgl介绍 WebGL是一种3D绘图协议，它把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染。 WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏。 原生的WebGl比较复杂，主要通过对顶点着色器和片元着色器的操作，来实现渲染，但实现起来比较复杂，需要一定的数学基础，但更多的是需...
基于HTML5的WebGL设计汉诺塔3D游戏在这里我们将构造一个基于HT for Web的HTML5+JavaScript来实现汉诺塔游戏。http://hightopo.com/demo/hanoi_20151106/index.html汉诺塔的游戏规则及递归算法分析请参考http://en.wikipedia.org/wiki/Tower_of_Hanoi。知道了汉诺塔的规则和算法，现在就开始创建元素。用HT for Web（http://www.hightopo.com）现有的3D模板创建底盘和3根柱子不是问题，问题是要创建若干个中空的圆盘。一开始的想法是...
基于HTML5的WebGL结合Box2DJS物理引擎应用上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果，这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果，同上篇其实Box2DJS只是二维的平面碰撞物理引擎，但同样通过3D的呈现能让人更直观的体验到碰撞效果，最终例子效果：http://hightopo.com/demo/box2djs/ht-box2d-demo.htmlBox2D最早是Erin Catto在GDC大会上的一个展示例子，后来不断完善成C++的开源物理引擎库，...
前面我们看到了使用原生的WebGL API开发是多么的累，正因为如此，大量的WebGL框架被开发出来。使用这些框架，你可以快速创建需要的3D场景。这些框架不同程度的封装了创建3D场景的各种要素，例如场景，相机、模型、光照、材质等等；使用这些封装起来的对象，就可以很简单的创建需要的3D场景，这样你就只需要把更多精力放在逻辑方面就可以了。目前并没有哪一个具有能压倒其他框架的优势，选择什么样的框，还是看个人喜好吧，不过选择...
WebGL开启了网页3D渲染的新时代，它允许在canvas中直接渲染3D的内容，而不借助任何插件。WebGL同canvas 2D的API一样，都是通过脚本操纵对象，所以步骤也是基本相似：准备工作上下文，准备数据，在canvas中绘制对象并渲染。与2D不同的就是3D涉及的知识更多了，例如世界、光线、纹理、相机、矩阵等专业知识。WebGL有一个很好的中文教程，就是下面使用参考中的第一个链接，所以这里不再班门弄斧，后面的内容只是简单的总结一下学习的内...