09 - Úvod do 3D (WebGL)

Prezentácia

2MB

3d_intro_final.pdf

pdf

Autor: Olívia Jánošíková

WebGL

Web Graphics Library

WebGL je softvérová knižnica, ktorá rozširuje možnosti programovacieho jazyka JavaScript. Umožňuje mu vytvárať interaktívnu 3D grafiku pre akéhokoľvek kompatibilný webový prehliadač. WebGL kód sa spúšťa na počítačovej grafickej karte, ktorá musí podporovať shader rendering.

Pôvodný autor / pôvodná autorka: Mozilla Foundation

Je adaptácia OpenGL pre web

Nástroje

1. WebGL API (low-level) code

WebGL: 2D and 3D graphics for the web - Web APIs | MDNMDN Web Docs

1. Three.js

Three.js – JavaScript 3D librarythreejs

1. p5.js

WEBGLp5xjs

WEBGL mode in reference

Inšpirácia

Grand Prix CubesGrand Prix Cubes

BIB Grand Prix Cubes v Three.js

WEBGL Ocean Sound Visualizer: Made with p5.jsBehance

WebGL + p5.js

Pre visual learners:

Example

function setup() {
  createCanvas(600, 400, WEBGL);
}

function draw() {
  background(30);
  orbitControl();
  ambientLight(60);
  pointLight(255, 255, 255, 0, 0, 250);

  // Ground
  push();
  translate(0, 100, 0);
  rotateX(HALF_PI);
  ambientMaterial(100);
  plane(500, 500);
  pop();

  // Rotating Sphere
  push();
  translate(-100, 0, 0);
  rotateY(frameCount * 0.02);
  normalMaterial();
  sphere(50);
  pop();

  // Box
  push();
  translate(100, 0, 0);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  specularMaterial(255, 204, 0);
  box(80);
  pop();
}

Learning priamo na webe p5.js

Coordinates and Transformationsp5xjs

WebGL:Coordinates and Transformations

Lights, Camera, Materialsp5xjs

WebGL: Styling and Appearance

Creating Custom Geometry in WebGLp5xjs

Creating Custom Geometry in WebGL

Wiki na githube:

Getting started with WebGL in p5GitHub