Thiết kế website giá rẻ

Question

I am using the OGL library and have a simple setup, 2 meshes acting like tiles where each will house 2 instanced cubes. I want to provide different position offsets to each of these cube instances for both of the meshes/tiles, but my code only appears to apply the same offset which can be seen in the fiddle below. Every time you run it, both meshes/tiles applies the same x and z offset to their respective cubes.

Where I create the meshes in the for loop, cOffset is supposed to have different offsets and looking at the console it actually does generate different positions. It just isnt being passed on to the vertex shader where it is to be added as:
pos.xz += cubeOffset.xz;

I update the attribute in the animation loop as well but to no avail. How can I have separate offsets passed on for each mesh, so all 4 cubes look like they are really randomly placed with no symmetry-like appearance? Thanks

body{
  width: 100%;
  height: 100vh;
}

<script type="module">

import {
  Renderer,
  Camera,
  Orbit,
  Transform,
  Box,
  Program,
  Mesh,
  Vec2,
  Vec3,
} from 'https://unpkg.com/ogl';

let vert = `
attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;
attribute vec3 cubeOffset;

uniform mat4 modelMatrix;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform mat3 normalMatrix;

uniform float uTime;

varying vec2 vUv;

void main() {
    vec3 pos = position;
    vUv = uv;
    

    pos.xz += cubeOffset.xz;
    
    gl_Position = vec4(projectionMatrix * modelViewMatrix * vec4(pos, 1.));
}`;

let frag = `
precision highp float;
uniform float uTime;

varying vec2 vUv;

void main() {

    gl_FragColor = vec4( vec3 (vUv, .0), 1. );
}`;




class Sketch{
  constructor(){

    // Vars
    this.init();
  }

  // INIT
  init(){
    
    this.renderer = new Renderer();
    this.gl = this.renderer.gl;
    this.parent = document.body;
    this.parent.appendChild(this.gl.canvas);

    // Camera related
    this.fov = 45;
    this.asp = this.gl.canvas.width / this.gl.canvas.height;
    this.camera = new Camera(this.gl, {fov: this.fov, near: 0.01, far: 500, aspect: this.asp});
    this.camera.position = new Vec3(0, 2, 3);
    this.camera.lookAt([0,0,0]);

    this.controls = new Orbit(this.camera);
    this.scene = new Transform();

    this.gl.clearColor(0, 0, 0, 1);
    
    this.program;

    // # denotes private methods
    this.#geometry();
    this.#resize();
    this.#animate();
  }

  // RESIZE
  #resize(){
    this.renderer.setSize(this.parent.clientWidth, this.parent.clientHeight);
    this.asp = this.gl.canvas.width / this.gl.canvas.height;
    this.fov = 2 * Math.atan( Math.tan( 75 * Math.PI / 180 / 2 ) / this.asp ) * 180 / Math.PI;
    this.camera.perspective({ fov: this.fov, aspect: this.asp });
  }


  // GEOMETRY
  #geometry(){

    // Number of meshes on each axis
    let num = 2;

    // Mesh size settings
    let tile_size = 1;
    
    
    // Cubes size and distribution settings
    let cubes = 2;
    let cubes_spread_multiplier = .21;

    // Blank arrays
    this.meshOffset = [];
    this.cubeOffset = [];
    
    for (let i = 0; i < num; i++) {
      let x = (i/( num - 1 )) - 0.5;
      
      this.meshOffset.push( new Vec3(
          x * tile_size + (Math.random() - .5),
          0,
          0
        ) );

    }
    

    // Object
    this.geometry = new Box( this.gl, {
      width: .1,
      height: .1,
      depth: .1,

      attributes: {
        cubeOffset: { size: 3, instanced: 1, data: new Float32Array( cubes * 3 ) },
      }
      
    })


    // Program

    this.program = new Program(this.gl, {
        vertex: vert,
        fragment: frag,
        uniforms: {
            uTime: { value: this.speed },
        },
        cullFace: null,
    });

    // Meshes
    // HERE SEPARATE RANDOM OFFSETS SHOULD APPLY TO THE 2 CUBES IN EACH MESH
    for (let i = 0; i < num; i++) {

      let cOffset = [];
      
      for (let i = 0; i < cubes; i++) {
          
        cOffset.push( new Vec3(
          Math.random() + cubes_spread_multiplier,
          Math.random() + cubes_spread_multiplier,
          Math.random() + cubes_spread_multiplier,
        ))
        
      }

// Dynamic and separate offset positions are infact being created
console.log(cOffset);

      this.geometry.attributes.cubeOffset.data = new Float32Array( cOffset.flat() );


      this.mesh = new Mesh(this.gl, { geometry: this.geometry, program: this.program });
      this.mesh.setParent(this.scene);
      
      this.mesh.position.x = this.meshOffset[i].x;
      this.mesh.position.z = this.meshOffset[i].z;
    }

  }

  // ANIMATE
  #animate(){
    
    // UPDATING VALUES
    
    this.geometry.attributes.cubeOffset.needsUpdate = true;
    this.controls.update();

    this.renderer.render({ scene: this.scene, camera: this.camera });
    requestAnimationFrame( this.#animate.bind(this) );

  }

}

new Sketch;
</script>

Thiết kế website giá rẻ

Danh mục

Webgl: Separate position offsets for instanced geometry in multiple meshes