master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_loader_texture_dds.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - materials - compressed textures</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">Verge3D</a> - webgl - compressed textures<br/>
      leaf texture by <a href="http://opengameart.org/node/10505">lauris71</a>, explosion texture by <a href="http://opengameart.org/node/7728">bart</a>
    </div>

    <script type="module">

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

      import { DDSLoader } from './jsm/loaders/DDSLoader.js';

      let camera, scene, renderer;
      const meshes = [];

      init();
      animate();

      function init() {

        camera = new v3d.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 2000);
        camera.position.z = 1000;

        scene = new v3d.Scene();

        const geometry = new v3d.BoxBufferGeometry(200, 200, 200);

        /*
        This is how compressed textures are supposed to be used:

        DXT1 - RGB - opaque textures
        DXT3 - RGBA - transparent textures with sharp alpha transitions
        DXT5 - RGBA - transparent textures with full alpha range
        */

        const loader = new DDSLoader();

        const map1 = loader.load('textures/compressed/disturb_dxt1_nomip.dds');
        map1.minFilter = map1.magFilter = v3d.LinearFilter;
        map1.anisotropy = 4;

        const map2 = loader.load('textures/compressed/disturb_dxt1_mip.dds');
        map2.anisotropy = 4;

        const map3 = loader.load('textures/compressed/hepatica_dxt3_mip.dds');
        map3.anisotropy = 4;

        const map4 = loader.load('textures/compressed/explosion_dxt5_mip.dds');
        map4.anisotropy = 4;

        const map5 = loader.load('textures/compressed/disturb_argb_nomip.dds');
        map5.minFilter = map5.magFilter = v3d.LinearFilter;
        map5.anisotropy = 4;

        const map6 = loader.load('textures/compressed/disturb_argb_mip.dds');
        map6.anisotropy = 4;

        const cubemap1 = loader.load('textures/compressed/Mountains.dds', function(texture) {

          texture.magFilter = v3d.LinearFilter;
          texture.minFilter = v3d.LinearFilter;
          texture.mapping = v3d.CubeReflectionMapping;
          material1.needsUpdate = true;

        });

        const cubemap2 = loader.load('textures/compressed/Mountains_argb_mip.dds', function(texture) {

          texture.magFilter = v3d.LinearFilter;
          texture.minFilter = v3d.LinearFilter;
          texture.mapping = v3d.CubeReflectionMapping;
          material5.needsUpdate = true;

        });

        const cubemap3 = loader.load('textures/compressed/Mountains_argb_nomip.dds', function(texture) {

          texture.magFilter = v3d.LinearFilter;
          texture.minFilter = v3d.LinearFilter;
          texture.mapping = v3d.CubeReflectionMapping;
          material6.needsUpdate = true;

        });

        const material1 = new v3d.MeshBasicMaterial({ map: map1, envMap: cubemap1 });
        const material2 = new v3d.MeshBasicMaterial({ map: map2 });
        const material3 = new v3d.MeshBasicMaterial({ map: map3, alphaTest: 0.5, side: v3d.DoubleSide });
        const material4 = new v3d.MeshBasicMaterial({ map: map4, side: v3d.DoubleSide, blending: v3d.AdditiveBlending, depthTest: false, transparent: true });
        const material5 = new v3d.MeshBasicMaterial({ envMap: cubemap2 });
        const material6 = new v3d.MeshBasicMaterial({ envMap: cubemap3 });
        const material7 = new v3d.MeshBasicMaterial({ map: map5 });
        const material8 = new v3d.MeshBasicMaterial({ map: map6 });

        let mesh = new v3d.Mesh(new v3d.TorusBufferGeometry(100, 50, 32, 16), material1);
        mesh.position.x = - 600;
        mesh.position.y = - 200;
        scene.add(mesh);
        meshes.push(mesh);

        mesh = new v3d.Mesh(geometry, material2);
        mesh.position.x = - 200;
        mesh.position.y = - 200;
        scene.add(mesh);
        meshes.push(mesh);

        mesh = new v3d.Mesh(geometry, material3);
        mesh.position.x = - 200;
        mesh.position.y = 200;
        scene.add(mesh);
        meshes.push(mesh);

        mesh = new v3d.Mesh(geometry, material4);
        mesh.position.x = - 600;
        mesh.position.y = 200;
        scene.add(mesh);
        meshes.push(mesh);

        mesh = new v3d.Mesh(geometry, material5);
        mesh.position.x = 200;
        mesh.position.y = 200;
        scene.add(mesh);
        meshes.push(mesh);

        mesh = new v3d.Mesh(geometry, material6);
        mesh.position.x = 200;
        mesh.position.y = - 200;
        scene.add(mesh);
        meshes.push(mesh);

        mesh = new v3d.Mesh(geometry, material7);
        mesh.position.x = 600;
        mesh.position.y = - 200;
        scene.add(mesh);
        meshes.push(mesh);

        mesh = new v3d.Mesh(geometry, material8);
        mesh.position.x = 600;
        mesh.position.y = 200;
        scene.add(mesh);
        meshes.push(mesh);

        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 time = Date.now() * 0.001;

        for (let i = 0; i < meshes.length; i++) {

          const mesh = meshes[i];
          mesh.rotation.x = time;
          mesh.rotation.y = time;

        }

        renderer.render(scene, camera);

      }

    </script>

  </body>
</html>