master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_materials_texture_partialupdate...

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - texture - partial update</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="main.css">
  </head>
  <body>

    <div id="info">
      <a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener noreferrer">Verge3D</a> - partial texture update <br/>
      replace parts of an existing texture with all data of another texture
    </div>

    <script type="module">

      import * as v3d from '../build/v3d.module.js';

      let camera, scene, renderer, clock, dataTexture, diffuseMap;

      let last = 0;
      const position = new v3d.Vector2();
      const color = new v3d.Color();

      init();

      function init() {

        camera = new v3d.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
        camera.position.z = 2;

        scene = new v3d.Scene();

        clock = new v3d.Clock();

        const loader = new v3d.TextureLoader();
        diffuseMap = loader.load('textures/floors/FloorsCheckerboard_S_Diffuse.jpg', animate);
        diffuseMap.minFilter = v3d.LinearFilter;
        diffuseMap.generateMipmaps = false;

        const geometry = new v3d.PlaneBufferGeometry(2, 2);
        const material = new v3d.MeshBasicMaterial({ map: diffuseMap });

        const mesh = new v3d.Mesh(geometry, material);
        scene.add(mesh);

        //

        const width = 32;
        const height = 32;

        const data = new Uint8Array(width * height * 3);
        dataTexture = new v3d.DataTexture(data, width, height, v3d.RGBFormat);

        //

        renderer = new v3d.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        //

        window.addEventListener('resize', onWindowResize, false);

      }

      function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);

      }

      function animate() {

        requestAnimationFrame(animate);

        const elapsedTime = clock.getElapsedTime();

        if (elapsedTime - last > 0.1) {

          last = elapsedTime;

          position.x = (32 * v3d.MathUtils.randInt(1, 16)) - 32;
          position.y = (32 * v3d.MathUtils.randInt(1, 16)) - 32;

          // generate new color data

          updateDataTexture(dataTexture);

          // perform copy from src to dest texture to a random position

          renderer.copyTextureToTexture(position, dataTexture, diffuseMap);

        }

        renderer.render(scene, camera);

      }

      function updateDataTexture(texture) {

        const size = texture.image.width * texture.image.height;
        const data = texture.image.data;

        // generate a random color and update texture data

        color.setHex(Math.random() * 0xffffff);

        const r = Math.floor(color.r * 255);
        const g = Math.floor(color.g * 255);
        const b = Math.floor(color.b * 255);

        for (let i = 0; i < size; i++) {

          const stride = i * 3;

          data[stride] = r;
          data[stride + 1] = g;
          data[stride + 2] = b;

        }

      }

    </script>

  </body>
</html>