GLSL Shader en Quartz Composer y VDMX (mouse control)

GLSL es el acrónimo de OpenGL Shading Language, una tecnología parte del API estandar OpenGL, que permite especificar segmentos de programas gráficos que serán ejecutados sobre el GPU. OpenGL (Open Graphics Library) es una especificación estándar que define una API multilenguaje y multiplataforma para escribir aplicaciones que produzcan gráficos 2D y 3D. (escenas tridimensionales complejas a partir de primitivas geométricas simples, tales como puntos, líneas y triángulos). En la red hay varias páginas que ofrecen sus códigos para poder generar dichos gráficos como la de https://www.shadertoy.com, http://www.geeks3d.com/glslhacker/ Y http://glsl.heroku.com que será la que tomaremos como modelo para utilizar en Quartz Composer y en concreto ésta: http://glsl.heroku.com/e#19302.1

Captura de pantalla 2014-08-28 20.03.34

Como veis aparte del código también se ve la animación del GLSL si tu navegador soporta Web GL; Chrome lo tiene incorporado por defecto pero Safari no, en cuyo caso has de ir a la pestaña Desarrollo y al final “Activar Web GL”.
A continuación veremos cómo utilizar el código en Quartz Composer.

-Primero, en una nueva composición añadir los patches Clear, Sprite y GLSL Shader.

Captura de pantalla 2014-08-28 01.28.55

– Segundo, ir al patch GLSL Shader, Cmd+2 y se abre la ventana del Settings; vamos a la pestaña de Vertex Shader y borramos el código existente.

Captura de pantalla 2014-08-28 01.29.06

– Tercero, copiamos el código de la página de http://glsl.heroku.com que hemos seleccionado y lo pegamos. Como vemos en el patch GLSL han aparecido unos inputs que antes no existían que se corresponden con el código que hemos pegado y que siempre están al principio del mismo, antes del void main que indica la acción propia del código.

uniform vec2 resolution;
uniform float time;
uniform vec2 mouse;

void main()

Captura_de_pantalla_2014-08-31_02_53_10_Skitch

– Cuarto, cortamos el Sprite y lo ponemos dentro del GLSL Shader. También se puede utilizar GL Grid, o Grid. Como vemos tenemos que escalar el “Width” y “Height” para que se ajuste a la pantalla.

Captura de pantalla 2014-08-28 20.29.14

– Qunto, acabar con los datos de resolución, Time, Mouse y tamaño del Sprite. Yo publico los inputs de “Width” y “Height” del Sprite, doy a Edit Parent, vuelvo al nivel superior, pongo un “Rendering Destination Dimensions” y los enlazo con el “Width” y el “Height” . En resolutión X e Y del GLSL Shader lo enlazo con Pixels Width y Pixels Height del Rendering . En “Time” pongo un Patch Time (he puesto un Math X para aumentar o disminuir la velocidad) y en Mouse X,Y el patch Mouse, de este modo con el ratón podemos interactuar con la figura. Pues ya tenemos el GLSL en Quartz Composer.

Captura de pantalla 2014-10-13 21.02.32

Si se quiere utilizar la composición en VDMX se pueden publicar los inputs pertinentes y controlar os parámetros desde el programa. En este caso no es necesario publicar los inputs del Mouse porque con las nuevas versiones del VDMX (ya desde hace bastante tiempo) podemos interactuar con el ratón en la ventana del Preview del Layer donde tengamos puesta la composición.

GLSL Shader Qtz VDMX from hipnosia on Vimeo.

Gracias a destroythings por el tutorial en el que me he basado:
http://destroythingsbeautiful.com/2013/01/10/converting-glsl-shaders-for-use-in-quartz-composer-and-vdmx/

4 comentarios en “GLSL Shader en Quartz Composer y VDMX (mouse control)

  1. alter the mouse to sound [find and replace], amend to a vec3 and feed through the results from the exploded bucket aggregator in the audio processor through a smooth patch and lo and behold, audio reactive with the lo mid high values fed into the x,y,z of the sound [that was mouse]🙂

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s