Profile

Cover photo
Jaume Sánchez
Works at B-Reel
Lives in Barcelona
1,945 followers|525,366 views
AboutPostsPhotosYouTube

Stream

 
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
6
9
miho aka's profile photoCait Tiac's profile photo
Add a comment...
 
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  
3
1
James Swansburg's profile photo
Add a comment...
 
New blog post about about the making of "cru·ci·form", with sSome details on how the project came to be, a bit of technical info and lessons learned on the process.

Read it here: http://www.clicktorelease.com/blog/making-of-cruciform

Grab the code here: https://github.com/spite/cruciform

#threejs   #webgl   #javascript  
4
4
Ricardo Cabello's profile photoJesse Warden's profile photo
Add a comment...

Jaume Sánchez

Shared publicly  - 
 
B E Y O N D, our Christmas Experiment entry with +Isaac Cohen 

http://christmasexperiments.com/experiments/xps/24/

JavaScript, WebGL with three.js, Web Audio, lots of GLSL shaders for crystal growth and post-processing and more!

Enjoy and Happy Holidays!
8
2
Mohamed Ikbel Boulabiar's profile photothree.js's profile photoSvein Morten Erikstad's profile photo
 
It crashed chrome mobile on my nexus 5
Add a comment...
 
Get carving with this year's Halloween experiment! http://www.itsamessage.com/halloween2014/ 

Carve your own jack-o-lantern and share it with everyone!

Video: Halloween 2014 Experiment - Jack O' Lantern

#webgl   #threejs   #javascript  
Carve your own jack-o-lantern and share it with everyone!
6
9
Jesse Warden's profile photoThijs Krooswijk's profile photoNicolas C's profile photoXavier Rubio Jansana's profile photo
2 comments
 
+prosthetic knowledge i guess it looked all stacked up with no icons? i think there's an issue if the vector font doesn't load completely. Does it happen if you load the page again? I'll check to see if there's something there.
Add a comment...

Jaume Sánchez

Shared publicly  - 
 
It's not Oculus' last tech demo. It's not Elon Musk next step to get to Mars. It's #webgl  with  +three.js on +Android  (with +Google Chrome and +Mozilla Firefox ) and DeviceOrientation, and some amazing +NASA  images.

http://www.clicktorelease.com/code/mars-panorama/

Get yourself to Mars and peek around
17
3
Jaume Sánchez's profile photothree.js's profile photoJohan Sundström's profile photoMarcin Piekarski's profile photo
7 comments
 
+Marcin Piekarski not really. I think just googled images for nasa mars panorama. And I think the nasa.gov website has all kinds of amazing resources.
Add a comment...

Jaume Sánchez

Shared publicly  - 
 
 
Just released +three.js r68.

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

If you were expecting this release on May 15th as I promised, sorry about that ^^ There has been quite a bit of refactoring on this cycle in the skinning code and WebGLRenderer itself. It was better to wait for things to be more stable.

As you can see on the change log there is a ton of new bits to play with!

One I would like to highlight is the VRControls and VREffect that eases the process of supporting the new experimental VR HMD being implemented in Firefox and Chrome:

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

This was contributed by a Mozillian. This cycle also has some improvements from NVIDIA themselves and we already had contributions from Google and Microsoft. Apple next? :P

Another change is that, thanks to +Jaume Sánchez, the documentation is now mobile friendly (examples next?). If that wasn't enough, he also added a filter field.

http://threejs.org/docs/

And the last one would be the fact that most of the Raycaster code has been moved to their own objects. This allows anyone to create their own objects with their custom raycast logic.

Following that style, Loader.Handler has been added, which allows adding custom loaders for unsupported file formats (TGA and DDS examples by now). 

There are a couple of gotchas on this release though...

1. object1.position = object2.position no longer works

And sadly there is no way (without losing a lot of performance) to warn the user about it. Please change it to:

object1.position.copy( object2.position );

Or, depending on your case:

object2.add( object1 )

You can include this file in your project to find where you're using the old pattern:

https://gist.github.com/mrdoob/a021c0c5ea229f6641da

2. WebGLRenderer scene graph change

From now on, when using WebGLRenderer, if an object has visible set to false its children won't render. The other renderers already behaved like that.

And that's about it. As always, thanks to all the contributors!
3 comments on original post
3
1
Kurt Hoell's profile photo
Add a comment...
In his circles
371 people
Have him in circles
1,945 people
David Landriault's profile photo
Jan Deppisch's profile photo
Santosh Savakar's profile photo
thomas satori's profile photo
Fred Palmerino's profile photo
Jean du Plessis's profile photo
Bong Seyha's profile photo
Дмитрий Качаненко's profile photo
Luciano Bonachela's profile photo
 
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  
6
7
Andrii Trybynenko's profile photocristobal diaz's profile photoRichard Gigan (PooLP)'s profile photoJonas Etzold's profile photo
3 comments
 
Nice Work!
Add a comment...
 
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
11
4
Ma Lei's profile photoKarim Mezhoud's profile photo
Add a comment...

Jaume Sánchez

Shared publicly  - 
 
 
I didn't see this coming...

http://www.peoplebehindthepixels.com/

Since day one I didn't see how the demoscene would transition to the web. Demos are, traditionally, not interactive but web users expect interactivity.

However there is this fairly new thing called conference titles where usually a motiongraphics artists will create some sort of visual show including the names of the presenters. The end result is similar to what demos are in the demoscene. Even more similar to invitation demos.

This is not the first conference titles animation done in WebGL. I think I've seen 3 before? But I just didn't expect it would become a thing!

Yay!
16 comments on original post
1
Add a comment...

Jaume Sánchez

Shared publicly  - 
 
Glossy reflections with +WebGL (and just now I've noticed that the ceiling is missing) http://youtu.be/xxHjMFsZZuk +three.js +JavaScript

Using parallax-corrected cube maps. Diffuse, normal and specular maps. Made with three.js for WebGL handling, custom shaders for rendering and Wagner for postprocessing (bloom, FXAA and vignette)
11
4
three.js's profile photoPhillip Kovalev's profile photoGergely Iharosi's profile photoIgnacio Mellado's profile photo
3 comments
 
VERY cool
Add a comment...

Jaume Sánchez

Shared publicly  - 
2
1
Ma Lei's profile photo
Add a comment...
People
In his circles
371 people
Have him in circles
1,945 people
David Landriault's profile photo
Jan Deppisch's profile photo
Santosh Savakar's profile photo
thomas satori's profile photo
Fred Palmerino's profile photo
Jean du Plessis's profile photo
Bong Seyha's profile photo
Дмитрий Качаненко's profile photo
Luciano Bonachela's profile photo
Work
Employment
  • B-Reel
    present
Basic Information
Gender
Male
Apps with Google+ Sign-in
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