Profile

Cover photo
Jaume Sánchez
Works at B-Reel
Lives in Barcelona
1,988 followers|707,465 views
AboutPostsPhotosYouTubeReviews

Stream

Jaume Sánchez

Shared publicly  - 
 
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:

https://github.com/spite/THREE.MeshLine

Some demos:

https://www.clicktorelease.com/code/THREE.MeshLine/demo/index.html
https://www.clicktorelease.com/code/THREE.MeshLine/demo/graph.html
https://www.clicktorelease.com/code/THREE.MeshLine/demo/svg.html

Suggestions, issues, pull requests, all are welcome!

9
4
Mehdi Khoury's profile photo
 
Three.js just got an order of magnitude more powerful... Awesome work ! If the same thing happens for displaying 2d text in space, we are sorted !!

Add a comment...

Jaume Sánchez

Shared publicly  - 
 
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:

http://itsamessage.com/diademuertos2015/

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:
https://youtu.be/usQtYAql7aU

Enjoy and have fun!
Día de Muertos | Design and customise your own calaca
4
2
Jaume Sánchez's profile photoDavid Ashley's profile photoJulie Carver's profile photoJociel Rocha's profile photo
6 comments
 
Jociel Rocha

Add a comment...

Jaume Sánchez

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.
View original post
1
1
Add a comment...

Jaume Sánchez

Shared publicly  - 
 
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!

GitHub: https://github.com/spite/ShaderEditorExtension
Chrome Store: https://chrome.google.com/webstore/detail/shader-editor/ggeaidddejpbakgafapihjbgdlbbbpob

#webgl   #glsl   #javascript   #chrome   #devtools   #extension  
ShaderEditorExtension - Google Chrome DevTools extension to live edit WebGL GLSL shaders
10
8
Anish Jhaveri's profile photo
 
You are an inspiration Jaume.
Add a comment...

Jaume Sánchez

Shared publicly  - 
 
Storyline.js: Multi-purpose sequencer that lets you define a storyboard using natural language.

GitHub: https://github.com/spite/Storyline.js

#javascript   #chrome  #firefox #safari  
In his circles
369 people
Have him in circles
1,988 people
Paul Irish's profile photo
3D Web Easy's profile photo
Felipe Leusin's profile photo
Miquel Ramon Ortega i Tido's profile photo
kevin murray's profile photo
AfonsoBarros[dot]com's profile photo
Matt Messinger's profile photo
Oscar Tomaneng's profile photo
Nicolas Levée's profile photo

Jaume Sánchez

Shared publicly  - 
 
An idea I had: Optimising SVG load with Service Worker

https://www.clicktorelease.com/blog/optimise-svg-load-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.
4
1
Add a comment...

Jaume Sánchez

Shared publicly  - 
 
I've made an interactive waving flag with #WebGL  to celebrate today's elections in my country #catalunya   (https://en.wikipedia.org/wiki/Catalonian_parliamentary_election,_2015)

http://visca.cat/
10
4
Add a comment...

Jaume Sánchez

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

Extension: https://chrome.google.com/webstore/detail/threejs-editor-extension/fbgbekpggeldiacgjkacbkkcbjhmakea/
GitHub: https://github.com/spite/ThreeJSEditorExtension

+Google Chrome +three.js 
7
19
Arshak Khachatrian (mr__echo)'s profile photoVikas Gupta's profile photo
3 comments
 
thanks for reply now i studying web development and i am also a student of animation i want to create a web tool where people found his location in 3d environment and this tool also run in android and anykinf of smartphone  so i found Three.js i am a  knew for this language  plzz help me and teach me to exlarate this idea :) 
Add a comment...

Jaume Sánchez

Shared publicly  - 
 
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!

http://www.clicktorelease.com/code/io15

#threejs   #webgl   #webaudio   #oimojs  
WebGL, Web Audio, Physics and JavaScript!
3
3
Add a comment...

Jaume Sánchez

Shared publicly  - 
 
Creating a Plug'n Play Live WebGL Shader Editor 

Post: http://www.clicktorelease.com/blog/live-webgl-shader-editor
Demo: http://www.clicktorelease.com/tmp/shader-editor/
GitHub: https://github.com/spite/ShaderEditor

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  
8
7
William Dildine's profile photoJaume Sánchez's profile photoluke Livingston's profile photoYasir Iqbal's profile photo
4 comments
 
Hi
Add a comment...

Jaume Sánchez

Shared publicly  - 
 
Updated ccapture.js, now with support for animated GIF!

- Improved overall flow
- Updated Whammy.js version
- Modularised encoders (CCFrameEncoder)
- Split WebM encoder to its own module (CCWebMEncoder)
- Added animated GIF support (CCGIFEncoder) with gifjs
- Updated examples

Performance with gif.js is still shaky, it's better to keep the framecount low!

GitHub: https://github.com/spite/ccapture.js

#javascript #webm
12
4
Add a comment...
People
In his circles
369 people
Have him in circles
1,988 people
Paul Irish's profile photo
3D Web Easy's profile photo
Felipe Leusin's profile photo
Miquel Ramon Ortega i Tido's profile photo
kevin murray's profile photo
AfonsoBarros[dot]com's profile photo
Matt Messinger's profile photo
Oscar Tomaneng's profile photo
Nicolas Levée's profile photo
Work
Employment
  • B-Reel
    present
Basic Information
Gender
Male
Apps with Google+ Sign-in
  • Pocket Mortys
Story
Tagline
You am i you am the robot
Places
Map of the places this user has livedMap of the places this user has livedMap of the places this user has lived
Currently
Barcelona
Previously
London
Links
1 review
Map
Map
Map