Forum Discussion
3D Javascript library for rendering HTML?
So I'm a UI/UX designer and I primarily bought the Oculus with the hopes of contributing towards some type of internet browser support. My first idea was to try and recreate a browser in Unity, but after some consideration, I thought I'd start simpler.
My current idea for implementing this is through the use of a javascript library. Being relatively new to the 3D field, I thought I'd start by asking the community what might already be out there. After a little bit of searching, most of the 3D javascript stuff I found was primarily focused on OpenGL and games.
What I'd like to do is be able to plugin a library to a webpage, then use custom HTML 5 data attributes to assign certain depths to HTML elements. So, for example, the library would start with an arbitrary scale of 1-100 with 1 being furthest away. A body element would probably be given a data-depth="1" attribute and the container div might then get a data-depth="10" so that it would appear closer to the screen.
Off the top of my head, I know the JS would need to copy the site markup, duplicate it to display two copies of the site side-by-side, then do magic stereoscopic ocular parallaxing mojo (I'm new to this) to both images based on the attributes I assigned.
Does anyone know if a project of this sort already exists? Any other thoughts on the idea as a whole?
My current idea for implementing this is through the use of a javascript library. Being relatively new to the 3D field, I thought I'd start by asking the community what might already be out there. After a little bit of searching, most of the 3D javascript stuff I found was primarily focused on OpenGL and games.
What I'd like to do is be able to plugin a library to a webpage, then use custom HTML 5 data attributes to assign certain depths to HTML elements. So, for example, the library would start with an arbitrary scale of 1-100 with 1 being furthest away. A body element would probably be given a data-depth="1" attribute and the container div might then get a data-depth="10" so that it would appear closer to the screen.
Off the top of my head, I know the JS would need to copy the site markup, duplicate it to display two copies of the site side-by-side, then do magic stereoscopic ocular parallaxing mojo (I'm new to this) to both images based on the attributes I assigned.
Does anyone know if a project of this sort already exists? Any other thoughts on the idea as a whole?
4 Replies
- There's a lot of chatter directed along similar lines in the collaboration forum.
viewforum.php?f=40
Ganzuul, articulite, usb420 and myself are all independently exploring the Rift's relation to the web in one way or another. know I'm forgetting someone else...Updated:It was Krisper. Sorry about that Krisper. That was unintentionally rude of me. :)
Anyhow, nose around the forum and see if that helps you.
Also, have you considered css z-index as the way to set depth? I need a similar solution for my project and that's the avenue I intend to explore. - working with Java? FIRST order of buisness!!!!! Get Minecraft to work with the Rift..please please please please! id gladly donate via paypal for anyone who was able to do that with headtracking and pre-warping (you can use f1 to remove hud while exploring) While there are hints of it being offically supported it may not be for some time......:-).
heres hoping! (and yeah theres a web demo of a minecraft like render but i think the guy who tried it said it didnt quite line up right....... - @MrGeddings Afraid Java and Javascript are 2 different things.
@sayitaintjonas Not sure if this is something that may help you but others are using three.js http://mrdoob.github.io/three.js/
Also using X3D you can render 3d objects straight into the browser using html5. Checkout some of the examples here http://www.x3dom.org/?page_id=5 A compact, flexible 3D JavaScript library for rendering HTML elements is called three.js. It is perfect for building 3D experiences in the browser because it has a wide range of features and capabilities. Create 3D objects, apply textures, add lighting and shadows, and incorporate real-time physics simulations are all options for developers. With its ability to create interactive 3D product showcases, data visualisations, and games, Three.js is a great tool for developers looking for support and motivation. It also has a vibrant community and extensive documentation.I advise taking The Web Factory into consideration if you're looking for web design services.
