index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
  <title>File14 Studios</title>

  <style>
    body {
      font-family: Monospace;
      background-color: #000000;
      margin: 0px;
      overflow: hidden;

    }

    #info {
      color: white;
      opacity: 0.5;
      text-align: center;
      font-weight: bold;
    }

    .scrolling-text {
      white-space: nowrap;
      animation: scroll 30s linear infinite;
      color: black;
      font-size: 50px;
      font-weight: 1000;
      font: bolder;
      background-color: yellow;
      z-index: 1;
      opacity: 0.6;
      width: max-content;
      position: relative;
      padding: 7px 7px;
    }

    #scrolling-container {
      /* overflow: hidden; */
      /* Hides any text that overflows the container */
      position: fixed;
      bottom: 35px;
      left: 0;
      width: 100%;
    }

    .banner {
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 50px;
      padding-left: 15px;
      padding-top: 15px;
      font-size: 30px;
    }

    .icon-container {
      font-size: 50px;
      z-index: 9999;
      display: flex;
      justify-content: space-between;
      opacity: 0.3;
      width: 150px;
    }

    .logo-container {
      z-index: 9999;
      opacity: 0.5;
      max-width: 200px;
    }

    .logo-container>img {
      width: 100%;
    }

    .icon-container i {
      color: #ffffff;

    }

    .icon-container i:hover {
      color: #c4c4c4;
    }

    @media screen and (max-width: 900px) {

      .banner {
        flex-direction: column;
        padding: 0;
        font-size: 20px;
      }

      #info {
        order: 2;
      }

      .icon-container {
        order: 1;
      }

      .scrolling-text {
        font-size: 30px;
      }

    }

    @keyframes scroll {
      0% {
        transform: translateX(0px);
        /* Starts the text off the right side of the screen */
      }

      100% {
        transform: translateX(-2529.12px);
        /* Ends the text off the left side of the screen */
      }
    }
    
  </style>
</head>

<body>
  <div class="banner">

    <div class="logo-container">
      <img src="./File14WhiteonTransparentSMALL.png" alt="File14 Studios">
    </div>

    <div id="info">WEBSITE UNDER CONSTRUCTION</div>

    <div class="icon-container">
      <a href="https://twitter.com/File14Studios" target="_blank" rel="noreferrer"><i class="fab fa-twitter"></i></a>
      <a href="https://discord.gg/pyqPBKks" target="_blank" rel="noreferrer"><i class="fab fa-discord"></i></a>
    </div>

  </div>

  <div id="scrolling-container">
    <div class="scrolling-text">
      // FILE14 STUDIOS: A WEB3 DEVELOPMENT COMPANY&nbsp;// FILE14 STUDIOS: A WEB3 DEVELOPMENT COMPANY&nbsp;// FILE14
      STUDIOS: A WEB3 DEVELOPMENT COMPANY&nbsp;// FILE14 STUDIOS: A WEB3 DEVELOPMENT COMPANY&nbsp;// FILE14 STUDIOS: A
      WEB3 DEVELOPMENT COMPANY&nbsp;
      // FILE14 STUDIOS: A WEB3 DEVELOPMENT COMPANY&nbsp;// FILE14 STUDIOS: A WEB3 DEVELOPMENT COMPANY&nbsp;// FILE14
      STUDIOS: A WEB3 DEVELOPMENT COMPANY&nbsp;
    </div>
  </div>

  <script src="js/three.js"></script>
  <script src="js/GPGPU.js"></script>
  <script src="js/GeometryUtils.js"></script>
  <script src="js/gpgpu/SimulationShader.js"></script>

  <script src="js/leap-0.6.4.min.js"></script>
  <script src="js/leap-plugins-0.1.6.1.js"></script>
  <script src="js/leap.rigged-hand-0.1.3.min.js"></script>

  <script src="helvetiker_bold.typeface.js"></script>

  <!-- WebGL 1 shaders -->
  <script id="vs-particles" type="x-shader/x-vertex">
      uniform sampler2D map;
      uniform float width;
      uniform float height;
      uniform float pointSize;

      varying vec2 vUv;
      varying vec4 vPosition;

      void main() {
        vUv = position.xy + vec2( 0.5 / width, 0.5 / height );

        vec3 color = texture2D( map, vUv ).rgb;

        gl_PointSize = pointSize;
        gl_Position = projectionMatrix * modelViewMatrix * vec4( color, 1.0 );
      }
    </script>

  <script id="fs-particles" type="x-shader/x-fragment">
      uniform sampler2D map;

      varying vec2 vUv;
      varying vec4 vPosition;

      void main() {
        float depth = smoothstep( 10.24, 1.0, gl_FragCoord.z / gl_FragCoord.w );
      

        gl_FragColor = vec4(((vec3(1.0, 0.25, 0.0) + (texture2D(map, vUv).xyz * 0.25)) * 0.25), depth);

      }
    </script>

  <!-- WebGL 2 shaders -->
  <script id="vs-particles-2" type="x-shader/x-vertex">
      uniform float pointSize;

      varying vec3 vPosition;

      void main() {
        vPosition = position;
        gl_PointSize = pointSize;
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
      }
    </script>

  <script id="fs-particles-2" type="x-shader/x-fragment">
      varying vec3 vPosition;

      void main() {
        float depth = smoothstep( 10.24, 1.0, gl_FragCoord.z / gl_FragCoord.w );
    
        gl_FragColor = vec4(((vec3(1.0, 0.25, 0.0) + (vPosition * 0.25)) * 0.25), depth);

      }
    </script>

  <script>

    let mainText = (window.innerWidth > 1050) ? 'File14' : 'F14'
    // If the viewport is wider than 1050px, show "File14"
    // Otherwise, show just "14"

    function getQueryString(name, defaultValue) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == name) {
          return unescape(pair[1]);
        }
      }
      return defaultValue;
    }

    function getQueryValue(name, defaultValue) {
      var value = getQueryString(name, null);
      if (value == null) {
        return defaultValue;
      }
      return parseInt(value, 10);
    }

    var container, canvas, gl;

    var scene, camera, light, renderer;
    var geometry, geometry2, originGeometry, cube, mesh, material;
    var roomMesh;

    var data, texture, points;

    var controls;

    var fboParticles, rtTexturePos, rtTexturePos2, simulationShader;

    var width = getQueryValue('width', 1024);
    var height = getQueryValue('height', 1024);
    var pointSize = getQueryValue('pointSize', 1);

    var maxFingers = 42;
    var fingers = [];
    var fingertipSize = 0.18;
    var handOffset = new THREE.Vector3(0, -2.5, 0.0);
    var colliders = new Float32Array(maxFingers * 4);
    var showColliders = false;

    var leapController = new Leap.Controller();

    var isWebGL2 = false;

    /*     function init() {
          container = document.createElement('div');
          document.body.appendChild(container);
    
          canvas = document.createElement('canvas');
    
          var tryGL2 = getQueryValue('webgl2', 1);
    
          if (tryGL2) {
            // Try creating a WebGL 2 context first
            gl = canvas.getContext('webgl2', { antialias: false });
            if (!gl) {
              gl = canvas.getContext('experimental-webgl2', { antialias: false });
            }
            isWebGL2 = !!gl;
            if (isWebGL2) {
              console.log("I can haz flag, so WebGL 2 is yes!")
            }
          }
    
          renderer = new THREE.WebGLRenderer({ canvas: canvas, context: gl });
          renderer.setSize(window.innerWidth, window.innerHeight);
          renderer.sortObjects = false;
          container.appendChild(renderer.domElement);
    
          scene = new THREE.Scene(); */
    function init() {
      container = document.createElement('div');
      document.body.appendChild(container);

      canvas = document.createElement('canvas');

      var tryGL2 = getQueryValue('webgl2', 1);

      if (tryGL2) {
        // Try creating a WebGL 2 context first
        gl = canvas.getContext('webgl2', { antialias: false });
        if (!gl) {
          gl = canvas.getContext('experimental-webgl2', { antialias: false });
        }
        isWebGL2 = !!gl;
        if (isWebGL2) {
          console.log("I can haz flag, so WebGL 2 is yes!")
        }
      }

      renderer = new THREE.WebGLRenderer({ canvas: canvas, context: gl });
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.sortObjects = false;
      container.appendChild(renderer.domElement);

      scene = new THREE.Scene();

      // Listen to the window resize event and call the onWindowResize function
      window.addEventListener('resize', onWindowResize, false);

      /*       camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1024);
            camera.position.y = 1.5;
            camera.position.z = 4;
            camera.lookAt(scene.position);
            scene.add(camera); */

      camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1024);
      camera.position.set(0, 0, 6); // set the distance to the scene
      camera.lookAt(scene.position);
      scene.add(camera);


      showColliders = getQueryValue('colliders', 0) != 0;
      var fingerMaterial = new THREE.MeshPhongMaterial({ color: 0x00000 });
      var fingerGeometry = new THREE.IcosahedronGeometry(1, 2);

      for (var i = 0; i < maxFingers; ++i) {
        var finger = {
          active: false,
          mesh: new THREE.Mesh(fingerGeometry, fingerMaterial)
        };
        scene.add(finger.mesh);
        fingers.push(finger);
      }

      light = new THREE.DirectionalLight(0xffffff, 0.5);
      light.position.set(0, 100, 0);
      scene.add(light);

      var texture_placeholder;
      texture_placeholder = document.createElement('canvas');
      texture_placeholder.width = 128;
      texture_placeholder.height = 128;
      var context = texture_placeholder.getContext('2d');
      context.fillStyle = 'black';
      context.fillRect(0, 0, texture_placeholder.width, texture_placeholder.height);

      var backImage = THREE.ImageUtils.loadTexture("media/Black.png");
      backImage.image = texture_placeholder;
      backImage.needsUpdate = true;
      var ceilImage = THREE.ImageUtils.loadTexture("media/Black.png");
      ceilImage.image = texture_placeholder;
      ceilImage.needsUpdate = true;
      var floorImage = THREE.ImageUtils.loadTexture("media/Black.png");
      floorImage.image = texture_placeholder;
      floorImage.needsUpdate = true;
      var sideImage = THREE.ImageUtils.loadTexture("media/Black.png");
      sideImage.image = texture_placeholder;
      sideImage.needsUpdate = true;

      var roomMaterialArray = [
        new THREE.MeshBasicMaterial({ map: sideImage, side: THREE.BackSide }),
        new THREE.MeshBasicMaterial({ map: sideImage, side: THREE.BackSide }),
        new THREE.MeshBasicMaterial({ map: ceilImage, side: THREE.BackSide }),
        new THREE.MeshBasicMaterial({ map: floorImage, side: THREE.BackSide }),
        new THREE.MeshBasicMaterial({ map: backImage, side: THREE.BackSide }),
        new THREE.MeshBasicMaterial({ map: backImage, side: THREE.BackSide })
      ];

      var roomMaterial = new THREE.MeshFaceMaterial(roomMaterialArray);
      var roomGeometry = new THREE.BoxGeometry(10.24, 4, 5.12);
      roomMesh = new THREE.Mesh(roomGeometry, roomMaterial);
      roomMesh.doubleSided = true;
      scene.add(roomMesh);

      //

      if (!isWebGL2 && !renderer.context.getExtension('OES_texture_float')) {
        alert('OES_texture_float is not :(');
      }

      // Start Creation of DataTexture
      var textGeo = new THREE.TextGeometry(mainText, {
        size: 1.0,
        height: 0.2,
        curveSegments: 0.0,
        font: "helvetiker",
        weight: "bold",
        style: "normal",
      });

      textGeo.computeBoundingBox();

      var bounds = textGeo.boundingBox;
      /* var center = bounds.getCenter(new THREE.Vector3()); */

      var screenWidth = window.innerWidth;
      var screenHeight = window.innerHeight;

      // Set the position of the text geometry to the center of the screen
      textGeo.applyMatrix(new THREE.Matrix4().makeTranslation(
        -(bounds.max.x - bounds.min.x) / 2,   // center horizontally
        -(bounds.max.y - bounds.min.y) / 2,   // center vertically
        0                                     // no z-translation needed
      ));

      points = THREE.GeometryUtils.randomPointsInGeometry(textGeo, width * height);


      data = new Float32Array(width * height * 4);
      for (var i = 0, j = 0, l = data.length; i < l; i += 4, j += 1) {
        data[i] = points[j].x;
        data[i + 1] = points[j].y;
        data[i + 2] = points[j].z;
        data[i + 3] = 0.0;
      }

      if (isWebGL2) {
        geometry = new THREE.BufferGeometry();
        geometry.addAttribute('position', new THREE.BufferAttribute(data, 4));
        geometry2 = geometry.clone();

        material = new THREE.ShaderMaterial({
          uniforms: {
            "pointSize": { type: "f", value: pointSize }
          },
          vertexShader: document.getElementById('vs-particles-2').textContent,
          fragmentShader: document.getElementById('fs-particles-2').textContent,
          blending: THREE.AdditiveBlending,
          depthWrite: false,
          depthTest: true,
          transparent: true
        });

        gpgpu = new GPGPU2(renderer);
        simulationShader = new GPGPU.SimulationShader2(renderer, maxFingers);
        simulationShader.setOriginData(data);
      } else {
        texture = new THREE.DataTexture(data, width, height, THREE.RGBAFormat, THREE.FloatType);
        texture.minFilter = THREE.NearestFilter;
        texture.magFilter = THREE.NearestFilter;
        texture.needsUpdate = true;

        // zz85 - fbo init

        rtTexturePos = new THREE.WebGLRenderTarget(width, height, {
          wrapS: THREE.RepeatWrapping,
          wrapT: THREE.RepeatWrapping,
          minFilter: THREE.NearestFilter,
          magFilter: THREE.NearestFilter,
          format: THREE.RGBAFormat,
          type: THREE.FloatType,
          stencilBuffer: false
        });

        rtTexturePos2 = rtTexturePos.clone();

        gpgpu = new GPGPU(renderer);
        simulationShader = new GPGPU.SimulationShader(maxFingers);
        simulationShader.setOriginsTexture(texture);

        geometry = new THREE.Geometry();

        for (var i = 0, l = width * height; i < l; i++) {
          var vertex = new THREE.Vector3();
          vertex.x = (i % width) / width;
          vertex.y = Math.floor(i / width) / height;
          geometry.vertices.push(vertex);
        }

        material = new THREE.ShaderMaterial({
          uniforms: {
            "map": { type: "t", value: rtTexturePos },
            "width": { type: "f", value: width },
            "height": { type: "f", value: height },
            "pointSize": { type: "f", value: pointSize }
          },
          vertexShader: document.getElementById('vs-particles').textContent,
          fragmentShader: document.getElementById('fs-particles').textContent,
          blending: THREE.AdditiveBlending,
          depthWrite: false,
          depthTest: true,
          transparent: true
        });
      }

      mesh = new THREE.PointCloud(geometry, material);
      scene.add(mesh);

      simulationShader.setColliders(colliders);

      leapController
        .use('handHold', {})
        .use('handEntry', {})
        .use('riggedHand', {
          parent: scene,
          camera: camera,
          scale: 0.2,
          offset: handOffset,
          materialOptions: {
            opacity: showColliders ? 0.5 : 1.0
          }
        })
        .connect();
    }

    function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    }

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

    function fingerToCollider(i, size) {
      var finger = fingers[i];
      var o = i * 4;
      if (finger.active) {
        colliders[o] = finger.mesh.position.x;
        colliders[o + 1] = finger.mesh.position.y;
        colliders[o + 2] = finger.mesh.position.z;
        colliders[o + 3] = size ? size : fingertipSize;
      } else {
        colliders[o + 3] = -1;
      }
    }

    function fingerFromBone(bone, fi, size) {
      if (fi >= fingers.length) return;
      if (!size) { size = fingertipSize; }
      bone.updateMatrixWorld();
      fingers[fi].active = true;
      fingers[fi].mesh.visible = showColliders;
      fingers[fi].mesh.position.setFromMatrixPosition(bone.matrixWorld);
      fingers[fi].mesh.scale.set(size, size, size);
      fingerToCollider(fi, size);
    }

    function updateHands() {
      var frame = leapController.frame();

      var fi = 0;
      if (frame.hands) {
        for (var i = 0; i < frame.hands.length; ++i) {
          var hand = frame.hands[i];
          var handMesh = hand.data('riggedHand.mesh');

          fingerFromBone(handMesh, fi++, fingertipSize * 2.0);

          for (var j = 0; j < handMesh.fingers.length; ++j) {
            var meshFinger = handMesh.fingers[j];
            fingerFromBone(meshFinger.tip, fi++, fingertipSize * 0.8);
            fingerFromBone(meshFinger.dip, fi++, fingertipSize * 0.9);
            fingerFromBone(meshFinger.pip, fi++);
            fingerFromBone(meshFinger, fi++, fingertipSize * 1.1);
          }
        }
      }

      for (; fi < fingers.length; ++fi) {
        fingers[fi].active = false;
        fingers[fi].mesh.visible = false;
        fingerToCollider(fi);
      }
    }

    var timer = 0;
    var count = 0;
    function render() {
      requestAnimationFrame(render);

      updateHands();

      timer += 0.002;
      simulationShader.setTimer(timer);

      // Ugly hack to make the particle mesh always draw last
      scene.remove(mesh); scene.add(mesh);

      if (isWebGL2) {
        if (count % 2 === 0) {
          gpgpu.pass(simulationShader, geometry2, geometry);
          mesh.geometry = geometry2;
        } else {
          gpgpu.pass(simulationShader, geometry, geometry2);
          mesh.geometry = geometry;
        }
      } else {
        if (count % 2 === 0) {
          gpgpu.pass(simulationShader.setPositionsTexture(rtTexturePos), rtTexturePos2);
          material.uniforms.map.value = rtTexturePos;
        } else {
          gpgpu.pass(simulationShader.setPositionsTexture(rtTexturePos2), rtTexturePos);
          material.uniforms.map.value = rtTexturePos2;
        }
      }

      count++;

      renderer.render(scene, camera);
    }

    init();

    render();

  </script>
</body>

</html>