7 ms·

Realtime Three.js Coding

261 points by franze 14y ago

larister 14y ago
Brilliant. I wonder if it was inspired by Brett Victor's fantastic talk 'Inventing on Principle' (http://vimeo.com/36579366 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.
- mrdoob2 14y 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/ http://www.pawfal.org/fluxus/ [2] http://en.wikipedia.org/wiki/Impromptu_(programming_environment) http://en.wikipedia.org/wiki/Impromptu_(programming_environm... [3] http://www.youtube.com/watch?v=9g8CdctxmeU http://www.youtube.com/watch?v=9g8CdctxmeU [4] http://glsl.heroku.com/e http://glsl.heroku.com/e
  - p01 14y ago
    Not to forget JSbin that has been here for a good 4 years now and many other live editors like it.
  - sighlent 14y ago
    http://notlion.github.com/audio-shadertoy/ http://notlion.github.com/audio-shadertoy/
  - deleted 14y ago
    [deleted]
failrate 14y ago
Every day, I am more appreciative of the work the mrdoob is doing to further browser-based 3d work.
terhechte 14y 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.
- phn 14y 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 14y 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 14y ago
    John Resig did the JavaScript hot-swapping approach for Khan Academy. Watch the screencast here: http://ejohn.org/blog/introducing-khan-cs/ http://ejohn.org/blog/introducing-khan-cs/
  - outworlder 14y ago
    Is that documented anywhere?
Mizza 14y 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 http://webp2p.org Good stuff
- Gigablah 14y ago
  > Autistic That's a rather unfortunate typo :)
risratorn 14y 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.
- mrdoob2 14y ago
  Glad to hear! :_)
mrdoob2 14y 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.
Johnyma22 14y ago
This needs integrating into Etherpad. I'm sure the sketchpad guys might be interested.
quadhome 14y ago
Something similar for unit-testing and Space Invaders: http://testinvaders.heroku.com/ http://testinvaders.heroku.com/
RKearney 14y 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 14y ago
  Your browser or personal settings must be clashing with it. Works fine for me
EastCoastLA 14y ago
Needs to have the image open in another window rather than behind the text.
- pacomerh 14y ago
  You're missing the whole point of not having other windows open
spicyj 14y 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 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.
- mrdoob2 14y ago
  Maybe I should change the default code to use Date.now()? ;)
  - spicyj 14y ago
    That would certainly give the proper illusion. :) With our environment, you can interact with it and it'll maintain that state as well.
    - ibdknox 14y ago
      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?
      - spicyj 14y ago
        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.
munaf 14y ago
Since we're on the topic, there's also Tributary if you're doing d3 stuff. http://enjalot.com/ http://enjalot.com/
jarek-foksa 14y ago
Are you still planning to release commercial version of Harmony? I remember that you were mentioning it few months ago on Github.
- mrdoob2 14y 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-foksa 14y 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 http://potrace.sourceforge.net/#dual
Riesling 14y 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 14y 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.htm http://dl.dropbox.com/u/22541447/motorboating-pirates/index....

261 points by franze 14y ago

Brilliant. I wonder if it was inspired by Brett Victor's fantastic talk 'Inventing on Principle' (http://vimeo.com/36579366 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.

mrdoob2 14y 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/ http://www.pawfal.org/fluxus/ [2] http://en.wikipedia.org/wiki/Impromptu_(programming_environment) http://en.wikipedia.org/wiki/Impromptu_(programming_environm... [3] http://www.youtube.com/watch?v=9g8CdctxmeU http://www.youtube.com/watch?v=9g8CdctxmeU [4] http://glsl.heroku.com/e http://glsl.heroku.com/e
- p01 14y ago
  Not to forget JSbin that has been here for a good 4 years now and many other live editors like it.
- sighlent 14y ago
  http://notlion.github.com/audio-shadertoy/ http://notlion.github.com/audio-shadertoy/
- deleted 14y ago
  [deleted]

failrate 14y ago

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

terhechte 14y 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.

phn 14y 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 14y 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 14y ago
  John Resig did the JavaScript hot-swapping approach for Khan Academy. Watch the screencast here: http://ejohn.org/blog/introducing-khan-cs/ http://ejohn.org/blog/introducing-khan-cs/
- outworlder 14y ago
  Is that documented anywhere?

Mizza 14y 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 http://webp2p.org Good stuff

Gigablah 14y ago
> Autistic That's a rather unfortunate typo :)

risratorn 14y 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.

mrdoob2 14y ago
Glad to hear! :_)

mrdoob2 14y 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.

Johnyma22 14y ago

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

quadhome 14y ago

Something similar for unit-testing and Space Invaders: http://testinvaders.heroku.com/ http://testinvaders.heroku.com/

RKearney 14y 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 14y ago
Your browser or personal settings must be clashing with it. Works fine for me

EastCoastLA 14y ago

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

pacomerh 14y ago
You're missing the whole point of not having other windows open

spicyj 14y 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 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.

mrdoob2 14y ago
Maybe I should change the default code to use Date.now()? ;)
- spicyj 14y ago
  That would certainly give the proper illusion. :) With our environment, you can interact with it and it'll maintain that state as well.
  - ibdknox 14y ago
    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?
    - spicyj 14y ago
      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.

munaf 14y ago

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

jarek-foksa 14y ago

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

mrdoob2 14y 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-foksa 14y 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 http://potrace.sourceforge.net/#dual

Riesling 14y 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 14y 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.htm http://dl.dropbox.com/u/22541447/motorboating-pirates/index....