09 - Úvod do 3D (WebGL)

Prezentácia

6MB

introduction_to_3d.pdf

PDF

Open

Autor: Viktor Osusky

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.js - Kristian TalleyBehance

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

Zdroje a materiály:

Planet Earth Texture Mapsplanetpixelemporium.com

Textúry

Getting started with WebGL in p5GitHub

Predchádzajúce prezentácie

2MB

3d_intro_final.pdf

PDF

Open

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