Oliver's Blog
Search
⌃K

Graphics Town

Introduction

This is a web application built with Three.js. It is a project from the course CS559: Computer Graphics at UW-Madison. This is an individual project with no detailed requirements. Everyone demonstrates their own artistic and programmatical skills and abilities in this project.

Project Details

3D Object List

  1. 1.
    Pool-1*: A big pool with textured water using customized shaders and textured walls.
  2. 2.
    Bridge-1*: A bridge with customized drawing using shaders that alternates its colors.
  3. 3.
    BlueHouse-1*: A textured blue house using geometries written from scratch.
  4. 4.
    Church-1*: A textured church using geometries written from scratch.
  5. 5.
    Castle-1*: A textured castle using geometries written from scratch.
  6. 6.
    Truck-1*: A textured Amazon Prime truck that stops at buildings in the residential area.
  7. 7.
    Car-1*: A textured Mercedes Benz car that runs around the town.
  8. 8.
    Carousel-1*: A colorful carousel ride with rotating horses.
  9. 9.
    Earth-1*: A textured earth with normal/bump mapping that rotates
  10. 10.
    Globe-1*: A globe that reflects its surroundings above the pool in the town.
  11. 11.
    Helicopter-1*: A helicopter that circles around in the sky of the town.
  12. 12.
    Road-1*: The road structure of the entire town.
  13. 13.
    RoundaboutBall-1*: A rotating roundabout that has a ball that moves up and down and changes its color according to the color of its collision plane.
  14. 14.
    Seesaw-1*: A seesaw that goes back and forth with moving objects on each side.
  15. 15.
    Tower-1*: A tower ride with rotating poles that are attached to swinging horizontal pads.
  16. 16.
    Tree-Cartoon-1*: A caroon tree with animated leaves, used in the amusement park area.
  17. 17.
    Tree-Realistic-1*: A realistic tree with textured leaves, used in the residential area.
  18. 18.
    ParkGate-1*: The textured front gate of the amusement park.
  19. 19.
    Fence-1*: The fence structures that are used around the amusement park.

Some Basic Behaviors

  1. 1.
    Car-1*: The red car goes around the town.
  2. 2.
    Helicopter-1*: The helicopter rotating propellers flies over the town.
  3. 3.
    Tower-1*: The tower ride has rotating poles that are attached with swinging horizontal pads.
  4. 4.
    Truck-1*: The Amazon Prime truck goes around the town and stops at some buildings for a random amount of time in the residential area.
  5. 5.
    Carousel-1*: The colorful carousel ride has rotating horses that bounce up and down.
  6. 6.
    Seesaw-1*: The seesaw has a horizontal bar that goes back and forth with moving objects on each side.
  7. 7.
    Bridge-1*: The bridge has alternating colors.
  8. 8.
    Tree-Cartoon-1*: The cartoon trees have animated leaves.
  9. 9.
    RoundaboutBall-1*: The rotating roundabout has a ball that moves up and down and changes its color according to the color of its collision plane.

Some Advanced Behaviors

  1. 1.
    Bridge-1* (Animated Shader Effect): The bridge is built using customized drawing with shaders and it alternates its colors.
  2. 2.
    Truck-1* (Complex Behavior): The Amazon Prime truck goes around the town and turns properly at the intersections (big circle concrete). The truck stops at some buildings for a random amount of time in the residential area.
  3. 3.
    Pool-1* (Curved Surface): The big pool has curved surface using customized shaders and textured walls.
  4. 4.
    Globe-1* (Dynamic Environment Map): The globe reflects its surroundings above the pool in the town.

Texture Attributions

  1. 1.
    BlueHouse-1*:
    1. 1.
      Body texture (building2.jpg): https://www.pinterest.com/pin/535646949415150665/
    2. 2.
      Roof texture (blue_tiles.jpg): https://www.dreamstime.com/texture-blue-house-roof-texture-blue-house-roof-image174230093
  2. 2.
    Church-1*:
    1. 1.
      Body texture (building1.jpg): https://www.energy.gov/energysaver/doors
    2. 2.
      Roof texture (roof_tiles.jpg): https://www.textures.com/browse/wood/2133
  3. 3.
    Castle-1*:
    1. 1.
      Castle body texture (castle.png): https://www.dreamstime.com/photos-images/castle-door.html
    2. 2.
      Castle roof texture (castle_top.jpg): https://libreshot.com/old-roof-window/
    3. 3.
      Pillar body texture (pillar.jpg): https://www.wildtextures.com/category/free-textures/stone/
    4. 4.
      Pillar top texture (pillar_top.png): https://motionarray.com/stock-photos/irregular-stone-texture-910664/
  4. 4.
    Truck-1*:
    1. 1.
      Amazon license plate texture (amazon.jpg): https://www.freepnglogos.com/pics/amazon-png-logo-vector
    2. 2.
      Window texture (car_window.jpg): https://www.dreamstime.com/fog-car-window-glass-texture-background-image132822015
    3. 3.
      Amazon Prime logo texture (prime.png): https://www.flickr.com/photos/[email protected]/50597570511
  5. 5.
    Car-1*:
    1. 1.
      Benz logo texture (benz.png): https://logosarchive.com/mercedes-benz/
    2. 2.
      Window texture (car_window.jpg): https://www.dreamstime.com/fog-car-window-glass-texture-background-image132822015
    3. 3.
      Body texture (redcar.jpg): https://tr.pinterest.com/pin/628674429222816370/
  6. 6.
    Earth-1*:
    1. 1.
      Earth texture (earth.jpg): https://www.flickr.com/photos/[email protected]/3884071286/in/photostream/
  7. 7.
    Pool-1*:
    1. 1.
      Water texture (water.jpg): https://www.flickr.com/photos/[email protected]/4877078316/
    2. 2.
      Round wall texture (brick.jpg): https://www.flickr.com/photos/coun2rparts/3508864763/in/photolist-6m4Rfk-9sMJeh-5A6jji-attjHR-7LCYQL-atvZcS-atthvg-atvUEd-atw2eG-FeEGuT-atvVUj-dmNZAU-FkPcRw-zxo9Le-nHKPBW-9sJK1D-atvXeq-attoVp-7TgSPm-7TdDpc-97nYto-ciQ2Eo-ymgiym-ciQ3n3-yDCqEx-EqHfNR-ymgjJh-ymhmEN-EVvFm5-yCT3xX-xFRwgf-Fo5gBe-ymhoPN-ohzAhj-zmuiDn-Ar4NW4-oEtLqk-8FmWCn-9newMS-dyxotb-7TdFyr-93bnjY-9bikgt-918vHa-jrYqc-z4TUEU-TCqz8o-ejvH3m-ymgeys-TCqxzJ
  8. 8.
    Tree-Realistic-1*:
    1. 1.
      Trunk texture (trunk.jpg): https://www.textures.com/category/tree-bark/544
    2. 2.
      Leaves texture (leaves.png): https://www.istockphoto.com/illustrations/leaf-texture
  9. 9.
    ParkGate-1*:
    1. 1.
      3D object and its textures: https://free3d.com/3d-model/driveway-gate-old-80884.html
  10. 10.
    Fence-1*:
    1. 1.
      3D object: https://sketchfab.com/3d-models/basic-fence-c5229ed4813c4d1396406805e8756166

Picture Demo

Video Demo

Projects - Previous
Voice Shopping Assistant
Next - Algo
Binary Search
Last modified 1yr ago