luma.gl/examples/tutorials/lighting/app-ubo.ts.disabled

import {Buffer, UniformStore, glsl} from '@luma.gl/core';
import {AnimationLoopTemplate, AnimationProps, Model, CubeGeometry, ShaderModuleUniforms} from '@luma.gl/engine';
import {projection, Projection} from '@luma.gl/shadertools';
import {phongLighting, Lighting, PhongMaterial} from '@luma.gl/shadertools';
import {Matrix4} from '@math.gl/core';

const INFO_HTML = `
<p>
Drawing a phong-shaded cube
</p>
`;

const vs = glsl`\#version 300 es

  attribute vec3 positions;
  attribute vec3 normals;
  attribute vec2 texCoords;

  uniform appUniforms {
    uniform mat4 mvpMatrix;
    uniform mat4 modelMatrix;
    uniform vec3 eyePosition;
  } projection;

  out vec3 vPosition;
  out vec3 vNormal;
  out vec2 vUV;

  void main(void) {
    vPosition = (projection.modelMatrix * vec4(positions, 1.0)).xyz;
    vNormal = mat3(projection.modelMatrix) * normals;
    vUV = texCoords;
    gl_Position = projection.mvpMatrix * vec4(positions, 1.0);
  }
`;

const fs = glsl`\#version 300 es

  precision highp float;

  uniform sampler2D uTexture;

  uniform appUniforms {
    uniform mat4 mvpMatrix;
    uniform mat4 modelMatrix;
    uniform vec3 eyePosition;
  } projection;

  in vec3 vPosition;
  in vec3 vNormal;
  in vec2 vUV;

  void main(void) {
    vec3 materialColor = texture2D(uTexture, vec2(vUV.x, 1.0 - vUV.y)).rgb;
    vec3 surfaceColor = lighting_getLightColor(materialColor, projection.eyePosition, vPosition, normalize(vNormal));
    gl_FragColor = vec4(surfaceColor, 1.0);
  }
`;

const eyePosition = [0, 0, 5];

export default class AppAnimationLoopTemplate extends AnimationLoopTemplate {
  static info = INFO_HTML;

  model: Model;
  modelMatrix = new Matrix4();
  viewMatrix = new Matrix4().lookAt({eye: eyePosition});
  mvpMatrix = new Matrix4();
  
  uniformStore = new UniformStore<{
    projection: Projection,
    lighting: Lighting,
    material: PhongMaterial
  }>().setUniforms({
    projection: {},
    material: {
      specularColor: [255, 255, 255]
    },
    lighting: {
      ambientLight: {
        type: 'ambient',
        color: [255, 255, 255],
        intensity: 1
      },
      pointLights: [{
        type: 'point',
        color: [255, 255, 255],
        position: [1, 2, 1],
        intensity: 1
      }]
    }
  });

  projectionModuleUniforms: ShaderModuleUniforms<Projection>;
  lightingModuleUniforms: ShaderModuleUniforms<Lighting>;

  projectionModuleBuffer: Buffer;

  constructor({device}: AnimationProps) {
    super();

    this.projectionModuleUniforms = new ShaderModuleUniforms<Projection>({device, shaderModule: projection});
    this.lightingModuleUniforms = new ShaderModuleUniforms<Lighting>({device, shaderModule: phongLighting});
  
    const texture = device.createTexture({data: 'vis-logo.png'});
    this.projectionModuleBuffer = device.createBuffer({usage: Buffer.UNIFORM});

    this.model = new Model(device, {
      vs,
      fs,
      geometry: new CubeGeometry(),
      modules: [phongLighting],
      moduleSettings: {
        material: {
          specularColor: [255, 255, 255]
        },
        lights: [
          {
            type: 'ambient',
            color: [255, 255, 255]
          },
          {
            type: 'point',
            color: [255, 255, 255],
            position: [1, 2, 1]
          }
        ]
      },
      bindings: {
        uTexture: texture,
        appUniforms: this.appUniformBuffer
      },
      uniforms: {
        uEyePosition: eyePosition
      },
      parameters: {
        depthWriteEnabled: true,
        depthCompare: 'less-equal'  
      }
    });
  }

  override onFinalize() {
    this.model.destroy();
  }

  override onRender({device, aspect, tick}) {
    this.modelMatrix
      .identity()
      .rotateX(tick * 0.01)
      .rotateY(tick * 0.013);

    this.mvpMatrix
      .perspective({fovy: Math.PI / 3, aspect})
      .multiplyRight(this.viewMatrix)
      .multiplyRight(this.modelMatrix);

    this.model.setUniforms({uMVP: this.mvpMatrix, uModel: this.modelMatrix});

    const renderPass = device.beginRenderPass({
      clearColor: [0, 0, 0, 1], 
    });
    this.model.draw(renderPass);
    renderPass.end();
  }
}