New to the forums? Click here to read the "How To" Guide.

Developer? Click here to go to the Developer Forums.

RiftSketch: A live-coding environment in HTML5

brianpeirisbrianpeiris Posts: 17
NerveGear
edited July 2015 in Games and Apps
RiftSketch is based on troffmo5's excellent OculusStreetView application. I took his base code and turned it into a live-coding environment.

The idea is that you code a "sketch" in JavaScript, using the Three.js library, and the scene in front of you updates immediately as you code. The application (and the code) is not very polished but I've been sitting on it for so long that I just wanted to put it out there. There is already a long todo list of changes that I want to make.

The code is up on GitHub.

aT92cE8.png?1

Usage:
  1. Set your Rift to 1280x800 (temporary limitation, just haven't gotten around to fixing it)
  2. Download and run lazydodo's RiftServer application
  3. Visit http://devbox.brianpeiris.com/riftsketch/#/-IwExJh2Vcac5NUjvIxt for an example, put your browser in fullscreen mode and mess around with the code to see what happens.
  4. You can minimize the editor to view the scene properly
  5. Some more examples: http://devbox.brianpeiris.com/riftsketch/#/-IwEEIGx4Cgq8AjMOKr5, http://devbox.brianpeiris.com/riftsketch/#/-IwGze7mQJ6XZNxGquPy
  6. Visit http://devbox.brianpeiris.com/riftsketch/#/ to create your own sketch from scratch.
  7. Save your sketch and share it on the forums!

Let me know what you think! (Or if my shoddy code doesn't work at all).

Comments

  • henrik3141henrik3141 Posts: 20
    Hey

    i really like this idea!

    But the coding windows doesnt look right in the rift. Or are you supposed to code without the rift and then just run it in the rift ? If so it would be nice to make the coding window a bit larger.
    Going to play around with this... thanks for sharing it!
  • brianpeirisbrianpeiris Posts: 17
    NerveGear
    henrik3141 wrote:
    Hey

    i really like this idea!

    But the coding windows doesnt look right in the rift. Or are you supposed to code without the rift and then just run it in the rift ? If so it would be nice to make the coding window a bit larger.
    Going to play around with this... thanks for sharing it!

    Thanks henrik, you're supposed to use it with the Rift on. Did you set your Rift to 1280x800? The coding windows don't align properly in any other resolution at the moment (I need to fix that). If that doesn't work, it would be helpful if you took a screenshot uploaded it to http://imgur.com/ so that I can see the problem. Thanks.
  • MalfateMalfate Posts: 16
    Very very cool. Being a web developer and having my rift by my side. I may just jump on this and start tinkering around and contributing 8-) .

    amazing stuff. Personally, probably the neatest thing i've seen through my rift! except for hl2 vr ;)
  • brianpeirisbrianpeiris Posts: 17
    NerveGear
    Malfate wrote:
    Very very cool. Being a web developer and having my rift by my side. I may just jump on this and start tinkering around and contributing 8-) .

    amazing stuff. Personally, probably the neatest thing i've seen through my rift! except for hl2 vr ;)

    Thanks for the kind words malfate! Let me know how it goes.
  • henrik3141henrik3141 Posts: 20
    Hi
    Thanks henrik, you're supposed to use it with the Rift on. Did you set your Rift to 1280x800? The coding windows don't align properly in any other resolution at the moment (I need to fix that). If that doesn't work, it would be helpful if you took a screenshot uploaded it to http://imgur.com/ so that I can see the problem. Thanks.

    My problem was that the zoom of chrome was not 100% at this time. So now it works well for me.
  • troffmo5troffmo5 Posts: 30
    Brain Burst
    Nice idea! :D
    You should take the latest OculusRiftEffect.js version with chroma aberration correction from the StreetView code.
    Soon this version should be available in the Three.js repository
  • brianpeirisbrianpeiris Posts: 17
    NerveGear
    troffmo5 wrote:
    Nice idea! :D
    You should take the latest OculusRiftEffect.js version with chroma aberration correction from the StreetView code.
    Soon this version should be available in the Three.js repository

    troffmo5! Thanks! Yup, there are a bunch of updates I have to pull from your code as well, including mouse functionality and the vr.js support. It would be nice if we could share similar code, I think I might send a couple of pull requests your way when I extract some of the common code out of OculusStreetView :)
  • usb420usb420 Posts: 291
    glad that someone did this. I was thinking of making something similar but I got sidetracked.

    any chance it could run off a common server to make it somewhat minecraftish?
  • brianpeirisbrianpeiris Posts: 17
    NerveGear
    usb420 wrote:
    glad that someone did this. I was thinking of making something similar but I got sidetracked.

    any chance it could run off a common server to make it somewhat minecraftish?

    That's an interesting idea. It's certainly possible. In fact, it might even be easy, since I'm using a third-party service called Firebase that handles those types of shared, realtime scenarios quite nicely. I'd have to add some logic to deal with groups of editors though. I'll think about it.
  • jayohjayoh Posts: 98
    Hiro Protagonist
    thanks for sharing. this is a lot of fun to tinker with. i had to enlarge the zoom in chrome (while fullscreen at 1920x1080) a few times and the code window was readable/usable. i need to work on touch typing a bit more... :mrgreen:
  • brianpeirisbrianpeiris Posts: 17
    NerveGear
    jayoh wrote:
    thanks for sharing. this is a lot of fun to tinker with. i had to enlarge the zoom in chrome (while fullscreen at 1920x1080) a few times and the code window was readable/usable. i need to work on touch typing a bit more... :mrgreen:

    Thanks jayoh. I need to put a proper fix in for different resolutions, amongst other things. And, yeah, the app does assume that you are willing to learn touch-typing and Three.js. Luckily there are online resources to help you improve in both areas: http://www.typingstudy.com/ ;)
  • ViralViral Posts: 2
    Consider using `vr.js` for Rift support in the browser. (It comes with a OculusRiftEffect for THREE.js)

    Also, if you plan to distribute applications, `node-webkit` works with `vr.js`.
  • blazespinnaker2blazespinnaker2 Posts: 52
    NerveGear
    Great stuff. Checked out the github, looks like Brian is still doing commits now and then.

    This looks like what I want, but it's always good to compare and contrast. Any similar projects out there doing something similar? (Interacting with a VR environment via scripting)
  • brianpeirisbrianpeiris Posts: 17
    NerveGear
    Any similar projects out there doing something similar? (Interacting with a VR environment via scripting)

    @blazespinnaker2: There are a few more out there now. Checkout the HMDProgramming subreddit for a list. There are projects using Python, Unity and GLSL (shaders). Even John Carmack himself is working on a VR scripting language, but I don't know if he's planning to create a environment where you can code inside VR.
  • blazespinnaker2blazespinnaker2 Posts: 52
    NerveGear
    Thanks for the link! BirdsAndBlossoms.js is very amazing, btw. Incredible stuff.
Sign In or Register to comment.