master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_shaders_sky.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - shaders - sky sun shader</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 - sky + sun shader
    </div>

    <script type="module">

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

      import { GUI } from './jsm/libs/dat.gui.module.js';
      import { OrbitControls } from './jsm/controls/OrbitControls.js';
      import { Sky } from './jsm/objects/Sky.js';

      let camera, scene, renderer;

      let sky, sun;

      init();
      render();

      function initSky() {

        // Add Sky
        sky = new Sky();
        sky.scale.setScalar(450000);
        scene.add(sky);

        sun = new v3d.Vector3();

        /// GUI

        const effectController = {
          turbidity: 10,
          rayleigh: 3,
          mieCoefficient: 0.005,
          mieDirectionalG: 0.7,
          inclination: 0.49, // elevation / inclination
          azimuth: 0.25, // Facing front,
          exposure: renderer.toneMappingExposure
        };

        function guiChanged() {

          const uniforms = sky.material.uniforms;
          uniforms["turbidity"].value = effectController.turbidity;
          uniforms["rayleigh"].value = effectController.rayleigh;
          uniforms["mieCoefficient"].value = effectController.mieCoefficient;
          uniforms["mieDirectionalG"].value = effectController.mieDirectionalG;

          const theta = Math.PI * (effectController.inclination - 0.5);
          const phi = 2 * Math.PI * (effectController.azimuth - 0.5);

          sun.x = Math.cos(phi);
          sun.y = Math.sin(phi) * Math.sin(theta);
          sun.z = Math.sin(phi) * Math.cos(theta);

          uniforms["sunPosition"].value.copy(sun);

          renderer.toneMappingExposure = effectController.exposure;
          renderer.render(scene, camera);

        }

        const gui = new GUI();

        gui.add(effectController, "turbidity", 0.0, 20.0, 0.1).onChange(guiChanged);
        gui.add(effectController, "rayleigh", 0.0, 4, 0.001).onChange(guiChanged);
        gui.add(effectController, "mieCoefficient", 0.0, 0.1, 0.001).onChange(guiChanged);
        gui.add(effectController, "mieDirectionalG", 0.0, 1, 0.001).onChange(guiChanged);
        gui.add(effectController, "inclination", 0, 1, 0.0001).onChange(guiChanged);
        gui.add(effectController, "azimuth", 0, 1, 0.0001).onChange(guiChanged);
        gui.add(effectController, "exposure", 0, 1, 0.0001).onChange(guiChanged);

        guiChanged();

      }

      function init() {

        camera = new v3d.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 100, 2000000);
        camera.position.set(0, 100, 2000);

        scene = new v3d.Scene();

        const helper = new v3d.GridHelper(10000, 2, 0xffffff, 0xffffff);
        scene.add(helper);

        renderer = new v3d.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.outputEncoding = v3d.sRGBEncoding;
        renderer.toneMapping = v3d.ACESFilmicToneMapping;
        renderer.toneMappingExposure = 0.5;
        document.body.appendChild(renderer.domElement);

        const controls = new OrbitControls(camera, renderer.domElement);
        controls.addEventListener('change', render);
        //controls.maxPolarAngle = Math.PI / 2;
        controls.enableZoom = false;
        controls.enablePan = false;

        initSky();

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

      }

      function onWindowResize() {

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

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

        render();

      }

      function render() {

        renderer.render(scene, camera);

      }

    </script>

  </body>

</html>