Tehnologii New Media

Intro

Claudia Chiriță . 2025/2026

Admin info

Ce?

  • tehnologii pentru dezvoltarea de aplicații pentru new media

Ce?

  1. intro în grafică 2D și 3D pentru web: WebGL2, WebGPU, three.js

Ce?

  1. intro în limbaje de programare vizuală multimedia de tip dataflow: Pure Data (pd) și Max

Ce?

  1. intro în programarea VR: WebXR

Ce?

  1. intro în programarea mediilor interactive: TouchDesigner

Cum?

https://cs.unibuc.ro/~cechirita/tnm

Cu cine?

Note?


 notă-curs = nlab + npro + 10 (oficiu)

 nlab = notă-activitate-laborator // <= 30 puncte 
 npro = notă-proiect1 + notă-proiect2 // <= 60 puncte	

 sau

 nlab = notă-activitate-laborator // <= 30 puncte 
 npro = notă-proiect1 + notă-proiect2 
                      + notă-proiect3 // <= 90 puncte
 
 npro >= 30 // condiția de promovare

Proiect

  • în echipe de 3-4 studenți
  • la alegere 2 sau 3 teme din cele 4 studiate
  • formarea echipelor + alegerea proiectului: 1 aprilie
  • checkpoint după vacanța de primăvară
  • limbaje / API / framework la alegere

Bibliografie

resurse online: documentație oficială + tutoriale

Ce trebuie să știu deja?

  • html + JavaScript + C/C++
  • noțiuni elementare de geometrie
  • noțiuni elementare de grafică 3D binevenite

Întrebări?

Ce caut eu aici?

New Media BINGO!

Field trip

ce-ascundem-expo

formular înscriere tur ghidat 28.02

WebGL

WebGL (Web Graphics Library)

  • API JavaScript pentru randare grafică 2D și 3D interactivă în cadrul browserului fără folosirea de plug-in-uri
  • standard web open, royalty-free, cross-platform
  • integrat cu alte standarde web, bazat pe OpenGL ES, expus la ECMAScript prin elementul HTML5 Canvas

WebGL – CE? UNDE?

  • permite folosirea de physics, procesare de imagini și efecte (GPU-accelerated) în Canvas
  • elementele WebGL pot fi combinate cu alte elemente HTML și integrate cu alte părți dintr-o pagină web sau cu backgroundul paginii
  • WebGL este integrat în toate browserele moderne; dispozitivul utilizatorului trebuie să aibă însă hardware-ul care să permită executarea feature-urilor oferite

WebGL – ISTORIC

  • 2006: WebGL a evoluat din experimente Canvas 3D ale lui Vladimir Vukićević la Mozilla
  • 2009: consorțiul non-profit Khronos Group a creat WebGL Working Group (Apple, Google, Mozilla, Opera)

WebGL – ISTORIC

  • 2011: WebGL 1.0 – bazat pe OpenGL ES 2.0 și oferă un API pentru grafică 3D
  • 2017: WebGL 2.0 – bazat pe OpenGL ES 3.0, garantează disponibilitatea multor extensii opționale ale WebGL 1.0 și expune și API-uri noi; backward compatible
  • 2024: WebGPU – capacități extinse, interfață mai modernă, acces GPU direct (broswer support încă restrâns)

WebGL – frameworks

WebGL – CUM?

programele WebGL constau din:

  • control code – scris în JavaScript
  • shader code – scris în GLSL (OpenGL ES Shading Language), un limbaj similar cu C/C++, care este executat în GPU (Graphics Processing Unit)

Control code

Shader code

program = pereche de funcții:

  • vertex shader: calculează pozițiile unor vârfuri; pe baza pozițiilor, WebGL rasterizează diferite tipuri de primitive (puncte, linii, triunghiuri)
  • când primitivele sunt rasterizate este executată o a doua funcție definită de user
  • fragment shader: calculează o culoare pentru fiecare pixel al primitivei care este desenată la acel moment

Shader code

  • pentru fiecare lucru pe care vrem să îl desenăm trebuie să setăm stările pentru execuția celor două funcții și să apoi să le rulăm prin apelarea gl.drawArrays sau gl.drawElements
  • datele la care vrem ca shaderele să aibă acces trebuie furnizate GPU-ului

Shader code

un shader poate primi date în 4 moduri:

  • buffers: array-uri de date binare încărcate în GPU (poziții, normale, coordonate pentru texturi, culori pentru vârfuri etc.)
  • uniforms: variabile globale setate înainte de execuția programului shader

Shader code

un shader poate primi date în 4 moduri:

  • textures: array-uri de date pe care le accesăm random în programul shader (image data de regulă)
  • varyings: metodă prin care vertex shader trimite date către un fragment shader. În funcție de ce este randat (puncte, linii, triunghiuri), valorile setate într-un varying de vertex shader vor fi interpolate în timpul execuției fragment shaderului

Homework

Mate cu matrici 4 the web


          
                          (\ /)   
                          ( . .)  
                          C(")(") 
              
                         întrebări?