WebGL tutorijal

WebGL3D GRAFIKA NA INTERNETU

www.quinced.com

Preslikavanje realnosti

ShadersOkruženje

KvadratPojmoviPipeline

TransformacijeKocka

PojmoviTeksture

SvetloAnimacija

SferaOkruženje

Istorija, budućnostPrimena

OpenGL

OpenGL ES

WebGL

LOW LEVELmora malo da se misli

model > priprema > Crtaj! > vertex shader > fragment shader

HTML5 Canvas

Step by step

gl_Position = vec4(vpos, 0, 1);

gl_FragColor = vec4(0,0,0,1);

function getShader(...)

function initShaders()

function initWebGL(…)

function start()

Setting the scene

gl-matrix

gl_Position = pMatrix * mvMatrix * vec4(vpos, 1);

mat4.perspective(pMatrix, Math.PI/4, 400 / 400, 1, 1000);

mat4.translate(mvMatrix, mvMatrix, [0, 0, -10.0]);

mat4.rotateY(mvMatrix, mvMatrix, Math.PI/6);

mat4.rotateX(mvMatrix, mvMatrix, Math.PI/6);

gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);

varying vec4 vColor;

vColor = aVertexColor;

gl_FragColor = vColor;

varying vec2 vTexture;

vTexture = aVertexTexture;

uniform sampler2D uSampler;

gl_FragColor = texture2D(uSampler, vTexture);

textureCoordinates = [...]

function initTextures()

gl.texImage2D(...)

gl.texParameteri(...)

gl.activeTexture(...)

gl_FragColor = vec4(textureColor.rgb*vLighting, textureColor.a)

attribute vec3 aVertexNormal;

uniform mat3 uNormalMatrix;

transformedNormal = uNormalMatrix * aVertexNormal;

ambientLightColor = vec3(0.6, 0.6, 0.6);directionalLightColor = vec3(0.0, 0.8, 0.7);directionalVector = vec3(0.5, 0.5, 0.5);

directional = max(dot(transformedNormal, directionalVector), 0.0);

vLighting = ambientLightColor + (directionalLightColor * directional);

vertexNormals = [...]

mat3.normalFromMat4(normalMatrix, mvMatrix);

window.requestAnimationFrame(tick);

function animate()

vertices = [...];vertexNormals = [...];textureCoordinates = [...];triangles = [...];

Vertexi (koordinate)

Boje

Mapiranje tekstura

Normale za osvetljenje

Matrice transformacija

Vertex shader

Fragment shader

Animacija

attribute

uniform

varying

Matematika

How it’s made

Šta fali?Mnoge oblasti: napredno osvetljenje, upravljanje tekstom, interakcija sa korisnikom, blending, manipulacija 3D modelima….

Komunikacija/komentari

Three.js

Interakcija

Zašto tutorijal?

Odnos prema učenju

INFORMACIJEVIŠE sadržaja

MANJE kvalitetnog

INDIVIDUALNOSTStudent > Profesor/Mentor?Profesor/Mentor > Student?

Niko nema TOLIKO vremena da traži odgovor(ili bar tako oni misle)

Šta će očekivati studenti za 10 godina?(ili bar šta mi mislimo o tome)

Student će i dalje trebati mentora TUTORA

> Saradnja / komunikacija[IZMEĐU SVIH KOJI KOMUNICIRAJU-RAZMENJUJU]

+ Alati / načini

E-Learning?

E-Learning?

pa….ne baš

Studenti

Pismenost (pravopisna, akademska, idejna, poslovna, digitalna)

Kritika i reakcija na kritiku

Izbegavanje “lošeg” društva

Poštovanje nauke

Otkrivanje talenata van okvira ocena

Jasne misli

Kompromis nepomirljivog (naučna institucija <> produkcija radne snage)

Hvala!