摘要： 对JavaScript中类继承的方法的总结 阅读全文

摘要： 在HTML5中，canvas节点所提供的2d上下文（context），具备一组对像素进行操作的方法：getImageData/putImageData/createImageData。通过这三个方法，我们可以进行像素级别的图像处理。比如可以移植传统的各种滤镜算法，在web页面中开发出一套类似于PS的图片处理应用，等等。 一般来讲，我们首先会通过getImageData方法，获取canvas上一个... 阅读全文

摘要： 首先提示一下：如果你无法在本地搭建一个web服务环境，请暂时不要测试本例。由于WebGL安全方面的限制，本例中用到一张帖图仅能通过相对路径在本域调用，file协议是无法看到下图效果的，仅能看到一片移动的方形。 效果图：（图1） 类似效果使用Canvas2d绘图也可以实现。下面这个地址就是一个2D实现的例子。（图2） http://muse-js-lib.googlecode.com... 阅读全文

摘要： 一共不到十篇的文章，算不上长篇大论，也没有什么深入分析，只不过把自己一步步的学习过程简单记录下来。同时也是对MDN教程代码的重写，做了相应的删改，去掉了一些可能会干扰思路的部分。 原来是想直接翻译MDN的原文，但是感觉原文代码不太严谨，而且是一个例子贯穿始终；再加之自己E文也是水平不咋的，倒不如唠点大白话、提供几个例子更符合我个人的风格和能力水平、更喜闻乐见一点。 WebGL笔记（... 阅读全文

摘要： 上篇提到过关于贴图的两个限制： 1、跨域安全限制 跟AJAX之类差不多，但是没有测试根目录下具有安全配置文件（一些xml）的情况。当然，不出意外，本地浏览(file协议)调用相对路径图片也是不可以的。所以，连测试只能在一个web平台下进行。 2、图片格式问题 MDN上有个提示： https://developer.mozilla.org/en/WebGL/Using_textures_i... 阅读全文

摘要： 按MDN的顺序，这篇应该是讲贴图的。但贴图有两个问题不好处理： 1、贴图来源跨域。这种约束的感觉和AJAX差不多，而且MDN也有解释，我想根据经验应该很容易理解； 2、图片格式。这个交待得比较含糊，仅仅有一个提示： Note: Textures' widths and heights must be a power of two number of pixels (that is, 1... 阅读全文

摘要： 我觉得花太多篇幅讲数据封装有点跑题了。但是既然开始了，那就做完。 按上篇的约定，这篇说GroupHelper。 GroupHelper目的是管理一个较长的一维数组，具有data和array两个属性。data是数据本身，array是对应的ArrayHelper的数组。 function GroupHelper(count, model){ this.data = ... 阅读全文

摘要： 顶点和颜色数据，均是数组类型，但数据冗长，例如一个立方体的颜色数据长度有96个，顶点为72个，管理比较麻烦。但是二者又有很大的相似性，不同之处仅在于分组的大小和取值范围。按照面向对象编程的思路，应该首先封装一个数组管理基类，然后通过继承和重载来分别实现顶点和颜色类。 基于Javascript面向对象方面的特性，首先建立一个工厂类作为实现继承的工具： var Inherit = { ... 阅读全文

摘要： 第一篇笔记曾经提到过WebGLHelper对象，但是实际后续的篇幅中并没有使用这个Helper。为了封装的需要，现在我们需要开始讨论并完善这个对象。在这两天的封装过程中，经过删改，WebGLHelper最终形态如下： /* * WebGLHelper * 管理WebGL的辅助对象 */ var WebGLHelper = { /* 根据ID定位DOM元素 */ ... 阅读全文

摘要： 终于要在三维的场景里绘制一个三维的物体了——1个Cube。 我们先来厘清几个事情： 一个立方体有6个面，每个面4个顶点，所以要绘制24个顶点。 每个顶点位置由3个数字表示，所以顶点信息是72个数字的数组。 每个顶点颜色由4个数字表示，所以颜色信息是96个数字的数组。 先看一看长长的顶点数组： var vertices = [ // Front fa... 阅读全文