Creative coding

Vertex Shader Art

with GLSL

⏰ Jag har en plan…

  • Intro-presentation, ~10 min.
  • Video-tutorials + komma igång, 1h 20min
  • Brainstorm - dela inspiration
  • Hacka ihop något fint, ~1h
  • Skicka länken till Johan
  • Demo-dags, kl. 16:45
  • Kolla in bidragen på:
    https://www.vertexshaderart.com/user/athega
  • Rösta med "like" ❤️
  • Ära och berömmelse! 🍻

🚀 Intro

  • Vad är WebGL?
  • Vad är THREE.js?
  • Vad är "shaders"?
  • VertexShaderArt.com
  • GL Shading Language
  • Punkter, linjer, trianglar…

Vad är                         ?

  • Ett API med åtkomst genom Canvas i webbläsaren
  • Baserat på OpenGL ES
  • Inte en komplett 3D-motor
  • Ritar punkter, linjer och trianglar
  • Matas med data från JavaScript
  • Bearbetar denna data med GLSL-kod som körs på grafikkortet
  • WebGL2 nytt i webbläsarna för 2017
  • Mycket mer info:
    https://webglfundamentals.org/
    https://webgl2fundamentals.org/

Vad är                         ?

  • Högnivå-bibliotek för att skapa 3D-grafik i JavaScript
  • Inte enbart WebGL, kan rendera till Canvas, SVG och CSS3D
  • Hanterar objekt (geometri, modeller), material, kamera, ljuskällor mm.
  • Inte det vi labbar med i dag
three.js

Vad är "shaders"?

  • Ett program som körs på grafikkortet består av två funktioner som kallas "shaders"
  • En "vertex shader" behandlar koordinater
  • En "fragment shader" fyller i pixlar
  • Skrivs i GLSL, "GL Shading Language" som är ett språk med komplexa typer anpassade för 3D-grafik
  • Exekveras upprepade gånger parallellt. Arbetar bara med en enda koordinat eller pixel per anrop, därför behövs ofta inga loopar

VertexShaderArt.com

  • En "lekplats" eller "sandlåda" för att snabbt skapa grafik med musik.
  • Man skriver bara GLSL-koden för en "vertex shader", allt annat är redan på plats
  • Koden genererar position och färg för en punkt vid varje exekvering
  • Tryck new "+" för ett slumpmässigt exempel som utgångsläge
  • Kolla "help" för inputs och outputs, även dessa finns redan på plats och är tillgängliga från koden

Shading Language

  • Syntaxen liknar C och JavaScript
  • Komplexa datatyper för olika stora vektorer och matriser
  • Kompakt kod tack vare att operatorer arbetar direkt med dessa typer, tänk objektorientering och operatoröverlagring.
    Exempel för att rotera en punkt med JavaScript:




    Och med GLSL:
     
  • Använd "Cheat Sheet" som referens
p.xy *= mat2(cos(a), -sin(a), sin(a), cos(a));
var sin = Math.sin(angle),
    cos = Math.cos(angle),
    p = {
        x: p.x * cos - p.y * sin,
        y: p.y * cos + p.x * sin
    };

Draw Modes

  • Points: enskilda punkter, storleken kan variera
  • Lines: en linje mellan varje par av punkter
  • Line strip: en linje från varje punkt till nästa
  • Line loop: Samma som strip men även en linje från sista punkten tillbaka till fösta
  • Triangles: en triangel mellan varje grupp av tre punkter
  • Triangle strip: en triangel för varje ny punkt, återanvänder de två senaste punkterna
  • Triangle fan: en triangel för varje ny punkt, återanvänder startpunkten samt den senaste punkten.

Listan av punkter en "vertex shader" skapar kan ritas ut på olika sätt

📽 Filmtajm!