FilamentJS prototype example

tutorial.js

class App {

  constructor() {

    this.canvas = document.getElementsByTagName('canvas')[0]
    this.render = this.render.bind(this);
    this.resize = this.resize.bind(this);

    const TRIANGLE_POSITIONS = Filament.BufferDescriptor(new Float32Array([
        1, 0,
        Math.cos(Math.PI * 2 / 3), Math.sin(Math.PI * 2 / 3),
        Math.cos(Math.PI * 4 / 3), Math.sin(Math.PI * 4 / 3),
    ]));

    const TRIANGLE_COLORS = Filament.BufferDescriptor(new Uint32Array([
        0xffff0000,
        0xff00ff00,
        0xff0000ff,
    ]));

    const BAKED_COLOR_PACKAGE = Filament.BufferDescriptor(Filament.assets['bakedColor.filamat']);

    const engine = this.engine = Filament.Engine.create(this.canvas);
    this.scene = engine.createScene();
    this.triangle = Filament.EntityManager.get().create();
    this.scene.addEntity(this.triangle);

    const VertexAttribute = Filament.VertexAttribute;
    const AttributeType = Filament.VertexBuffer$AttributeType;
    this.vb = Filament.VertexBuffer.Builder()
        .vertexCount(3)
        .bufferCount(2)
        .attribute(VertexAttribute.POSITION, 0, AttributeType.FLOAT2, 0, 8)
        .attribute(VertexAttribute.COLOR, 1, AttributeType.UBYTE4, 0, 4)
        .normalized(VertexAttribute.COLOR)
        .build(engine);

    this.vb.setBufferAt(engine, 0, TRIANGLE_POSITIONS);
    this.vb.setBufferAt(engine, 1, TRIANGLE_COLORS);

    this.ib = Filament.IndexBuffer.Builder()
        .indexCount(3)
        .bufferType(Filament.IndexBuffer$IndexType.USHORT)
        .build(engine);

    this.ib.setBuffer(engine, Filament.BufferDescriptor(new Uint16Array([0, 1, 2])));

    this.mat = engine.createMaterial(BAKED_COLOR_PACKAGE);

    Filament.RenderableManager.Builder(1)
        .boundingBox([[ -1, -1, -1 ], [ 1, 1, 1 ]])
        .material(0, this.mat.getDefaultInstance())
        .geometry(0, Filament.RenderableManager$PrimitiveType.TRIANGLES, this.vb, this.ib)
        .culling(false)
        .receiveShadows(false)
        .castShadows(false)
        .build(engine, this.triangle);

    this.swapChain = engine.createSwapChain();
    this.renderer = engine.createRenderer();
    this.camera = engine.createCamera();

    this.view = engine.createView();
    this.view.setCamera(this.camera);
    this.view.setScene(this.scene);
    this.view.setClearColor([0.1, 0.125, 0.25, 1.0]);
    this.view.setPostProcessingEnabled(false);
    this.view.setDepthPrepass(Filament.View$DepthPrepass.DISABLED);

    this.resize();
    window.addEventListener("resize", this.resize);
    window.requestAnimationFrame(this.render);
  }

  render() {
    if (this.renderer.beginFrame(this.swapChain)) {
      this.renderer.render(this.view);
      this.renderer.endFrame();
    }
    this.engine.execute();
    window.requestAnimationFrame(this.render);
  }

  resize() {
    const ratio = window.devicePixelRatio;
    const width = window.innerWidth;
    const height = window.innerHeight;
    this.canvas.width = width * ratio;
    this.canvas.height = height * ratio;
    this.view.setViewport([0, 0, width * ratio, height * ratio]);
  }
}

Filament.init(['bakedColor.filamat'], () => { Window.app = new App() } );