master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_buffergeometry_rawshader.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - raw 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="container"></div>
    <div id="info"><a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> - raw shader demo</div>

    <script id="vertexShader" type="x-shader/x-vertex">

      precision mediump float;
      precision mediump int;

      uniform mat4 modelViewMatrix; // optional
      uniform mat4 projectionMatrix; // optional

      attribute vec3 position;
      attribute vec4 color;

      varying vec3 vPosition;
      varying vec4 vColor;

      void main()  {

        vPosition = position;
        vColor = color;

        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

      }

    </script>

    <script id="fragmentShader" type="x-shader/x-fragment">

      precision mediump float;
      precision mediump int;

      uniform float time;

      varying vec3 vPosition;
      varying vec4 vColor;

      void main()  {

        vec4 color = vec4(vColor);
        color.r += sin(vPosition.x * 10.0 + time) * 0.5;

        gl_FragColor = color;

      }

    </script>

    <script type="module">

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

      import Stats from './jsm/libs/stats.module.js';

      let container, stats;

      let camera, scene, renderer;

      init();
      animate();

      function init() {

        container = document.getElementById('container');

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

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

        // geometry
        // nr of triangles with 3 vertices per triangle
        const vertexCount = 200 * 3;

        const geometry = new v3d.BufferGeometry();

        const positions = [];
        const colors = [];

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

          // adding x,y,z
          positions.push(Math.random() - 0.5);
          positions.push(Math.random() - 0.5);
          positions.push(Math.random() - 0.5);

          // adding r,g,b,a
          colors.push(Math.random() * 255);
          colors.push(Math.random() * 255);
          colors.push(Math.random() * 255);
          colors.push(Math.random() * 255);

        }

        const positionAttribute = new v3d.Float32BufferAttribute(positions, 3);
        const colorAttribute = new v3d.Uint8BufferAttribute(colors, 4);

        colorAttribute.normalized = true; // this will map the buffer values to 0.0f - +1.0f in the shader

        geometry.setAttribute('position', positionAttribute);
        geometry.setAttribute('color', colorAttribute);

        // material

        const material = new v3d.RawShaderMaterial({

          uniforms: {
            time: { value: 1.0 }
          },
          vertexShader: document.getElementById('vertexShader').textContent,
          fragmentShader: document.getElementById('fragmentShader').textContent,
          side: v3d.DoubleSide,
          transparent: true

        });

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

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

        stats = new Stats();
        container.appendChild(stats.dom);

        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);

        render();
        stats.update();

      }

      function render() {

        const time = performance.now();

        const object = scene.children[0];

        object.rotation.y = time * 0.0005;
        object.material.uniforms.time.value = time * 0.005;

        renderer.render(scene, camera);

      }

    </script>

  </body>
</html>