Skip to content
This repository was archived by the owner on Jan 24, 2020. It is now read-only.

Toggle DOM view #38

Open
wants to merge 47 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
47 commits
Select commit Hold shift + click to select a range
7683120
Merge pull request #1 from exokitxr/master
chrislatorres Jun 2, 2019
4e3bc30
Merge branch 'master' of github.com:chrisplatorres/studio
chrislatorres Jun 2, 2019
5394f84
make supported devices list more verbose
chrislatorres Jun 2, 2019
155c095
Merge pull request #1 from chrisplatorres/master
Jun 3, 2019
accabac
Update graffiti_ml example
Jun 3, 2019
0f4fe55
Add WebXR sample as a loadable example
Jun 3, 2019
30fefb1
Merge pull request #2 from exokitxr/master
chrislatorres Jun 6, 2019
e2ed008
Add exobot.html example
Jun 8, 2019
e34437e
Default viewport vector to all zeroes
Jun 8, 2019
e47b88b
Merge pull request #16 from exokitxr/viewport-cleanup
Jun 8, 2019
d7016fa
hide controller ray when orbit controls is present
chrislatorres Jun 9, 2019
3f5c5e0
add and tracking currentSession global variable and set visibility ba…
chrislatorres Jun 9, 2019
426bfc7
remove currentSession and move ray visiiblity toggling to points of c…
chrislatorres Jun 9, 2019
5aec43f
Remove dead ui/index.html
Jun 9, 2019
aac3a02
Make engine render background green
Jun 9, 2019
810dad6
Merge pull request #22 from exokitxr/green
Jun 9, 2019
ee5a620
Refactor studio compose into shader/greenscreen-based
Jun 9, 2019
c153ca1
Major greenscreen viewport bugfixing
Jun 9, 2019
82a5427
Clean up dead code
Jun 9, 2019
d1d2484
Bugfix settings background color css
Jun 9, 2019
ad3b2e6
Merge pull request #23 from exokitxr/green-screen
Jun 9, 2019
32ae7ad
Merge pull request #19 from exokitxr/controller-hide-ray
chrislatorres Jun 9, 2019
7b2f2a1
remove console resize
chrislatorres Jun 9, 2019
0a8c15f
set open console % and fixed y scoll and no overflow x
chrislatorres Jun 9, 2019
fc5faff
align console to bottom by default:
chrislatorres Jun 10, 2019
1b011a7
add console opening min height and make it fill 100% height
chrislatorres Jun 10, 2019
05a4009
re-enable resizable console
chrislatorres Jun 10, 2019
6569e6c
update resizable size on console open toggle
chrislatorres Jun 10, 2019
7923601
set resizable minheight with console toggle
chrislatorres Jun 10, 2019
8f33bc7
set minHeight in render
chrislatorres Jun 10, 2019
731a76c
remove ref attribute in resizble
chrislatorres Jun 10, 2019
2b83469
Merge pull request #24 from exokitxr/fixed-console
Jun 10, 2019
fa6ca59
remove kitchen sink example from dropdown
chrislatorres Jun 10, 2019
2c8eff2
Merge pull request #29 from exokitxr/remove-kitchensink
chrislatorres Jun 10, 2019
2d1c9cf
add absolute position and high z-index for iframe dropdown menu to ov…
chrislatorres Jun 10, 2019
e46f9b1
change z-index to 1
chrislatorres Jun 10, 2019
d6c8f51
Merge pull request #33 from exokitxr/iframe-dropdown-overlay
Jun 10, 2019
8be765b
fix sending mouse movements only when orbit controls present
chrislatorres Jun 10, 2019
f6ed097
Merge pull request #34 from exokitxr/drag-over
Jun 10, 2019
98ecf61
Rename Exokit Launcher -> Exokit Studio
Jun 10, 2019
abac06d
add dom view toggle button in engine.jsx
chrislatorres Jun 13, 2019
5b6f3cc
handle dom view toggle in dom.jsx
chrislatorres Jun 13, 2019
35c93bb
remove console.log in engine.jsx
chrislatorres Jun 13, 2019
238a800
add timeout and postviewportmessage for dom view toggle
chrislatorres Jun 13, 2019
9bd5da0
turn dom name to input type and change dropdown dots name
chrislatorres Jun 13, 2019
d43ec96
differentiate dom view arrow and layer view dots and add input focus
chrislatorres Jun 13, 2019
73cd57d
add more time before calling postViewportMessage
chrislatorres Jun 13, 2019
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 90 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -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.
149 changes: 149 additions & 0 deletions exobot.html
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 1 addition & 1 deletion graffiti_ml.html
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});
Expand Down
Loading