lightgl.js 技术文档

1. 安装指南

1.1 环境准备

在开始安装之前，请确保您的系统已经安装了以下工具：

• Python（用于构建库）
• Node.js（用于运行UglifyJS）

1.2 下载项目

您可以通过以下命令将项目克隆到本地：

git clone https://github.com/evanw/lightgl.js.git
cd lightgl.js

1.3 构建库

进入项目目录后，您可以使用以下命令来构建lightgl.js库：

• 构建开发版本：

  python build.py
  

• 构建调试版本（自动监听文件变化并重新构建）：

  python build.py debug
  

• 构建生产版本（压缩代码）：

  python build.py release
  

1.4 生成文档

您可以使用以下命令生成项目的文档：

docco src/*.js

生成的文档将位于docs目录下。

2. 项目的使用说明

2.1 引入库

在您的HTML文件中引入lightgl.js库：

<script src="lightgl.js"></script>

2.2 创建WebGL上下文

使用GL.create()方法创建一个WebGL上下文：

var gl = GL.create();

2.3 创建网格和着色器

您可以使用GL.Mesh创建一个网格对象，并使用GL.Shader创建一个着色器对象：

var mesh = GL.Mesh.cube();
var shader = new GL.Shader(`
  void main() {
    gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
  }
`, `
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
`);

2.4 设置渲染回调

通过设置gl.onupdate和gl.ondraw回调函数来控制动画和渲染：

gl.onupdate = function(seconds) {
  angle += 45 * seconds;
};

gl.ondraw = function() {
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  gl.loadIdentity();
  gl.translate(0, 0, -5);
  gl.rotate(30, 1, 0, 0);
  gl.rotate(angle, 0, 1, 0);

  shader.draw(mesh);
};

2.5 启动动画

使用gl.fullscreen()和gl.animate()方法启动全屏动画：

gl.fullscreen();
gl.animate();

3. 项目API使用文档

3.1 GL 对象

GL对象是lightgl.js的核心对象，提供了创建WebGL上下文、矩阵操作、渲染等功能。

3.1.1 GL.create()

创建一个WebGL上下文：

var gl = GL.create();

3.1.2 GL.Matrix

提供了矩阵操作功能，类似于OpenGL的矩阵栈：

gl.loadIdentity();
gl.translate(x, y, z);
gl.rotate(angle, x, y, z);

3.2 GL.Mesh 对象

GL.Mesh用于创建和管理3D网格对象：

var mesh = GL.Mesh.cube();

3.3 GL.Shader 对象

GL.Shader用于创建和管理着色器：

var shader = new GL.Shader(vertexShaderSource, fragmentShaderSource);

3.4 GL.Texture 对象

GL.Texture用于加载和管理纹理：

var texture = new GL.Texture(image);

3.5 GL.Vector 对象

GL.Vector用于处理向量运算：

var vector = new GL.Vector(x, y, z);

4. 项目安装方式

4.1 通过GitHub克隆

您可以通过以下命令将项目克隆到本地：

git clone https://github.com/evanw/lightgl.js.git

4.2 通过CDN引入

您也可以直接通过CDN引入lightgl.js库：

<script src="http://evanw.github.com/lightgl.js/lightgl.js"></script>

4.3 手动下载

您可以从项目的GitHub页面手动下载lightgl.js文件，并将其放置在您的项目目录中。

通过以上步骤，您可以顺利安装并使用lightgl.js库进行WebGL应用的开发。