Babylon.js ThinEngine sample

by cx20

HTML

<script src="https://cdn.babylonjs.com/babylon.js"></script>
<canvas id="renderCanvas" width="400" height="400"></canvas>

CSS

* {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

body {
  background: #fff;
  font: 30px sans-serif;
}

JavaScript

class TriangleRenderer {
  constructor(canvas) {
    this.engine = new BABYLON.ThinEngine(canvas, true);
    this.clearColor = { r: 0.1, g: 0.1, b: 0.2, a: 1.0 };

    this.setupGeometry();
    this.createEffect();
    this.setupCanvas();
  }

  setupGeometry() {
    const positions = [ 
         0.0, 0.5, 0.0, // v0
        -0.5,-0.5, 0.0, // v1
         0.5,-0.5, 0.0  // v2
    ];
    const colors = [
        1.0, 0.0, 0.0,  // read
        0.0, 1.0, 0.0,  // green
        0.0, 0.0, 1.0   // blue
    ];

    this.positionBuffer = new BABYLON.VertexBuffer(this.engine, positions, "position", true, false, 3, false);
    this.colorBuffer = new BABYLON.VertexBuffer(this.engine, colors, "color", true, false, 3, false);
    this.vertexBuffers = { position: this.positionBuffer, color: this.colorBuffer };
  }

  createEffect() {
    const vertexShader = `
                    attribute vec3 position;
                    attribute vec3 color;
                    varying vec3 vColor;
                    void main(void) {
                        vColor = color;
                        gl_Position = vec4(position, 1.0);
                    }
                `;

    const fragmentShader = `
                    precision mediump float;
                    varying vec3 vColor;
                    void main() {
                        gl_FragColor = vec4(vColor, 1.0);
                    }
                `;

    this.effectWrapper = new BABYLON.EffectWrapper({
      engine: this.engine,
      name: "triangle",
      vertexShader: vertexShader,
      fragmentShader: fragmentShader,
      attributeNames: ["position", "color"]
    });
  }

  setupCanvas() {
    const canvas = this.engine.getRenderingCanvas();
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    this.engine.setSize(window.innerWidth, window.innerHeight);
  }

  render() {
    if (!this.effectWrapper.effect.isReady()) return...