papera tolesten

Orain dela denbora puska bat, Iconic jokoa instalatu nuen eta jokoan gustora aritu nintzen, baino batez ere diseinuarekin maitemindu nintzen. Gehien bat ezarpenak bistaratzeko efektuarekin. Pantailaren goiko aldetik paper zati baten modura zabaltzen da.

Komikiak irakurtzeko aplikazio bat egiten ari naizenez, horrelako paper efektuak interesatzen zaizkit. Beraz, GPU-aren bidez grafikoak erakusteko erabiltzeak eskeintzen didan erpinen gaineko kontrolaz baliatuz, efektu berdintsua egiten saiatzea erabaki nuen.

Lehenengo, irudi batek (irudia bistaratzeko erabiltzen den laukiak, hobeki erranda) behar dituen 4 erpinen ordez, 8 sortu nituen. Ondorengo eskeman ikusten da zertaz ari naizen:

0 * 1 * 3
*	*
2 * * * 5
*	*
4 * 6 * 7

1, 2, 5 eta 6 dira berriki gehitutako erpinak. Erpinak zenbakitu ditut, orden horretan renderizatu nahi baititut. Modu desberdin batean renderizatuz gero, ez dira gainazal guztia betetzeko triangeluak sortuko eta ez da irudi osoa ikusiko, baino hori bertze kontu bat da.

Bertikalki tolestutako paper zati baten portaera honen antzeko zerbait da: 0-3 / 2-5 / 4-7 erpinak elkarrengana hurbiltzen dira eta 1-6 erpinak z ardatzean gibelera doaz (paintailaren barrura). Efektu honekin hasi nintzenean, ez nuen nahi nuena lortu, ikuspuntua ez zen errealista. Bazterretako erpinak ongi biltzen ziren, baino erdiko biak (1 eta 6) ez zirudien gibelera joaten zirenik. Kameraren ikuspuntua aldatzeko saiakera batzuen ondotik, bertze modu batean egitea pentsatu nuen. Hauxe da nire kodeko trikimailu zikina: erdiko bi erpinak z ardatzean mugitu beharrean, y ardatzean mugitu, 1 beheiti eta 6 goiti. Nik uste nahiko sinesgarria dela, baino ez guztiz.

0   3
* 1 *
2 * 5 
* 6 *
4   7

demo ttiki bat: (luxe izeneko motore batekin ari nintzelako hartu nuen irudi hori)

Ia eginda dago, mugimendua ongi dago, baino ez dago argiztapen efekturik. Paper bat tolestuz gero, paperak berak erdi aldean itzal bat sortuko du. Puntu honetan sartuko dugu shader bat. Irudiaren erdian marra beltz bat sortuko du (posizio hau konfiguragarria izanen da uniform bidez) eta gardenera degradatu. Papera tolesten den heinean, itzalak azalera handiagoa hartuko baitu.

// Aplikaziotik pasatzen diren aldagaiak
// tolestura horizontala edo bertikala?
uniform bool is_horizontal = false;
// 'center_line' aldagaiak marra beltza non dagoen adierazten du.
// Marra bertikala bada, (0: ezker, 0.5: erdi, 1: eskuin).
// Marra horizontala bada (0: goi, 0.5: erdi, 1: behe).
uniform float center_line = 0.5;
// Shader-a exekutatu den momentuan 'papera'ren tolesturaren ehunekoa.
// Marra beltzaren transparentzia definitzeko erabiliko dena
// 0: tolestua dago
// 0.5: erdi bildua, erdi zabalik
// 1: zabalik dago
uniform float line_alpha;

// shader-a bera
void main() {
    // berezko textura
    vec4 tex = texture2D(tex0, tcoord)*color;
    // marra horrekiko distantzia gordeko dugu 'dist' aldagaiean
    float dist;
    if (is_horizontal)
        dist = min((abs(tcoord.y-center_line)/center_line), 1.);
    else
        dist = min((abs(tcoord.x-center_line)/center_line), 1.);
    // distantzia oinarrituta beltzez tintatu ('center_line'-etik gero eta
    // hurbilago, orduan eta beltzago)
    vec4 black_line = vec4(tex.rgb * dist, tex.a);

    // Berezkoa eta beltzatutakoa nahasi, 'line_alpha' uniform balioaren arabera.
    // Paperaren tolestatze unearen araberakoa da beltzaren intentsitatea.
    gl_FragColor = mix(tex, black_line, line_alpha);
}

Hori da! Orain kontent nago efektuarekin, itxura hau du:

eta hemen dago iturburu kodea