Prog3: Lighting

Ruiyang Liu, Rliu60@ucsc.edu

html code: This is the file drawing the cylinder
JS code: This is the file containing all functions

Project Overview

In this programing assignment, I will create two cylenders in the 3D world. Then user can select different light sources and light effects. User can switch between 1) wireframe, flat shading, smooth(Gouraud) shading 2) point light or/and directional light 3) turn on/off each lighting component 4) You can also moving point light source.

User Guide

The default is smooth shading. User can switch between three different shading options.
User can select light source. If both are off, only the ambient light will be seen.
In default, both light sources are ON. Point light(orange sphere in the center)'s default position is at origin, user can change it by changing the slider.
You can also turn on/off each lighting effect. And change the specular light factor.
Notice: Please change the position of point light. So you can see how the point light works.
Notice: When you move point light along z-axis, it may seem like not moving, because viewer's direction is along z-axis. But the light moves.
Base code credit to Lucas:)

NOTICE: You can change the number of sides if you want to. But this operation is not available on the website directly. (I believe it's optional). You can do this by change the value of "num_ver" on cube.js, line 19. The default value is 50.

Program approach/logic:

Flat shading: One normal per ploygon.
Smooth shading: One normal per vertex.

Prog3: Lighting

Project Overview

User Guide

NOTICE: You can change the number of sides if you want to. But this operation is not available on the website directly. (I believe it's optional). You can do this by change the value of "num_ver" on cube.js, line 19. The default value is 50.

Program approach/logic:

Example output

1)default output when you change nothing. You should be able to see this when website opened

The point light source locates at [0,0,0], you need to move it to see the lighting.

Point light's position is changed. You can see both point lighting and directional lighting.

wireframe and flat shading:

Both light sources are ON, and Both light sources are OFF:

Only directional light , and Only point light:

Turn ON/OFF some lighting effect

Ambient light tuened off, and diffuse light turned off.