Class HelloTextureApp

examples/hello_texture.js:4–192

import { decode } from "./extern/pngs.bundle.js";

export class HelloTextureApp extends App {
  constructor() {
    super("Hello Texture");

    const vertices = [
      [-0.0868241, 0.49240386, 0],
      [-0.49513406, 0.06958647, 0],
      [-0.21918549, -0.44939706, 0],
      [0.35966998, -0.3473291, 0],
      [0.44147372, 0.2347359, 0],
    ];

    const texCoords = [
      [0.4131759, 0.00759614],
      [0.0048659444, 0.43041354],
      [0.28081453, 0.949397],
      [0.85967, 0.84732914],
      [0.9414737, 0.2652641],
    ];

    const indices = [
      0, 1, 4,
      1, 2, 4,
      2, 3, 4,
      0,
    ];

    this.vertices = new Float32Array(vertices.length * vertices[0].length + texCoords.length * texCoords[0].length);
    for (let i = 0; i < vertices.length; i++) {
      const vertex = vertices[i], texCoord = texCoords[i];
      const offset = i * vertex.length + i * texCoord.length;
      this.vertices.set(vertex, offset);
      this.vertices.set(texCoord, offset + vertex.length);
    }

    this.indices = new Uint16Array(indices);

    this.textureImage = decode(Deno.readFileSync(new URL("./extern/tree.png", import.meta.url)));
  }

  async init() {
    const shaderModule = await this.loadShader("hello_texture");

    this.vertexBuffer = this.createBuffer({
      label: "Vertex Buffer",
      data: this.vertices,
      usage: GPUBufferUsage.VERTEX,
    });

    this.indexBuffer = this.createBuffer({
      label: "Index Buffer",
      data: this.indices,
      usage: GPUBufferUsage.INDEX,
    });

    this.texture = this.device.createTexture({
      label: "Tree Texture",
      size: {