CS $457/557--$ Winter Quarter $2024$

Project #$1$

Step$-$ and Blended$-$edged Elliptical Dots

$60$ Points

Due: January $19$

This page was last updated: January $9,2024$

Requirements:

Use GLSL and either glman or the GLSL API to render some geometry $($your choice$),$ covered with elliptical dots.

Remember that the border of an ellipse, defined in s and t coordinates is:

$($s$-$sc$)2/$ Ar$2+($t$-$tc$)2/$ Br$2=1$

Be sure you compute the ellipse centers, sc and tc$,$ correctly.

The ellipse parameters must be set as uniform variables. If you are using glman, put them on sliders. If you are using the API, animate them using KeyTime animation.

A glman $.$glib file might look like this:

##OpenGL GLIB

Perspective $90$

LookAt $002000010$

Vertex oval.vert

Fragment oval.frag

Program Oval $\backslash$

uAd $<\mathrm{.}001\mathrm{.}1\mathrm{.}5>\backslash$

uBd $<\mathrm{.}001\mathrm{.}1\mathrm{.}5>\backslash$

uTol $<0.0.1.>$

Color $1.\mathrm{.}90$

Sphere $15050$

This will produce sliders for

Parameter What It Does

uAd Ellipse diameter for s

uBd Ellipse diameter for t

uTol Width of the blend between ellipse and non$-$ellipse areas

If you are using the API, use KeyTime animation to show the effects of uAd, uBd, and uTol:

$//$ a defined value:

const int MSEC $=10000$; $//10000$ milliseconds $=10$ seconds

$//$ a global:

Keytimes Ad;

$//$ in InitGraphics$()$:

Ad$.$Init$()$;

Ad$.$AddTimeValue$(0\mathrm{.}0,?????)$;

Ad$.$AddTimeValue$(2\mathrm{.}0,?????)$;

Ad$.$AddTimeValue$(5\mathrm{.}0,?????)$;

Ad$.$AddTimeValue$(8\mathrm{.}0,?????)$;

Ad$.$AddTimeValue$(10\mathrm{.}0,?????)$;

$//$ in Animate$()$:

glutSetWindow$($ MainWindow $)$;

glutPostRedisplay$()$;

$//$ in Display$()$:

$//$ turn # msec into the cycle $(0-$ MSEC$-1)$:

int msec $=$ glutGet$($ GLUT$\_$ELAPSED$\_$TIME $)\%$ MSEC;

$//$ turn that into a time in seconds:

float nowTime $=($float$)$msec $/1000.$;

$...$

Pattern.SetUniformVariable$($ "uAd", Ad$.$GetValue$($ nowTime $))$;

$...$

Apply per$-$fragment lighting. In the vertex shader, do something like this:

#version $330$ compatibility

out vec$2$ vST; $//$ texture coords

out vec$3$ vN; $//$ normal vector

out vec$3$ vL; $//$ vector from point to light

out vec$3$ vE; $//$ vector from point to eye

out vec$3$ vMCposition;

const vec$3$ LIGHTPOSITION $=$ vec$3(5.,5.,0.)$;

void

main$()$

$\{$

vST $=$ gl$\_$MultiTexCoord$0.$st;

vMCposition $=$ gl$\_$Vertex.xyz;

vec$4$ ECposition $=$ gl$\_$ModelViewMatrix $*$ gl$\_$Vertex; $//$ eye coordinate position

vN $=$ normalize$($ gl$\_$NormalMatrix $*$ gl$\_$Normal $)$; $//$ normal vector

vL $=$ LIGHTPOSITION $-$ ECposition.xyz; $//$ vector from the point to the light position

vE $=$ vec$3(0.,0.,0.)-$ ECposition.xyz; $//$ vector from the point to the eye position

gl$\_$Position $=$ gl$\_$ModelViewProjectionMatrix $*$ gl$\_$Vertex;

$\}$

In the fragment shader do this:

#version $330$ compatibility

$//$ you can set these uniform variables dynamically or hardwire them:

uniform float uKa, uKd, uKs; $//$ coefficients of each type of lighting

uniform float uShininess; $//$ specular exponent

$//$ these have to be set dynamically from glman sliders or keytime animations:

uniform float uAd, uBd;

uniform float uTol;

$//$ in variables from the vertex shader:

in vec$2$ vST; $//$ texture cords

in vec$3$ vN; $//$ normal vector

in vec$3$ vL; $//$ vector from point to light

in vec$3$ vE; $//$ vector from point to eye

in vec$3$ vMCposition;

void

main$()$

$\{$

vec$3$ Normal $=$ normalize$($vN$)$;

vec$3$ Light $=$ normalize$($vL$)$;

vec$3$ Eye $=$ normalize$($vE$)$;

vec$3$ myColor $=$ vec$3(?????)$; $//$ whatever default color you'd like

vec$3$ mySpecularColor $=$ vec$3(?????)$; $//$ whatever default color you'd like

$<<$ set myColor by using the ellipse equation to create a smooth blend between the ellipse color and the background color $>>$

$<<$ now use myColor in the lighting equations $>>$

$//$ here is the per$-$fragment lighting:

vec$3$ ambient $=$ uKa $*$ myColor;

float d $=0.$;

float s $=0.$;

if$($ dot$($Normal$,$Light$)>0.)//$ only do specular if the light can see the point

$\{$

d $=$ dot$($Normal$,$Light$)$;

vec$3$ ref $=$ normalize$($ reflect$(-$Light, Normal $))$; $//$ reflection vector

s $=$ pow$($ max$($ dot$($Eye$,$ref$),0.),$ uShininess $)$;

$\}$

vec$3$ diffuse $=$ uKd $*$ d $*$ myColor;

vec$3$ specular $=$ uKs $*$ s $*$ mySpecularColor;

gl$\_$FragColor $=$ vec$4($ ambient $+$ diffuse $+$ specular, $1.)$;

$\}$

The uTol parameter is the width of a smoothstep$()$ blend between the ellipse and non$-$ellipse areas, thus smoothing the abrupt color transition.

float t $=$ smoothstep$(1.-$ uTol, $1.+$ uTol, results$\_$of$\_$ellipse$\_$equation $)$;

Then use t in the mix function to blend the colors on the edge of the ellipse.

The choice of geometry is up to you. Keep it simple at first, then, if there is still time, feel free to get more creative. To try out one of the dragon models, use the GLIB line:

Obj dragon$010.$obj

or use the API and our LoadObjFile$()$ function. the OBJ file needs to be in the same folder as your $.$cpp$,.$glib, $.$vert, and $.$frag files.

Hints:

Use the ellipse equation found in the Stripes, Rings,and Dots notes.

You c