Profile

Cover photo
Joshua Koo
259 followers|226,108 views
AboutPostsPhotosYouTube

Stream

Joshua Koo

Shared publicly  - 
 
Nice aerial footages of real flocking behaviour of sheeps.
1
2
Add a comment...

Joshua Koo

Shared publicly  - 
 
 
I created a new web based audio player that allows you to time stretch, pitch shift and loop audio files. I find it very useful for practicing guitar.

It's using a custom javascript phase vocoder running in web workers to do the timestretching. The UI is pure CSS (except for the logo). I hope you find it useful! I certainly had a blast creating it.

#javascript   #html5   #webaudio   #css   #css3   #guitar  
View original post
1
Add a comment...

Joshua Koo

Shared publicly  - 
 
 
three.js r73 released

change log: https://github.com/mrdoob/three.js/releases/tag/r73
examples: http://threejs.org/examples/
editor: http://threejs.org/editor/
docs: http://threejs.org/docs/
web: http://threejs.org/

Back to 1 month releases! 621 commits this cycle.

Some of the new exciting features this time are +Ben Houston new mixer based animation system and PointLight shadow support (thanks @mkkellogg and @tschw!).

http://threejs.org/examples/#webgl_shadowmap_pointlight

Thanks to https://tamarintech.com/ we can now load AMF files and I also added a KMZ loader (Sketchup and Google Earth).

Talking about formats... At some point this month I wondered if I could somehow load http://beeple-crap.com/resources.php files. The only format we support that Cinema4D supports is COLLADA. Unfortunately, the ColladaLoader is a bit out of control so I decided to start a new loader from scratch. It was the first time I had to read the COLLADA spec. Let me tell you, is not pretty...

https://www.khronos.org/files/collada_spec_1_4.pdf

Anyway, the new loader is going well and I've been able to load 200Mb+ files (the browser's xml is the one running out of memory). Hopefully next month we'll have materials and textures support.

Shadows also received a bit of love this month. Shadows no longer affect AmbientLight/HemisphereLight but we still have a long way to go to get proper shadows working.

More next month!

PS: Every time I write the change log I always find myself thinking "oh! I did that?" even just in one month cycle 😅
3 comments on original post
1
Add a comment...

Joshua Koo

Shared publicly  - 
 
 
three.js r72 released

change log: https://github.com/mrdoob/three.js/releases/tag/r72
examples: http://threejs.org/examples/
editor: http://threejs.org/editor/
docs: http://threejs.org/docs/
web: http://threejs.org/

After 6 months and 1678 commits later we're finally done.

When I started building the library I quickly found myself having to decide between features or control. I opted for features as WebGL had landed and we would benefit a lot from supporting as many features as possible, even if I didn't understood the code being added.

For a while that approach went well until two years ago, when the WebGLRenderer maintainer moved on as all the features had been added. Since then we've tried to move wires inside a piece of code that was out of our control but the wires were getting more and more entangled.

Last April I decided to hold features and releases for a bit and rework the renderer.

https://twitter.com/mrdoob/status/584113627080347648

The main issue was that the renderer had two code paths, one for Geometry and another for BufferGeometry. Many features had to be implemented twice. Not only that, but the renderer was converting Geometry to its own internal geometry structure which was a bit like BufferGeometry anyway.

The first step was removing all the Geometry code path. Now WebGLRenderer converts all the Geometry to BufferGeometry using the fromGeometry() method in BufferGeometry. Then we proceeded by re-implementing everything step by step... MorphTargets, Skinning, MeshFaceMaterial, material.wireframe, ... and well, seems like it took a while 😅

All this work should be pretty transparent for the user but, if someone now wants to implement a feature in WebGLRenderer, the code is now much more clean! Instead of a single file of thousands of lines we now have 13 different files of few hundred lines each. However, we're not done refactoring. We still have to move the textures and render targets code out, but we'll get there... 

Features did not stop coming though! The phong shading code has been optimised, the editor can now store textures and has a great glsl editor, we have a MD2Loader, a SEA3DLoader, InstancedBufferGeometry, intersected uv, better WebVR support, ... Yet, the minified gzipped library still fits in 100kb! 😁

Now that all the refactor has been done, I'm hoping to be back to 1 month release cycles. I say that every release though...

As always, this wouldn't be possible without all the kind people that are helping out. So many many thanks to all the contributors!

PS: Change logs for r71 and r70 are also available now:

https://github.com/mrdoob/three.js/releases/tag/r71
https://github.com/mrdoob/three.js/releases/tag/r70
9 comments on original post
1
Add a comment...

Joshua Koo

Shared publicly  - 
1
Timothee Groleau's profile photo
 
This looks familiar :)
Add a comment...
Have them in circles
259 people
Kenny Zhi Yao Chan's profile photo
Eleanor Ee's profile photo
John “cjnsh” Chan's profile photo
Zi Han Koh's profile photo
Jeff LeeTzenHau's profile photo
Matt L's profile photo
Alvin Sim's profile photo
Neo Choi (VampireNeo)'s profile photo
three.js's profile photo

Joshua Koo

Shared publicly  - 
1
Add a comment...

Joshua Koo

Shared publicly  - 
 
yesterday, I wrote

10 kind of people
those who know the binary
those who know it not

today I realize for it to be a Haiku, I belong to the latter

so maybe I'll change it to

10 kind of people
those who read the binary
and those who do not

#binary #haiku
1
Add a comment...

Joshua Koo

Shared publicly  - 
The Three.js library is widely known to be a WebGL library. I would like to share some thoughts on one of Three.js lesser known gems, the CSS3DRenderer, and why I think it's great (even though it's not even in the current documentation page yet). Three.js is not simply a WebGL library ...
1
Add a comment...

Joshua Koo

Shared publicly  - 
 
behind mrdoob the "award-losing non-creative junior developer". 
 
You define yourself as an award losing non creative junior developer. What’s behind this definition? Some years ago I worked for an agency that defined themselves as
View original post
1
Add a comment...

Joshua Koo

Shared publicly  - 
 
I tweeted about this just now (https://twitter.com/BlurSpline/status/642871426920255489) but with limited characters I wonder if people realize how cool this actually is! http://brrian.org/glsl-simulator/

yeah, the idea isn't entirely new - there's a MESA GLSL emulator and Chrome has a build in software renderer for GLSL... but since most webgl stuff is written in JS, and ability to emulate GLSL in JS I think it's a beauty itself.

one of the things this is solving is helping debugging writing shader code. GLSL code gets sent to the graphics unit, and it's sometimes not easy to trace and debug stuff in there. sometimes I write values into a texture, render the texture to screen, and read back the pixels and convert them in values just to check out if numbers are what I was expecting. being able to step thru glsl code (thru it's interpreted js code) like a debugger is awesome. Just checkout this example! http://brrian.org/glsl-simulator/demo/debugger.html

I remember sometime ago there was a mozilla project which allows you to write shader code with javascript (or js like) code. I think that was cool but that's not an abstraction that most people might prefer to use. In glsl-simulator, the reverse is happening and glsl code gets converted back to JS. With that more random quirky ideas came out of my head.

you could run esprima/Istanbul to run code coverage on the generated code (yeah it's kind of lame analyze code at that stage instead of at the glsl ASTs, but its still an idea). you could also easily write tests that expect the exact pixels that would be rendered for your webgl code. most often these days, you could run a headless browser for tests but you needed a way to interface or emulate the gpu one way or another to get results from webgl. i guess glsl-simulator would be another way to grab screenshots from webgl code (whether for archival or comparison for regression tests let's say for three.js)

another way to look at glsl-simulator: it's a software webgl renderer. there's of course a SoftwareRenderer in three.js but assuming you have you a library or piece of code that targets only WebGL, now you have an option of plugging that in to be running software/js only.

another random idea though somewhat similar to some I had in the past: since GLSL code is mean't to be executed in parallel, one could make glsl-simulator run parallel. like, spin off Web Workers to render a huge canvas. It'd could easily run in node too, spin off a couple of child node processes to help render a piece of glsl code. Or a wilder idea, create the biggest massively largest webgl render ever. Imaginary 1Mx1M pixel render of a fractal for example. Could get people running workers in their browser, help render chunks of that, sent it back to a server. Esp. with those kind of code in shadertoy, it probably scale well.

other points: mattdesl also mentioned this could be a way to validate glsl code. +Ricardo Cabello also hints +Jaume Sánchez on a browser extension that does this. Perhaps some guys (like Brain himself) might want debuggin in WebKit too but it'd be cool to see any of these more out in the wild too.

and strangely, i should be asleep at this time. my body is somewhat messed up. like jetlagged without actually travelling. better sleep otherwise i can't work later /ends gibberish
glsl-simulator : A simulator for OpenGL ES 1.0 Shader Language written in JavaScript.
1
2
Add a comment...

Joshua Koo

Shared publicly  - 
 
Just found about Akira Yoshizawa - father of the modern origami art form https://www.youtube.com/watch?v=hBWspmCzYyg
 ·  Translate
1
Add a comment...

Joshua Koo

Shared publicly  - 
 
enjoy the beauty of these birds in their slow mo glory. https://www.youtube.com/watch?v=xNYCldtpiW0
1
Craig Reynolds's profile photo
 
Thanks!
Add a comment...
People
Have them in circles
259 people
Kenny Zhi Yao Chan's profile photo
Eleanor Ee's profile photo
John “cjnsh” Chan's profile photo
Zi Han Koh's profile photo
Jeff LeeTzenHau's profile photo
Matt L's profile photo
Alvin Sim's profile photo
Neo Choi (VampireNeo)'s profile photo
three.js's profile photo
Links
YouTube