VERTEX ShaderGPUCPU

(1)

1

Computer Graphics

Marco Tarini

Università dell’Insubria Corso di Laurea in Informatica Anno Accademico 2014/15

Uniforms e interazione

Uniforms

• Uniforms: costanti (globali) negli shader settabili dall’applicazione

M a r c o T a r i n i ‧ C o m p u t e r G r a p h i c s ‧ 2 0 1 4 / 1 5 ‧ U n i v e r s i t à d e l l ’ I n s u b r i a

attribute vec2 clipPos;

attribute vec3 colAttribute;

varying vec3 colVarying;

uniform float howDark;

void main(void) {

gl_Position = vec4(clipPos , 0.0, 1.0);

colVarying = colAttribute * howDark;

}

VE R TE X Sh ad er

Il linguaggio GLSL:

classi di allocazione

• const

– valori costanti, noti a compilaz

• uniform

– valori uniformi su gruppi di primitive – in tutti gli shader: costanti globali (sola lettura) – …ma impostabili dall’applicazione

– (es: le matrici di trasformazione)

• attribute

– valore definito su ogni vertice

• varying

– valore che varia dentro la primitiva

• temporanea

– valori “usa e getta” (var locale o globale) uniform vec3 howDark ;

Uniforms

• Uniforms: costanti (globali) negli shader settabili dall’applicazione

G PU

...

uniform float howdark;

...

var howdark_loc = gl.getUniformLocation(

myProg, "howdark"

);

...

gl.uniform1f( howdark_loc , 0.7 );

...

reneder(...); // sends the primitives

C PU

(2)

2 Settare lo uniform dal programma JavaScript

1) Trovare la locazione dello uniform nello shader:

– (una sola volta per shader)

var howdark = 1.0;

howdark_loc = gl.getUniformLocation(

myProgram, "howdark"

);

// da invocare nella draw, prima di mandare le primitive function setUniforms(){

gl.uniform1f( howdark_loc , howdark );

}

var howdark_loc; // loc in the shader (global)

2) Usarla per settare il valore:

Struttura programma tradizionale

• Struttura classica dei programmi a linea di comando:

main() {

init();

do_my_beautiful_algorithm();

exit();

}

non va bene per applicazioni

interattive !

Struttura programma nel paradigma Event-Based

• Sistema ad eventi

main() {

init();

while (true) { get_event() ; process_event();

}

} eventi tipo:

• mouse, tastiera...

• sistema di finistre

• reshape, minimizzazione...

• generati dall'applicazione stessa

• o da thread differenti ciclo

degli eventi

Event-Based programmato con CallBacks

• CallBack:

– funzione preposta alla gestione di un evento

• il sistema si occupa del motore degli eventi, il programmatore si occupa solo

di definire le callback

• Es: Event-handler

– in JavaScript / HTML5

(3)

3 DOM – Document Object Model

(JavaScript, XML, …)

• DOM events:

function myMouseMove( event ) {

**/* posizione mouse: event.screenX - Y */**

**/* stato bottoni: event.buttons (bitmask) */**

}

function myMouseDown( event ) {

**/* bottone: event.button (indice) */**

}

function myMouseUp( event ) { }

window.onload = helloDraw;

window.onmousemove = myMouseMove;

window.onmousedown = myMouseDown;

window.onmouseup = myMouseUp;

Callbacks

(funzioni di risposta agli eventi)

Detect degli spostamenti del mouse

• Spostamento del mouse :

pos attuale meno pos dell’ultima volta

var lastMousePosX, lastMousePosY;

function myMouseDown( event ) { lastMousePosX = event.screenX;

lastMousePosY = event.screenY;

}

function myMouseMove( event ) {

if (event.buttons==0) return; // no button is held down var dx = event.screenX - lastMousePosX;

var dy = event.screenY - lastMousePosY;

lastMousePosX = event.screenX;

lastMousePosY = event.screenY;

/* fai qualcosa con dx e dy (sostamento mouse, in pixel) */

}

es: drag mouse left & right to control brightness

var lastMousePosX, lastMousePosY;

function myMouseDown( event ) { lastMousePosX = event.screenX;

lastMousePosY = event.screenY;

}

function myMouseMove( event ) {

if (event.buttons==0) return; // no button is held down var dx = event.screenX - lastMousePosX;