gl-camera

高性能透视相机实现，专为实时渲染场景优化，基于Float32Array的内存布局和内联计算，支持多模块系统（ESM/CJS/IIFE）。

特性

- 极致性能：内联向量计算消除函数调用开销，Float32Array直接操作减少内存占用
- 多模块支持：同时提供ESM、CJS和IIFE格式，适配各种工程环境
- 零依赖：纯TypeScript实现，无第三方依赖
- API友好：兼顾兼容性（lookAt）和高性能路径（lookAt32）

模块支持

| 模块类型 | 引入方式 | 适用环境 |
|----------|---------------------------|------------------------------|
| ESM | import { ... } from 'gl-camera' | 现代浏览器、Webpack/Rollup |
| CJS | const { ... } = require('gl-camera') | Node.js、旧版构建工具 |
| IIFE | | 直接浏览器引入（全局变量） |

安装

bash

npm

npm install gl-camera



yarn

yarn add gl-camera



pnpm

pnpm add gl-camera

$3

html







快速开始



$3

typescript

import { PerspectiveCamera } from 'gl-camera';



// 创建相机

const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);



// 设置位置

camera.position.set([0, 0, 5]);



// 高性能朝向设置（Float32Array）

const target = new Float32Array([0, 0, 0]);

camera.lookAt32(target);



// 渲染循环中使用

function render() {

  const viewMatrix = camera.matrixWorldInverse;

  const projMatrix = camera.projectionMatrix;

  // 传递给WebGL程序...

}

$3

javascript

const { PerspectiveCamera } = require('gl-camera');



const camera = new PerspectiveCamera(50, 16/9, 0.1, 100);

// ...使用方式同上

$3

html







核心优化点



1. 内存效率

   - 向量使用

Float32Array

存储（每个向量12字节，比对象形式节省40%内存）

   - 内置向量池循环复用3个向量实例，避免GC



2. 计算性能

   - 内联向量运算（减法/叉乘/归一化），减少函数调用开销

   -

lookAt32方法专为Float32Array优化，省去类型判断（比通用lookAt

快15%-20%）

   - 矩阵更新仅在必要时执行（通过脏标记控制）



3. 兼容性设计

   - 保留

lookAt多参数重载（支持数值坐标和Float32Array

）

   - 自动矩阵更新机制，可手动禁用提升性能





API 文档



$3

typescript

new PerspectiveCamera(fov?: number, aspect?: number, near?: number, far?: number)

fov

：垂直视野角度（默认50度）

-

aspect

：宽高比（默认1）

-

near

：近平面距离（默认0.1）

-

far

：远平面距离（默认2000）





$3



| 属性名              | 类型          | 说明                          |

|---------------------|---------------|-------------------------------|

|

position | Float32Array

| 相机位置（[x, y, z]）         |

|

up | Float32Array

| 上方向向量（[x, y, z]）       |

|

target | Float32Array

| 目标点坐标（[x, y, z]）       |

|

projectionMatrix | Float32Array

| 4x4投影矩阵（列优先）         |

|

matrixWorldInverse| Float32Array

| 4x4视图矩阵（列优先）         |

|

matrixWorld | Float32Array

| 4x4世界矩阵（列优先）         |





$3



####

lookAt(target: Float32Array): void

  

####

lookAt(x: number, y: number, z: number): void

  

设置相机朝向目标点（兼容多参数类型）



####

lookAt32(target: Float32Array): void

  

高性能版本，仅接受

Float32Array

参数（无类型判断）



####

updateProjectionMatrix(): void

  

手动更新投影矩阵（参数变化时调用）



####

updateMatrixWorld(force?: 0 | 1): void

  

手动更新世界矩阵和视图矩阵（位置/朝向变化时调用）



####

markMatrixDirty(): void

  

标记矩阵为"脏"状态，触发自动更新





$3



| 方法/属性           | 说明                          |

|---------------------|-------------------------------|

|

matrixAutoUpdate | 投影矩阵自动更新（默认true

） |

|

matrixWorldAutoUpdate | 世界矩阵自动更新（默认true

） |





性能对比



| 操作                | 传统实现      | gl-camera    | 提升幅度       |

|---------------------|---------------|--------------|----------------|

| 单次

lookAt

调用    | ~0.008ms      | ~0.006ms     | 25%            |

| 矩阵完整更新        | ~0.042ms      | ~0.027ms     | 35.7%          |

| 1000次相机更新      | ~38ms         | ~22ms        | 42.1%          |





适用场景



- WebGL/Three.js底层优化

- 实时3D渲染（游戏、可视化）

- VR/AR应用（高帧率需求）

- 移动设备或低性能环境





注意事项



- IIFE版本全局变量固定为

glcamera



- 向量操作通过索引（

position[0]）而非属性（position.x

）

- 禁用自动更新后，需手动调用

updateProjectionMatrix和updateMatrixWorld



- 确保

lookAt32输入的Float32Array`至少包含3个元素

gl-camera

高性能透视相机实现，专为实时渲染场景优化，基于Float32Array的内存布局和内联计算，支持多模块系统（ESM/CJS/IIFE）。

特性

模块支持

安装

bash

npm

npm install gl-camera



yarn

yarn add gl-camera



pnpm

pnpm add gl-camera

$3

html







快速开始



$3

typescript

import { PerspectiveCamera } from 'gl-camera';



// 创建相机

const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);



// 设置位置

camera.position.set([0, 0, 5]);



// 高性能朝向设置（Float32Array）

const target = new Float32Array([0, 0, 0]);

camera.lookAt32(target);



// 渲染循环中使用

function render() {

  const viewMatrix = camera.matrixWorldInverse;

  const projMatrix = camera.projectionMatrix;

  // 传递给WebGL程序...

}

$3

javascript

const { PerspectiveCamera } = require('gl-camera');



const camera = new PerspectiveCamera(50, 16/9, 0.1, 100);

// ...使用方式同上

$3

html







核心优化点



1. 内存效率

   - 向量使用

Float32Array

存储（每个向量12字节，比对象形式节省40%内存）

   - 内置向量池循环复用3个向量实例，避免GC



2. 计算性能

   - 内联向量运算（减法/叉乘/归一化），减少函数调用开销

   -

lookAt32方法专为Float32Array优化，省去类型判断（比通用lookAt

快15%-20%）

   - 矩阵更新仅在必要时执行（通过脏标记控制）



3. 兼容性设计

   - 保留

lookAt多参数重载（支持数值坐标和Float32Array

）

   - 自动矩阵更新机制，可手动禁用提升性能





API 文档



$3

typescript

new PerspectiveCamera(fov?: number, aspect?: number, near?: number, far?: number)

fov

：垂直视野角度（默认50度）

-

aspect

：宽高比（默认1）

-

near

：近平面距离（默认0.1）

-

far

：远平面距离（默认2000）





$3



| 属性名              | 类型          | 说明                          |

|---------------------|---------------|-------------------------------|

|

position | Float32Array

| 相机位置（[x, y, z]）         |

|

up | Float32Array

| 上方向向量（[x, y, z]）       |

|

target | Float32Array

| 目标点坐标（[x, y, z]）       |

|

projectionMatrix | Float32Array

| 4x4投影矩阵（列优先）         |

|

matrixWorldInverse| Float32Array

| 4x4视图矩阵（列优先）         |

|

matrixWorld | Float32Array

| 4x4世界矩阵（列优先）         |





$3



####

lookAt(target: Float32Array): void

  

####

lookAt(x: number, y: number, z: number): void

  

设置相机朝向目标点（兼容多参数类型）



####

lookAt32(target: Float32Array): void

  

高性能版本，仅接受

Float32Array

参数（无类型判断）



####

updateProjectionMatrix(): void

  

手动更新投影矩阵（参数变化时调用）



####

updateMatrixWorld(force?: 0 | 1): void

  

手动更新世界矩阵和视图矩阵（位置/朝向变化时调用）



####

markMatrixDirty(): void

  

标记矩阵为"脏"状态，触发自动更新





$3



| 方法/属性           | 说明                          |

|---------------------|-------------------------------|

|

matrixAutoUpdate | 投影矩阵自动更新（默认true

） |

|

matrixWorldAutoUpdate | 世界矩阵自动更新（默认true

） |





性能对比



| 操作                | 传统实现      | gl-camera    | 提升幅度       |

|---------------------|---------------|--------------|----------------|

| 单次

lookAt

调用    | ~0.008ms      | ~0.006ms     | 25%            |

| 矩阵完整更新        | ~0.042ms      | ~0.027ms     | 35.7%          |

| 1000次相机更新      | ~38ms         | ~22ms        | 42.1%          |





适用场景



- WebGL/Three.js底层优化

- 实时3D渲染（游戏、可视化）

- VR/AR应用（高帧率需求）

- 移动设备或低性能环境





注意事项



- IIFE版本全局变量固定为

glcamera



- 向量操作通过索引（

position[0]）而非属性（position.x

）

- 禁用自动更新后，需手动调用

updateProjectionMatrix和updateMatrixWorld



- 确保

lookAt32输入的Float32Array`至少包含3个元素