clicktorelease

Hi! My name is Jaume Sanchez!
I like to do things with the browser
(NOT those kind of things, you pervert!)

Find me on twitter or GitHub

  • The Graphical Web · Exeter, November 2016

    WebGL, WebVR and Information visualisations

    Abstract

    Revealing how WebVR enables web browsers to display immersive environments, providing new effective ways to represent and interact with data.

  • FullStackFest (FutureJS) · Barcelona, September 2015

    The Road to WebVR

    Abstract

    VR is the new El Dorado, the new Gold Rush of technology, and a very palpable and real opportunity to create new amazing immersive experiences. From WebGL and CSS 3D Transforms technologies, to Google Cardboard and new HMDs like the Oculus Rift or the Samsung Gear VR. Learn how to navigate around all the options, and how to get started on this amazing an promising technology that enables browsers to display VR content. We’ll go through the history of VR and WebVR, with examples and lessons learned, and the challenges that we’re facing to make it happen, like rendering techniques, graphical design approaches and user interaction design.

  • JSConf Budapest · Budapest, May 2015

    Getting things done with three.js and WebGL

    Abstract

    Get started coding real-time graphics in the browser with WebGL and three.js. Starting from the basic structure of a three.js web app, going through to the main elements of the API with several useful examples, will help you to get a foothold on the exciting world of 3D graphics, now on desktop and mobile. It's not required to have previous knowledge of 3D graphics, linear algebra or linear transforms.

  • ScotlandJS · Edinburgh, May 2015

    What are shaders and what can they do for me?

    Abstract

    Shaders! Amazing little things: a few lines in a C-like language and we can get smooth colours pulsating on the screen or a first-person shooter. In WebGL that we have running on our browsers there are vertex and fragment shaders, we are going to take a closer look at the latter.

    Fragment shaders are programs which perform a very specific task: to compute a colour. And each program is calculating a pixel, blissfully unaware of any other pixels or programs, so it can run all by himself in its own computer. Picture this: when we have thousands or millions of independent computers running in parallel we can compose an image thousands or millions of times faster.

    But is that all we can do with shaders, drawing pictures? Not really! An image, in the end, is just a piece of memory that we choose to read as a picture. But a chunk of memory can be so much more, it can hold any data! And with fragment shaders we can perform many tasks on that data and speed them up incredibly.

    Searching big sets of data, doing complex calculations, even synthesising music!

    All in your browser!

  • Resonate · Belgrade, April 2015

    Experimenting with today's web technologies

    Abstract

    We live in a time and society where music and data are prevalent. We like to experience music in many ways, and one of them is making visible the invisible, intangible nature of music, through digital synesthesia. We use all kinds of representations to understand music and discover new relations with other media. We explore relations of sets of information using computers. We're going to explore what tools and technologies does the web provide to work with music and visual metaphors, and how can we use that knowledge to create interactive music videos.

    We'll go step by step through the different ways of creating interactive visual experiences. From the basic techniques used to put pixels on screen to more complex ways of synchronising animations to sound and rhythm, participants will learn how to manage drawing in a 2D context, drawing in a 3D context, connect sound to their images and animations, and create interactive visuals. We'll go through the basics of 2D and 3D APIs, and sound synthesis and analysis.

    We will be using JavaScript, the language of the web, more and more widespread everyday. JavaScript is a functional programming language that allows highly interactive and iterative process, and largely reduces the friction when getting started with creative coding. We'll also be using associated web technologies, like Canvas, WebGL and Web Audio, to name a few.

    Participants will learn how to start a project, integrate libraries, use available tools and complete their own vision of a real-time interactive music video.

  • Awwwards Conference · Barcelona, February 2015

    The Web in the age of WebGL

    Abstract

    In just three years after its conception, WebGL has emerged as the de facto technology for creating web experiences and it is now supported by all the major browser vendors.

    During this presentation, Jaume and Ricardo will talk about the possibilities the technology brings to the table while sharing the process of developing some of their projects, giving a comprehensive overview of their current workflow and toolsets.

  • The Graphical Web · Winchester, August 2014

    Getting started with WebGL and three.js

    Abstract

    WebGL is a JavaScript API that lets developers implement hardware-accelerated 3D graphics in the browser, both at interactive and non-interactive framerates. WebGL is based on the HTML <canvas> element and on OpenGL ES 2.0, which means that it is possible to run WebGL on many different devices, such as desktop computers, mobile phones and TVs.

    Today, WebGL is fairly widely supported on most platforms and browsers: Firefox, Chrome, Safari, Opera and even Internet Explorer; on Windows, OSX, Linux and Android.

    Learn how to build a project to put 3D content on a browser from scratch. In an almost-live coding session you will learn:

    • how to set up a project and understand the struture of a WebGL project
    • add a renderer and know what it does and how three.js abstracts that idea
    • add a scene, a camera and an object with a default material
    • create an animation loop and modify the geometry using JavaScript
    • change default materials to shaders and create your own custom shaders
    • how to add postprocessing to polish the render result

  • ScotlandJS · Edinburgh, May 2014

    Getting started with three.js and WebGL

    Abstract

    An introduction to real-time graphics in the browser using WebGL with three.js. An overview of the structure of a three.js web app, the main elements of the API and some useful examples to get started on the exciting world of 3D graphics, now on desktop and mobile. It's not required to have previous knowledge of 3D graphics, linear algebra or linear transforms.

  • Resonate · Belgrade, May 2014

    Using the web as a creative platform

  • FutureJS · Barcelona, May 2014

    Everybody dance now with Web Audio API

    Abstract

    Introduction to playing and modifying sounds in the browser with JavaScript. Overview of the Web Audio API and its possibilities (and limitations).

  • MIRA Lab · Barcelona, November 2013

    Generative and reactive geometry with JavaScript and WebGL