webgl tutorijal
TRANSCRIPT
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!