webgl_test_memory.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D - webgl memory test I</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">
    <style>
      body {
        background-color: #fff;
        color: #000;
      }
      a {
        color: #08f;
      }
    </style>
  </head>

  <body>
    <div id="info">
      <a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> - memory test I
    </div>

    <!-- Import maps polyfill -->
    <!-- Remove this when import maps will be widely supported -->
    <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

    <script type="importmap">
      {
        "imports": {
          "v3d": "../build/v3d.module.js",
          "v3d/addons/": "./jsm/"
        }
      }
    </script>

    <script type="module">

      import * as v3d from 'v3d';

      let camera, scene, renderer;

      init();
      animate();

      function init() {

        const container = document.createElement('div');
        document.body.appendChild(container);

        camera = new v3d.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
        camera.position.z = 200;

        scene = new v3d.Scene();
        scene.background = new v3d.Color(0xffffff);

        renderer = new v3d.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);

      }

      function createImage() {

        const canvas = document.createElement('canvas');
        canvas.width = 256;
        canvas.height = 256;

        const context = canvas.getContext('2d');
        context.fillStyle = 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ')';
        context.fillRect(0, 0, 256, 256);

        return canvas;

      }

      //

      function animate() {

        requestAnimationFrame(animate);

        render();

      }

      function render() {

        const geometry = new v3d.SphereGeometry(50, Math.random() * 64, Math.random() * 32);

        const texture = new v3d.CanvasTexture(createImage());

        const material = new v3d.MeshBasicMaterial({ map: texture, wireframe: true });

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

        scene.add(mesh);

        renderer.render(scene, camera);

        scene.remove(mesh);

        // clean up

        geometry.dispose();
        material.dispose();
        texture.dispose();

      }

    </script>

  </body>
</html>