基于WebGL2.0的轻量级实时渲染库，方便开发人员快速搭建3D场景，同时兼顾灵活性。
已实现的特性：
- 场景管理
- 基本图元：点、线和网格
- 基本几何：球、长方体、圆环、平面
- 基本光照：环境光、平行光、点光源、聚光灯
- 光照模型：朗伯体光照、冯氏光照
- 基本效果：环境贴图、立方体贴图、虚线绘制、图像处理
- 相机：透视和正交
- 管线状态管理
- 初始化shader
const defaultLightShader = new PlumeGL.DefaultLightShader();
defaultLightShader.initParameters();
const basicLineShader = new PlumeGL.BasicLineShader();
basicLineShader.initParameters();
- 初始化场景以及状态
const scene = new PlumeGL.Scene();
scene.add(defaultLightShader);
scene.add(basicLineShader);
scene.setSceneState(new PlumeGL.State());
scene.state.setClearColor(0.0, 0.0, 0.0, 1.0);
scene.state.setClear(true, false, false);
scene.state.setDepthTest(true);
- 设置场景光源
const ambientLight = new PlumeGL.AmbientLight();
ambientLight.color = new PlumeGL.Vec3(1.0, 1.0, 1.0);
ambientLight.ambient = 0.25;
const parallelLight = new PlumeGL.ParallelLight();
parallelLight.color = new PlumeGL.Vec3(1.0, 1.0, 1.0);
parallelLight.setDirection(new PlumeGL.Vec3(-2.0, -2.0, -2.0));
scene.addLight(ambientLight);
scene.addLight(parallelLight);
- 设置P3D对象，用于管理绘制物图元数据、纹理对象以及材质对象(self uniform)
const mesh = new PlumeGL.Mesh();
mesh.setGeometryAttribute(vertices, defaultLightShader.positionAttribute, gl.STATIC_DRAW, 3, gl.FLOAT, false);
mesh.setGeometryAttribute(normals, defaultLightShader.normalAttribute, gl.STATIC_DRAW, 3, gl.FLOAT, false);
mesh.setGeometryAttribute(uvs, defaultLightShader.uvAttribute, gl.STATIC_DRAW, 2, gl.FLOAT, false);
mesh.initBufferAttributePoint(defaultLightShader);
let p3d = new PlumeGL.P3D(mesh);
defaultLightShader.addDrawObject(p3d);
p3d.setSelfUniform(defaultLightShader.uniform.secStrength, [1.0]);
p3d.setSelfUniform(defaultLightShader.uniform.specPower, [2.0]);
p3d.setSelfUniform(defaultLightShader.uniform.color, [1.0, 0.2, 0.2]);
- 设置相机
const camera = new PlumeGL.PerspectiveCamera();
camera.setPersective(fieldOfView, aspect, zNear, zFar);
camera.setView(
new PlumeGL.Vec3(0.0, 0.0, 0.0),
new PlumeGL.Vec3(0.0, 0.0, -100.0),
new PlumeGL.Vec3(0.0, 1.0, 0.0));
camera.updateMat();<br>
scene.setActiveCamera(camera);
- 渲染
scene.state.stateChange();
scene.forEachRender((shaderObj: any) => {
shaderObj.forEachDraw((obj: any) => {
obj.prepare();
obj.draw();
obj.unPrepare();
});
});
运行示例：npm run develop
