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

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 1 jgs Our Goal § Planar Shadow: shadow is projected into the plane of the floor.

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 2 jgs Planar Shadow L = [Lx, Ly, Lz] V = [Vx, Vy, Vz] P = [Px, Py, Pz] N = [Nx, Ny, Nz]

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 3 jgs Planar Shadow § In a 3D space, the line passing through the point L and point V is P = L + K *(V - L) L = [Lx, Ly, Lz] V = [Vx, Vy, Vz] P = [Px, Py, Pz] N = [Nx, Ny, Nz] L = [0.0, 10.0, 5.0] P = [20.0, 0.0, -1.0] V = [10.0, 5.0, 2.0] K=1 K=2

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 4 jgs Planar Shadow § Having the plain’s normal N and any dot in the plain P, dotProduct (N, P) + d = 0 // they are perpendicular L = [Lx, Ly, Lz] V = [Vx, Vy, Vz] P = [Px, Py, Pz] N = [0.0, 1.0, 0.0] P = [20.0, 0.0, -1.0]

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 5 jgs Planar Shadow § Having the plain’s normal N and any dot in the plain P, dotProduct (N, P) + d = 0 // they are perpendicular n • a – 32.5 = 0 n • c – 32.5 = 0 n • b – 32.5 = 0 y = - x + 5 N = [6.5,6.5,z] b = [5,0,z] a=[0,5,z] c = [2.5,2.5,z]

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 6 jgs Planar Shadow § Line passing through L and V: P = L + K * (V - L) § Equation for a plane: N ● P + d = 0 § K can be solved as: K = - (d + N ● L) / (N ●(V-L) § Then P = L + ((d + N ● L) / (N ●(V - L))(V - L) § And, simplifying,

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 7 jgs The Shadow Matrix dot(N,L)–Lx Nx – Ly Nx – Lz Nx – Lw Nx – Lx Ny dot(N,L)–Ly Ny – Lz Ny – Lw Ny – Lx Nz – Ly Nz dot(N,L)–Lz Nz – Lw Nz – Lx Nw – Ly Nw – Lz Nw – Lw Nw Shadow Matrix Vector Vx Vy Vz 1

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 8 jgs The Shadow Matrix dot(N,L)–Lx Nx – Ly Nx – Lz Nx – Lw Nx – Lx Ny dot(N,L)–Ly Ny – Lz Ny – Lw Ny – Lx Nz – Ly Nz dot(N,L)–Lz Nz – Lw Nz – Lx Nw – Ly Nw – Lz Nw – Lw Nw Shadow Matrix Scale Translate Rotate

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 9 jgs The Shadow Matrix

jgs Source Code

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 11 jgs Planar Shadows

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 12 jgs main() void main(int argc, char* argv[]) { // as usual here glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH | GLUT_STENCIL); // as usual here }

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 13 jgs init() void init() { // as usual here glClearStencil(0); // floor vertex dot_vertex_floor.push_back(Vec3(-2000.0, 0.0, 2000.0)); dot_vertex_floor.push_back(Vec3(2000.0, 0.0, 2000.0)); dot_vertex_floor.push_back(Vec3(2000.0, 0.0, -2000.0)); dot_vertex_floor.push_back(Vec3(-2000.0, 0.0, -2000.0)); calculate_floor_normal(&floor_normal, dot_vertex_floor ); // light glEnable(GL_LIGHT0); glEnable(GL_LIGHTING); }

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 14 jgs display() void display(void) { glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT | GL_STENCIL_BUFFER_BIT); // light source position light_position[0] = 500 * cos(lightAngle); light_position[1] = lightHeight; light_position[2] = 500 * sin(lightAngle); light_position[3] = 0.0; // directional light // light moving lightAngle += 0.0005; // Calculate Shadow matrix shadowMatrix(shadow_matrix, floor_normal, light_position);

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 15 jgs // projection and view glMatrixMode(GL_PROJECTION); glLoadIdentity(); glViewport(0, 0, width, height); gluPerspective(40.0, ratio, 1, 1000); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); // lookAt gluLookAt(0.0f, 40.0f, 320.0, 0.0f, 1.0f, -1.0f, 0.0f, 1.0f, 0.0f); // camera glScalef(scale, scale, scale); glRotatef(x_angle, 1.0f, 0.0f, 0.0f); glRotatef(y_angle, 0.0f, 1.0f, 0.0f); glTranslatef(0.0f, 0.0f, 0.0f);

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 16 jgs // draw glPushMatrix(); glLightfv(GL_LIGHT0, GL_POSITION, light_position); // light position // shadows if (renderShadow) { glEnable(GL_STENCIL_TEST); glStencilFunc(GL_ALWAYS, 1, 0xFFFFFFFF); glStencilOp(GL_REPLACE, GL_REPLACE, GL_REPLACE); } // draw floor glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); glColor4f(1.0, 1.0, 1.0, 0.3); glPushMatrix(); glDisable(GL_LIGHTING); glTranslatef(-900, 0, -900); glCallList(display1); glEnable(GL_LIGHTING); glPopMatrix(); glDisable(GL_BLEND);

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 17 jgs if (renderShadow) { glStencilFunc(GL_EQUAL, 1, 0xFFFFFFFF); glStencilOp(GL_KEEP, GL_KEEP, GL_KEEP); // Render 50% black shadow color on top of the floor glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); glDisable(GL_LIGHTING); /* Force the 50% black. */ glColor4f(0.0, 0.0, 0.0, 0.5); glPushMatrix(); glMultMatrixf((GLfloat *)shadow_matrix); glDisable(GL_DEPTH_TEST); // shadows for box 1, 2, 3 glEnable(GL_DEPTH_TEST); glPopMatrix(); glDisable(GL_BLEND); glEnable(GL_LIGHTING); glDisable(GL_STENCIL_TEST); }

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 18 jgs // box 1 glPushMatrix(); glCallList(display2); glPopMatrix(); // box 2 glPushMatrix(); glTranslatef(200, 0, 0); glCallList(display3); glPopMatrix(); // box 3 glPushMatrix(); glTranslatef(-200, 0, 0); glCallList(display4); glPopMatrix(); // draw the light arrow drawLightArrow(); glPopMatrix(); glutSwapBuffers(); }

jgs Double Blending

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 20 jgs Avoid Double Blending glStencilFunc(GL_ALWAYS, 1, 0xFFFFFFFF); glStencilOp(GL_REPLACE, GL_REPLACE, GL_REPLACE); // code here glStencilFunc(GL_EQUAL, 1, 0xFFFFFFFF); glStencilOp(GL_KEEP, GL_KEEP, GL_KEEP);

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 21 jgs Avoid Double Blending glStencilFunc(GL_ALWAYS, 1, 0xFFFFFFFF); glStencilOp(GL_REPLACE, GL_REPLACE, GL_REPLACE); // code here glStencilFunc(GL_EQUAL, 1, 0xFFFFFFFF); glStencilOp(GL_ZERO, GL_ZERO, GL_ZERO);

jgs Test Yourselves

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 23 jgs Test Yourselves § Change renderShadow from 1 to 0 § Change lightHeight from 100 to 1000 and 10 § Change light type from directional (0) to positional light § Verify: § glStencilOp(GL_KEEP, GL_KEEP, GL_KEEP); § glStencilOp(GL_ZERO, GL_ZERO, GL_ZERO); § Make the light rotate like a Sun (around z or x axis) § Put together shadows and reflection. § Replace a box with an OBJ object.

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.