Skip to content

Latest commit

 

History

History
91 lines (91 loc) · 3.58 KB

README.md

File metadata and controls

91 lines (91 loc) · 3.58 KB

PlumeGL

基于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

示例:parallel light cube

image

示例:ortho camera cube

image

示例:texture sample

image

示例:fbo split

image

示例:buffer uniform

image

示例:fbo multisample

image

示例:phong shpere

image