@sakitam-gis/vis-engine v1.5.3

vis-engine

vis-engine 是一个简单的 webgl 渲染引擎工具包，它的设计受到了 threejs 和 ogl 的启发。

它的定位介于 WebGL 封装和渲染引擎之间，包含了相机，Mesh 和 Shader 模块化以及 webgl 状态管理。

Install

yarn add @sakitam-gis/vis-engine -S

pnpm i @sakitam-gis/vis-engine

import { Renderer, Raf, Scene, PerspectiveCamera, Geometry, Mesh, Program } from '@sakitam-gis/vis-engine';

Usage

Renderer

创建渲染器：

const renderer = new Renderer(canvas, {
  alpha: true,
});

Camera

创建相机：

const fov = 15;
const nearZ = 0.1;

const farZ = 100;
const camera = new PerspectiveCamera(fov, canvas.width / canvas.height, nearZ, farZ);
camera.position.z = fov;

Scene

创建场景：

const scene = new Scene();

Geometry

创建几何体对象：

const geometry = new Geometry(renderer, {
  position: {
    size: 3,
    data: new Float32Array([
      -1.6, 1.5, 0,
      -1, -1, 0,
      1, -1, 0,
      -1, -1, 0,
      1, -1, 0,
      1.6, 1.5, 0,
    ])
  },
});

Program

创建着色器资源：

const program = new Program(renderer, {
  vertexShader: `
    attribute vec2 uv;
    attribute vec3 position;
    uniform mat4 modelViewMatrix;
    uniform mat4 projectionMatrix;

    varying vec2 vUv;

    void main() {
        vUv = uv;

        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

        // gl_PointSize only applicable for gl.POINTS draw mode
        gl_PointSize = 5.0;
    }
    `,
  fragmentShader: `
    precision highp float;

    uniform float uTime;
    varying vec2 vUv;

    void main() {
        gl_FragColor.rgb = 0.5 + 0.3 * sin(vUv.yxx + uTime) + vec3(0.2, 0.0, 0.1);
        gl_FragColor.a = 1.0;
    }
    `,
  uniforms: {
    uTime: { value: 0 },
  },
});

Mesh

创建 Mesh：

const triangles = new Mesh(renderer, { mode: renderer.gl.TRIANGLES, geometry, program });

添加到场景

scene.add(triangles);

渲染

更新 uniform 变量并渲染场景：

const raf = new Raf((t) => {
  program.setUniform('uTime', t);
  renderer.render({ scene, camera });
});

Types

vis-engine 完全采用 Typescript 编写

Roadmap

📢注意：这是一个玩具项目，不是为了替代什么，但是我会尽力完善它，它最大的方向可能是和各类地图引擎结合例如 mapbox-gl/maptalks/leaflet 等，所以暂时没有固定的路线图。

• mapbox-gl adapters
• maptalks adapters

License

BSD 3-Clause