Profile cover photo
Profile photo
Jaume Sánchez
You am i you am the robot
You am i you am the robot

Jaume's posts

Post has attachment
I've just release the first version of a replacement for +three.js THREE.Line, trying to avoid depending on GL_LINES, which are known for its quirks and limitations.

THREE.MeshLine uses screen-oriented triangle strips to draw lines, which allows adding a few nice features when drawing them, like variable width and texturing.

The github repo is here:

Some demos:

Suggestions, issues, pull requests, all are welcome!

3 Photos - View album

Post has attachment
An idea I had: Optimising SVG load with Service Worker

Using a Service Worker to transparently serve SVG files to the web page by retrieving them from a single master file, much like a spritesheet.

The idea is to be able to code with <img>, <object>, background-image, Image() and such without the SVG spritesheet forcing a change in the way a web page is built.

Post has attachment
This year I wasn't going to do anything for Halloween, but last week we had an idea for Día de Muertos with +Javier Arredondo, and here's the result:

You can craft your own calaca, applying motifs and changing the skull color. You can take snapshots and share with your friends.

It's made with JavaScript and WebGL, using three.js, some SVG and some trickery to share state with images.

Here's a timelapse showing how it works:

Enjoy and have fun!

Post has attachment
I've made an interactive waving flag with #WebGL  to celebrate today's elections in my country #catalunya   (,_2015)
Animated Photo

Post has shared content
I tweeted about this just now ( but with limited characters I wonder if people realize how cool this actually is!

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!

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

Post has attachment
First release on the Chrome Web Store of a Chrome DevTools extension to edit three.js scenes.

You can change almost all parameters of Object3D and Mesh, Camera (Perspective and Orthographic) and all the different kinds of Lights.


+Google Chrome +three.js 
Animated Photo

Post has shared content

Post has attachment
To celebrate Google #io15  , here's an experiment with WebGL, Web Audio API, physics, JavaScript and crazy music. Should run on desktop and mobile phones that can run WebGL. Enjoy!

#threejs   #webgl   #webaudio   #oimojs  

Post has attachment
WebGL GLSL Shader Editor Extension for Google Chrome

A +Google Chrome DevTools extension to help you edit shaders live in the browser. Very much based on +Mozilla Firefox DevTools Shader Editor.

It's in beta stage: if you could install it, test it around and find issues, it'd be very helpful!

Chrome Store:

#webgl   #glsl   #javascript   #chrome   #devtools   #extension  

Post has attachment
Creating a Plug'n Play Live WebGL Shader Editor 


This is a JavaScript library that aims to provide the same functionality as Firefox DevTools Shader Editor: modify the source of shaders in real-time, in the browser, without reloading, easy to include and totally implementation-agnostic. Using function hooks to modify the relevant methods of WebGLRenderingContext, it's possible to add this features with JavaScript only.

#webgl   #javascrip   #chrome   #firefox   #safari   #glsl  
Wait while more posts are being loaded