Cvičenie 1: Generovanie vzoru šachovnice

V tomto cvičení sa naučíte, ako vygenerovať vzor šachovnice pomocou shader programu.

Ukážka kódu

#define ROZMER_POLICKA 16

vec3 sachovnica(vec2 uv, float t){
  
  vec3 farba;
  
  vec3 cierna = vec3(0.0, 0.0, 0.0);
  vec3 biela = vec3(1.0, 1.0, 1.0);
  
  int x = int(uv.x * iResolution.x);
  int y = int(uv.y * iResolution.y);
  
  
  //TODO vytvorte sachovnicu
  
  
  
  if (true) farba = cierna;
  else farba = biela;
  
  return farba;
}



void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
  // Normalized pixel coordinates (from 0 to 1)
  vec2 uv = fragCoord/iResolution.xy;

  // Output to screen
  fragColor = vec4(sachovnica(uv, iTime),1.0);
}

Pokyny

  1. Skopírujte a vložte kód do shader editora.
  2. Upravte kód tak, aby ste vytvorili vzor šachovnice.
  3. Spustite shader program a skontrolujte výsledok.
  4. Pridajte filter 11×11 fragmentov.
  5. Pridajte animáciu v smere nejakého 2D vektora.
  6. Pridajte kružnicu s polomerom 5 políčok šachovnice.

Tipy

Cvičenie 2: Rasterizácia úsečky

V tomto cvičení sa naučíte, ako generovať úsečky.

Ukážka kódu

vec3 line2(vec2 a0, vec2 a1, vec2 fragCoord){

    vec3 white = vec3(1.0, 1.0, 1.0);
    vec3 black = vec3(0.0, 0.0, 0.0);
    
    vec2 v = a1 - a0;
    
    float m;//smernica
    
    //TODO vygenerujte usecku
    
    
    return white;
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec3 col = vec3(1.0);
    
    float tetha = iTime*2.0;
    
    mat2 S;//vytvorte skalovaciu maticu
    
    mat2 R;//vytvorte rotacnu maticu
    
    //vytvorte trojuholnik ABC
 
 
    //posunte trojuholnik
 
    // Output to screen
    fragColor = vec4(col, 1.0);
}

Pokyny

  1. Skopírujte a vložte kód do shader editora.
  2. Upravte kód tak, aby ste vytvorili úsečku.
  3. Spustite shader program a skontrolujte výsledok.
  4. Vytvorte trojuholnik.
  5. Škálujte trojuholník pomocou matice.
  6. Rotujte trojuholník okolo jeho stredu/ťažiska a posuňte ho do stredu okna.
  7. Vytvorte v strede obrazovky plný fixný štvorec 10 × 10 (Slnko), čiarkovaný trojuholník (Zem) s preponou 10 rotujúci okolo svojho stredu a Slnka, čiarkovaný štvorec 5 × 5 (Mesiac) rotujúci okolo svojho stredu a Zeme.

Tipy

Cvičenie 3: Generovanie 3D kocky

V tomto cvičení sa naučíte, ako vygenerovať 3D kocku pomocou shader programu.

Ukážka kódu

vec3 line(vec2 a0, vec2 a1, vec2 fragCoord){

    vec3 white = vec3(1.0, 1.0, 1.0);
    vec3 black = vec3(0.0, 0.0, 0.0);
    
    vec2 v = a1 - a0;
    
    float m;
    
    if (abs(v.x) > abs(v.y)){
    
        if (a0.x > a1.x) {
            vec2 tmp = a0;
            a0 = a1;
            a1 = tmp;
        }
    
        if (fragCoord.x >= a0.x && fragCoord.x <= a1.x){
        
            m = v.y / v.x;

            float dx = fragCoord.x - a0.x;
            float y = a0.y + m*dx;
            
            
            if (floor(fragCoord.y) == floor(y)) return black;
        }
    }else{
    
        if (a0.y > a1.y) {
            vec2 tmp = a0;
            a0 = a1;
            a1 = tmp;
        }
    
        if (fragCoord.y >= a0.y && fragCoord.y <= a1.y){
        
            m = v.x / v.y;

            float dy = fragCoord.y - a0.y;
            float x = a0.x + m*dy;
            
            
            if (floor(fragCoord.x) == floor(x)) return black;
        }
    }
    
    return white;
}


vec3 dashed_line(vec2 a0, vec2 a1, vec2 fragCoord){

    vec3 white = vec3(1.0, 1.0, 1.0);
    
    float l = length(fragCoord - a0);
    
    if (int(l / 4.0) % 2 == 0) return line(a0, a1, fragCoord);
    else return white;
}


float f = 1000.0;

vec3 quad(vec3 a00, vec3 a10, vec3 a11, vec3 a01, vec2 fragCoord){
    
    vec3 col = vec3(1.0);
    
    //TO DO naprogramujte vykreslovanie stvorca
    
   
    return col;
}


void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec3 col = vec3(1.0);
    
    float tetha = iTime*2.0;
  
    //TO DO vytvorte skalovaciu maticu 3x3
     
    //TO DO vytvorte rotacnu maticu okolo Z aj okolo X
    
    
    //TO DO vykreslite kocku
  
 
    // Output to screen
    fragColor = vec4(col, 1.0);
}

Pokyny

  1. Skopírujte a vložte kód do shader editora.
  2. Upravte kód tak, aby ste vytvorili štvorec.
  3. Transformujte 3D suradnice do 2D, kde vzdialenosť stredu premietania a priemetne je f.
  4. Rozhodnite či je stena odvrátena, ak áno, vykreslite hrany čiarkovanou čiarou.
  5. Kocku naškálujte a rotujte okolo stredu.

Tipy

Cvičenie 4: Generovanie 3D sféry

V tomto cvičení sa naučíte, ako vygenerovať 3D sféru pomocou shader programu.

Ukážka kódu


float f = 500.0;


float sphere_intersection(vec3 sphere_c, float radius, vec3 ray_o, vec3 
ray_d){

    float result = 0.0;
    
    //TO DO result bude vzdialonost priesecnika od pociatku luca
    // ak nenajdeme priesecnik tak result bude 0
    
    return result;
}


void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec3 col = vec3(1.0);
    
    float tetha = iTime*2.0;
    
    vec3 ray_o;//pociatok luca
    
    vec3 ray_d;//normalizovany smer luca
       
    vec3 sphere_c = vec3(0, 0, -200);
   
    float d = sphere_intersection(sphere_c, 100.0, ray_o, ray_d);
    
    vec3 l_pos = vec3(500);//poloha svetla
    
    mat3 RY = mat3(vec3(cos(tetha), 0, sin(tetha)), vec3(0, 1, 0), 
vec3(-sin(tetha),0 , cos(tetha))) ;
   
    l_pos *= RY;
   
    if (d > 0.0) {
        // TO DO naprogramujte Blinn–Phong osvetl. model
    }
 
    // Output to screen
    fragColor = vec4(col, 1.0);
}

Pokyny

  1. Skopírujte a vložte kód do shader editora.
  2. Upravte kód tak, aby ste generovali lúče pre algoritmus „ray casting“.
  3. Počiatok lúčov bude v (0, 0, f) a priemetňa v rovine XY.
  4. Nájdite priesečník lúča a sféry.
  5. Naprogramujte „Blinn–Phong“ osvetľovací model.
  6. Rotujte zdroj svetla okolo osi Y.
  7. Pridajte šachovnicu do roviny Y=-200. Bude difúzne osvetlená.
  8. Pridajte tieň pod sféru.
  9. Skúste znížiť aliasing šachovnice.

Tipy