Realtime Three.js Coding

by franze • 14 years ago

261 37 14 years ago

failrate• 14 years ago

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

terhechte• 14 years ago

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.

phn2• 14 years ago

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.

jonnycowboy• 14 years ago

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

phoboslab• 14 years ago

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

outworlder• 14 years ago

Is that documented anywhere?

erichocean• 14 years ago

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

mbell• 14 years ago

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.

johnno19622• 14 years ago

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...

johnno19622• 14 years ago

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/

Mizza• 14 years ago

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

Gigablah• 14 years ago

> Autistic

That's a rather unfortunate typo :)

risratorn• 14 years ago

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.

mrdoob25• 14 years ago

Glad to hear! :_)

mrdoob25• 14 years ago

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.

larister• 14 years ago

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.

mrdoob25• 14 years ago

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

p01• 14 years ago

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

sighlent• 14 years ago

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

Johnyma22• 14 years ago

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

quadhome• 14 years ago

Something similar for unit-testing and Space Invaders:

http://testinvaders.heroku.com/

RKearney• 14 years ago

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.

89a• 14 years ago

Your browser or personal settings must be clashing with it.

Works fine for me

EastCoastLA• 14 years ago

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

pacomerh• 14 years ago

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

spicyj3• 14 years ago

(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.

mrdoob25• 14 years ago

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

spicyj3• 14 years ago

That would certainly give the proper illusion. :)

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

munaf• 14 years ago

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

jarek-foksa2• 14 years ago

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

mrdoob25• 14 years ago

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

jarek-foksa2• 14 years ago

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

Riesling• 14 years ago

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.

gnarbarian• 14 years ago

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....

Realtime Three.js Coding

Related Stories