Toggle DOM view

README.md

@@ -0,0 +1,90 @@
+<h1 align="center">Exokit Studio</h1>
+<p align="center"><b>An interface for the <a href="https://github.com/exokitxr/exokit">Exokit Engine</a>.</b></p>
+
+<p align="center">
+  <a href="https://github.com/exokitxr/studio/releases"><img src="https://img.shields.io/github/downloads/exokitxr/studio/total.svg"></a>
+  <a href="https://www.npmjs.com/package/exokit-studio"><img src="https://img.shields.io/npm/v/exokit-studio.svg"></a>
+  <a href="https://github.com/exokitxr/studio/issues"><img src="https://img.shields.io/github/issues/exokitxr/studio.svg"></a>
+  <a href="https://github.com/exokitxr/studio"><img src="https://img.shields.io/github/forks/exokitxr/studio.svg"></a>
+  <a href="https://github.com/exokitxr/studio"><img src="https://img.shields.io/github/stars/exokitxr/studio.svg"></a>
+  <a href="https://twitter.com/exokitxr"><img src="https://img.shields.io/twitter/follow/exokitxr.svg?style=social"></a>
+</p>
+
+<div align="center">
+  <a href="https://exokit.org">Site</a>
+  &mdash;
+  <a href="https://exokit.org/docs/">Docs</a>
+  &mdash;
+  <a href="https://discordapp.com/invite/Apk6cZN">Discord</a>
+  &mdash;
+  <a href="https://twitter.com/exokitxr">Twitter</a>
+  &mdash;
+  <a href="http://eepurl.com/dFiLMz">Email List</a>
+</div>
+
+## Examples
+
+<a href="https://youtu.be/cd_DEwCDF6U"><img alt="Hands Reality Tab" target="_blank" src="https://user-images.githubusercontent.com/29695350/58765576-07fb0700-853a-11e9-9d16-42abbef42014.PNG" height="190" width="32%"></a>
+<a href="https://youtu.be/b-UKSg0QCRE"><img alt="Live Reload Magic Leap" target="_blank" src="https://user-images.githubusercontent.com/29695350/58765576-07fb0700-853a-11e9-9d16-42abbef42014.PNG" height="190" width="32%"></a>
+<a href="https://youtu.be/O1xA1r5SZUM"><img alt="Tutorial Reality Tab" target="_blank" src="https://user-images.githubusercontent.com/29695350/58765576-07fb0700-853a-11e9-9d16-42abbef42014.PNG" height="190" width="32%"></a>
+
+<a href="https://www.youtube.com/watch?v=m_QntqZmd_Q"><img alt="Reality Projection with HTC Vive and Magic Leap" target="_blank" src="https://user-images.githubusercontent.com/29695350/58765577-09c4ca80-853a-11e9-8db2-46e26a9aad8b.PNG" height="190" width="32%"></a>
+<a href="https://youtu.be/i0MXRCNkdB4"><img alt="Emukit" target="_blank" src="https://user-images.githubusercontent.com/29695350/58765577-09c4ca80-853a-11e9-8db2-46e26a9aad8b.PNG" height="190" width="32%"></a>
+<a href="https://exokit.org/"><img alt="Various Exokit Apps" target="_blank" src="https://user-images.githubusercontent.com/29695350/58765577-09c4ca80-853a-11e9-8db2-46e26a9aad8b.PNG" height="190" width="32%"></a>
+
+*Find more examples on [YouTube](https://www.youtube.com/channel/UC87Q7_5ooY8FSLwOec52ZPQ).*
+
+
+## Overview
+
+Exokit Studio **enables developers to build XR experiences with ease** by having a seamless interface to the Exokit Engine. Studio prefers using GUIs instead of command lines with difficult to remember arguments to use the functionality you want.
+
+Studio uses the [Exokit Engine](https://github.com/exokitxr/exokit), which is written on top of Node and emulates a web browser, providing native hooks for WebGL, WebGL2, WebVR, WebXR, WebAudio, and other APIs used in immersive experiences.
+
+:eyeglasses: **Exokit Engine currently targets the following platforms**:
+* OpenVR Desktop VR (Steam compatible)
+* HTC Vive
+* Valve Index *
+* Oculus Desktop (Oculus Rift, Oculus Rift S)
+* Oculus Mobile (Oculus Quest, Oculus Go, GearVR)
+* Magic Leap
+* iOS ARKit *
+* Android ARCore *
+* Google VR (Daydream / Cardboard / Mirage Solo) *
+* Hololens / Hololens 2 *
+* any XR device, start a [pull request](https://github.com/exokitxr/exokit/compare) to the Exokit Engine with a native binding if it isn't listed here! *
+
+\* not supported yet
+
+:electric_plug: **Exokit Engine powers experiences built with**:
+* Three.js
+* Unity
+* Pixi.js
+* Babylon.js
+* A-Frame
+* Custom WebGL frameworks
+* WebAssembly, TypeScript, and any language that transpiles to JavaScript
+* Unity WebVR export *
+* SteamVR *
+* any 3d web framework, start a [pull request](https://github.com/exokitxr/exokit/compare) to the Exokit Engine if a 3d web framework isn't currently supported! *
+
+\* not supported yet
+
+## Quickstart
+
+### Desktop
+<h4><a href="https://get.exokit.org">Download and install Studio for current OS</a></h4>
+
+### Local Development
+
+```sh
+git clone https://github.com/exokitxr/studio.git
+cd studio
+npm install
+npm build
+```
+
+## Stay in Touch
+
+- [Join our Discord](https://discord.gg/Apk6cZN) for discussions.
+- [Follow @exokitxr on Twitter](https://twitter.com/exokitxr) for updates.

exobot.html

@@ -0,0 +1,149 @@
+<html>
+  <head>
+   <meta charset="utf-8">
+   <meta http-equiv="X-UA-Compatible" content="IE=edge">
+   <meta name="viewport" content="width=device-width, initial-scale=1">
+   <meta name="theme-color" content="#008000"/>
+   <title>exobot</title>
+   <link rel="manifest" href="exobot_manifest.json">
+   <script>
+    if('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('/exobot_sw.js')
+        .then(function() {
+              console.log('Service Worker Registered');
+        });
+    }
+   </script>
+    <style>
+      body {
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+  <h1>exobot</h1>
+  <script src="three.js"></script>
+  <script src="GLTFLoader.js"></script>
+  <script>
+    let container, scene, camera, session, model;
+
+    function init() {
+      container = document.createElement('div');
+      document.body.appendChild(container);
+
+      scene = new THREE.Scene();
+      scene.matrixAutoUpdate = false;
+      // scene.background = new THREE.Color(0x3B3961);
+
+      camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
+      // camera.position.set(0, 1, 0);
+      camera.lookAt(new THREE.Vector3());
+      scene.add(camera);
+
+      const ambientLight = new THREE.AmbientLight(0x808080);
+      scene.add(ambientLight);
+
+      const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 1);
+      directionalLight.position.set(1, 1, 1);
+      scene.add(directionalLight);
+
+      {
+        const loader = new THREE.GLTFLoader(); // .setPath( 'models/' );
+        loader.load( 'exobot.glb', function ( o ) {
+
+          o = o.scene;
+
+          // o.position.z = -1;
+          o.rotation.order = 'YXZ';
+          o.scale.set(0.2, 0.2, 0.2);
+          /* o.traverse(e => {
+            e.castShadow = true;
+          }); */
+
+          /* o.quaternion.setFromUnitVectors(
+            new THREE.Vector3(0, 0, -1),
+            new THREE.Vector3(0, 0, 1)
+          ); */
+          o.updateMatrixWorld();
+          // o.frustumCulled = false;
+          for (let i = 0; i < o.children.length; i++) {
+            o.children[i].frustumCulled = false;
+          }
+
+          model = o;
+
+          scene.add(o);
+          // scene.add(o.children[0]);
+          // scene.add(o.children[0]);
+
+        }, undefined, function ( e ) {
+
+          console.error( e );
+
+        } );
+      }
+
+      renderer = new THREE.WebGLRenderer({
+        antialias: true,
+        alpha: true,
+      });
+      renderer.setPixelRatio(window.devicePixelRatio);
+      renderer.setSize(window.innerWidth, window.innerHeight);
+
+      // window.browser.magicleap.RequestDepthPopulation(true);
+      // renderer.autoClear = false;
+
+      container.appendChild(renderer.domElement);
+
+      renderer.setAnimationLoop(animate);
+    }
+
+    function animate(time, frame) {
+      if (model) {
+        const animationTime = 4000;
+        const f = ((Date.now() % animationTime) / animationTime) * (Math.PI * 2);
+        model.position.y = Math.sin(f) * 0.05;
+        model.rotation.y = Math.sin(f*2) * Math.PI*2*0.05;
+        model.rotation.z = Math.cos(f*2) * Math.PI*2*0.05;
+        model.updateMatrixWorld();
+      }
+
+      renderer.render(scene, renderer.vr.enabled ? renderer.vr.getCamera(camera) : camera);
+    }
+
+    init();
+
+    (async () => {
+      console.log('request session');
+      session = await navigator.xr.requestSession({
+        exclusive: true,
+      }).catch(err => Promise.resolve(null));
+
+      if (session) {
+        // console.log('request first frame');
+        session.requestAnimationFrame((timestamp, frame) => {
+          renderer.vr.setSession(session, {
+            frameOfReferenceType: 'stage',
+          });
+
+          const {views} = frame.getViewerPose();
+          const viewport = session.baseLayer.getViewport(views[0]);
+          const width = viewport.width;
+          const height = viewport.height;
+
+          renderer.setSize(width * 2, height);
+
+          renderer.setAnimationLoop(null);
+
+          renderer.vr.enabled = true;
+          renderer.vr.setAnimationLoop(animate);
+
+          console.log('running!');
+        });
+      } else {
+        console.log('no xr devices');
+      }
+    })();
+  </script>
+  </body>
+</html>

graffiti_ml.html

@@ -331,7 +331,7 @@ <h1>graffiti_ml</h1>
     scene.add(controllerMesh);
   });
 
-  const cubeGeometry = new THREE.BoxBufferGeometry(0.02, 0.02, 0.001);
+  const cubeGeometry = new THREE.BoxBufferGeometry(0.05, 0.05, 0.05);
   const hitMeshMaterial = new THREE.MeshPhongMaterial({
     color: 0x673ab7,
   });