jgs SER 431 Advanced Graphics Lecture 08: Environment (Planar reflections) Javier Gonzalez-Sanchez [email protected] PERALTA 230U Office Hours: By appointment

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 1 jgs Our Goal

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 2 jgs We are here

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 3 jgs Next step

jgs Stencil for 3D scenarios

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 5 jgs Step 1. main() // main void main(int argc, char* argv[]) { glutInit(&argc, argv); glutInitDisplayMode( GLUT_DEPTH | GLUT_DOUBLE | GLUT_RGBA | GLUT_STENCIL ); // main as usual here... }

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 6 jgs Step 2. init() // init void init() { // init as usual here... //define the value to use as clean. glClearStencil(0); }

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 7 jgs Step 3. display() void display(void) { glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT | GL_STENCIL_BUFFER_BIT); glEnable(GL_STENCIL_TEST); glColorMask(GL_FALSE, GL_FALSE, GL_FALSE, GL_FALSE); glStencilFunc(GL_ALWAYS, 1, 1); glStencilOp(GL_REPLACE, GL_REPLACE, GL_REPLACE); //Render stencil box

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 8 jgs glDisable(GL_DEPTH_TEST); glMatrixMode(GL_PROJECTION); glLoadIdentity(); glOrtho(-50.0, 50, -50.0, 50.0, 1.0, -1.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glPushMatrix(); glTranslatef(0, 0, 0); glBegin(GL_TRIANGLES); glVertex2f(-20.0, -20.0); glVertex2f( 20.0, -20.0); glVertex2f( 0.0, 20.0); glEnd(); glPopMatrix(); glEnable(GL_DEPTH_TEST);

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 9 jgs // re-enable color and disable stencil glColorMask(GL_TRUE, GL_TRUE, GL_TRUE, GL_TRUE); glStencilFunc(GL_EQUAL, 1, 1); glStencilOp(GL_KEEP, GL_KEEP, GL_KEEP); // draw your colors here glDisable(GL_STENCIL_TEST); glutSwapBuffers(); }

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 10 jgs New Step 3. display() void display(void) { glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT | GL_STENCIL_BUFFER_BIT); //Configure projection and modelview (camera) as usual glEnable(GL_STENCIL_TEST); glColorMask(GL_FALSE, GL_FALSE, GL_FALSE, GL_FALSE); glStencilFunc(GL_ALWAYS, 1, 1); glStencilOp(GL_REPLACE, GL_REPLACE, GL_REPLACE); // glDisable(GL_DEPTH_TEST); //Render stencil box // glDisable(GL_DEPTH_TEST); glColorMask(GL_TRUE, GL_TRUE, GL_TRUE, GL_TRUE); glStencilFunc(GL_NOTEQUAL, 1, 1); glStencilOp(GL_KEEP, GL_KEEP, GL_KEEP); // draw your colors here glDisable(GL_STENCIL_TEST); glutSwapBuffers(); }

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 11 jgs Next step

jgs Reflections

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 13 jgs Planar Reflections § Easy hack, draw the object twice, § One time has glScalef(1,-1,1) to reflect through the floor

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 14 jgs Planar Reflections § But, the plain obstruct the boxes below.

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 15 jgs Planar Reflections § Make the plain to be blended with the boxes (Disable the light) //plane glEnable(GL_BLEND); glDisable(GL_LIGHTING); glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); glColor4f(0.7, 0.0, 0.0, 0.3); glColor4f(1.0, 1.0, 1.0, 0.3); glPushMatrix(); glTranslatef(-900, 0, -900); glCallList(display1); glPopMatrix(); glEnable(GL_LIGHTING); glDisable(GL_BLEND);

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 16 jgs Planar Reflections § But, the image’s reflection falls off the floor.

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 17 jgs Planar Reflections § Stencil can help to maintain the floor § Clear stencil to zero. § Draw floor polygon with stencil set to one. § Then, only draw reflection where stencil is one. § Finally, deactivate stencil and draw the rest of the scene.

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 18 jgs Planar Reflections glEnable(GL_STENCIL_TEST); glDisable(GL_DEPTH_TEST); glColorMask(GL_FALSE, GL_FALSE, GL_FALSE, GL_FALSE); glStencilFunc(GL_ALWAYS, 1, 0xFFFFFFFF); glStencilOp(GL_REPLACE, GL_REPLACE, GL_REPLACE); // Draw the PLAIN for the stencil glPushMatrix(); glTranslatef(-900, 0, -900); glCallList(display1); glPopMatrix(); glColorMask(GL_TRUE, GL_TRUE, GL_TRUE, GL_TRUE); glEnable(GL_DEPTH_TEST); glStencilFunc(GL_EQUAL, 1, 0xFFFFFFFF); glStencilOp(GL_KEEP, GL_KEEP, GL_KEEP);

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 19 jgs // boxes reflections glPushMatrix(); glScalef(1.0, -1.0, 1.0); glCallList(display2); glPopMatrix(); glPushMatrix(); glTranslatef(200, 0, 0); glScalef(1.0, -1.0, 1.0); glCallList(display3); glPopMatrix(); glPushMatrix(); glTranslatef(-200, 0, 0); glScalef(1.0, -1.0, 1.0); glCallList(display4); glPopMatrix(); glDisable(GL_STENCIL_TEST);

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 20 jgs Planar Reflections

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 21 jgs One Last Thing void display(void) { glEnable(GL_CULL_FACE); // checks all the faces that are front facing towards // the viewer and renders those while discarding all // the faces that are back facing // Improve performance also! glDisable(GL_CULL_FACE); }

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 22 jgs Test Yourselves § Test 1. Add reflections to your game. For instance, add a mirror or a table with a reflective surface § Test 2. Add a menu that allows enable/disable reflections

jgs SER431 Advanced Graphics Javier Gonzalez-Sanchez [email protected] Fall 2018 Disclaimer. These slides can only be used as study material for the class SER431 at ASU. They cannot be distributed or used for another purpose.