Realtime Three.js Coding | Hacker News Reader

Realtime Three.js Coding

mrdoob.com

261 pointsfranze37 comments

Is not just for three.js. It's for anything HTML/CSS/JavaScript. Originally I built it because I needed a temporal editor for coding on ChromeOS and the new packaged apps -- for which there is an editor in the works already -- hadn't reached the dev channel yet.

I love it. Reminds me of the Hotswap feature in Eclipse which Notch seems to use a lot for building his games. I wish there was something like that for UILayer, UIView and OpenGL in Objective-C. I know about the REPL in RubyMotion, but it's Ruby and a REPL is still not the same as having a live preview of editor changes. I really hate the fix-compile-test workflow, and especially for layers and layer animations and so on, I keep myself compiling and restarting an app multiple times until the speed, delay, looks parameters feel right.

I guess it's really difficult to implement something like that in Objective-C though. While it's possible to replace methods through method swizzling with new methods (say from a category), and while Objective-C allows to add categories to a NSBundle and dynamically add that NSBundle to a running app, this doesn't work on iOS as far as I know due to security limitations.

The hot-swap capability isn't something specific to Eclipse, its built into the JVM. Its also pretty limited, you can only change method bodies, you can't add methods, classes, class variables, and often things like annotation changes aren't picked up. Eclipse, IntelliJ, etc all use this. There is JRebel which is a custom implementation that allows much more robust code injection, but its not free.

Hotswap is great for tweaking values/logic after you've nailed down your method flow but it can have negative effects as well which aren't immediately apparent. I've seen a few hunks of code end up overly complicated as the developer hit a point where they really needed to break the code into more methods but didn't since you can't Hotswap in new methods and they didn't want to wait for the app to restart.

I don't really know how you would do this with Objective-C as its compiling to machine instructions. It would be very tricky as you don't have the luxury of a VM that explicitly supports it running your code.

Objective-C supports code replacement very well as it "run-time binds" selectors to method implementations. By injecting a bundle with a new implementation in a category it takes precedence over the original implementation as if the method had been "swizzled". The previous implementation linked into the app is taken out of play and ignored. This is all looked after by the application I mentioned. The complications seem to be minimal in my experience as long as you don't change the class interface...

What notch used is a step further. From what I get this page simply "refreshes" the code and starts the execution anew. Notch is actually hot-swapping code, for example the code in the update function of the game, leaving the game state intact. If he wants to test a change in the init code for example, he would need to restart the program.

Either way, very cool way to play around with three.js without having to switch back and forth to the editor.

John Resig did the JavaScript hot-swapping approach for Khan Academy. Watch the screencast here: http://ejohn.org/blog/introducing-khan-cs/

It might be possible to save the variable and ID states in the code before updating, then "pasting" them back in once reloaded.

Is that documented anywhere?

I have no idea, I just remember it from the stream from notch. I also experimented a bit with something similar for python.

You can find it here: http://www.krause-software.com/hotswap/

I think it worked so well for notch because the code he was changing was in a different class than the program's entry point, so the virtual machine had it easy swapping the code. Once again, I don't know the details, it is just my impression from what I saw that time.

It's not iOS, UILayer, and UIView, but Blossom[1] supports an equivalent, canvas-based development model and hardware-accelerated layers and transitions in the browser, based on Apple's SproutCore MVC framework.

It would work well with mrdoob's editor, and it's all JavaScript (no HTML or CSS to deal with).

[1] https://github.com/fohr/blossom

Code injection isn't impossible in Objective-C even on iOS, check out http://injectionforxcode.com/ or the write up by Erica Sadun here: http://www.tuaw.com/2012/05/10/devjuice-injection-for-xcode/

Brilliant. I wonder if it was inspired by Brett Victor's fantastic talk 'Inventing on Principle' (http://vimeo.com/36579366) - it seems there have been many such efforts to break the barrier between writing code and seeing the effects since that talk appeared. Maybe it's just that the talk made an impression on me and hence I've been noticing this sort of thing more. Either way, bravo Mr Doob.

I feel that talk made an impression on many people. I think that talk made live editing "mainstream" and Bret "stole" the concept by doing a good show just like Apple does. It's been done for years but no one "bothered" making a good show/product that wowed people.

From the top of my head (fluxus) [1] and impromptu [2]. And I bet every game company have their own live editing tools.

Anyway, </rant>.

What inspired me was this video of Iq's live coding setup [3] from last year. Months later I made a webgl version [4] to help spread glsl know-how. Then doing the HTML/CSS/JavaScript one was just natural de-evolution :)

[1] http://www.pawfal.org/fluxus/

[2] http://en.wikipedia.org/wiki/Impromptu_(programming_environm...

[3] http://www.youtube.com/watch?v=9g8CdctxmeU

[4] http://glsl.heroku.com/e

Not to forget JSbin that has been here for a good 4 years now and many other live editors like it.

http://notlion.github.com/audio-shadertoy/

(Shameless self-promotion:)

Though it's currently hard to do 3D, we have similar features in the Khan Academy CS section:

http://www.khanacademy.org/cs

However, we don't restart the code from the beginning when you change something -- you'll notice that if you change the code in the linked page, the icosahedron jumps to a new angle, whereas with the KA environment, execution continues from the current state.

Maybe I should change the default code to use Date.now()? ;)

That would certainly give the proper illusion. :)

With our environment, you can interact with it and it'll maintain that state as well.

In John's post he mentions that doing hotswapping is very hard, but that hasn't been my experience so far. Can you by chance expound a bit on what makes/made it so difficult?

I'm curious to see what you've done -- anything you can share?.

I'll let John write up the details in a future blog post, but mostly there are a lot of strange edge cases and problems that have to deal with maintaining closures, etc.

A little off topic perhaps but what amazes me the most is that the Three.js code is actually understandable for someone who doesn't do 3D programming. It all makes sense, and the interface is just perfect.

Glad to hear! :_)

Every day, I am more appreciative of the work the mrdoob is doing to further browser-based 3d work.

Autistic and awesome. I always try to make transparent terminals for real time web development but give up in frustration and go back to doing it the old fashioned way.

This is a cool interface. It's fun to use math/graphing libraries in design. I used one for this: http://webp2p.org

Good stuff

> Autistic

That's a rather unfortunate typo :)

Since we're on the topic, there's also Tributary if you're doing d3 stuff. http://enjalot.com/

Something similar for unit-testing and Space Invaders:

http://testinvaders.heroku.com/

There's almost zero contrast when selecting text. This makes it nearly impossible to see what text is selected on the screen.

The text also seems to randomly become bold and/or disappear and flash on the screen when trying to select text.

Your browser or personal settings must be clashing with it.

Works fine for me

This needs integrating into Etherpad. I'm sure the sketchpad guys might be interested.

I started making something like this with codemirror. It's got autocomplete too with ctrl+space

http://dl.dropbox.com/u/22541447/motorboating-pirates/index....

This is definitely a nice showcase for three.js.

I don't think one could lower the entry barrier any further. More projects should use this approach.

I started playing with it immediately and I am already thinking about projects I could use this for.

Are you still planning to release commercial version of Harmony? I remember that you were mentioning it few months ago on Github.

As soon as packaged apps gets green light. Not sure if commercial, but sure an installable webapp with some improvements. I guess I'll recode the whole thing :P

Commercial version of Harmony that can be integrated with third-party apps would be great. I guess you could use simillar licensing model to Potrace: http://potrace.sourceforge.net/#dual

Needs to have the image open in another window rather than behind the text.

You're missing the whole point of not having other windows open

Reply on news.ycombinator.com