Giter VIP home page Giter VIP logo

cis566-hw02-landscape's Introduction

Project 2: SDFs

Live Demo

Features

  • Ray marching optimization with sphere-tracing
  • Perlin-Worley based terrain generation
  • Two terrain types: mounatin and lake
  • Gradiant sky with fog
  • Cloud animation
  • Sun glare
  • Day cycle animation
  • Fly-over camera movement
  • Add basic raymarching optimizations: use sphere-tracing, limit the number of maximum steps to avoid infinite loop

Screenshot

image info

The color scheme was inspried by Dune (2021). image info

Objective

Practice using raymarching, SDFs, and toolbox functions to sculpt a beautiful 3d landscape.

Set up your raymarcher

  • Starting with the base code, create a ray marcher that can accurately render 3d shapes. We recommend testing with a sphere at the center of your canvas
  • Add normal computation to properly shade your geometry. Start with lambert shading
  • Add basic raymarching optimizations: use sphere-tracing, limit the number of maximum steps to avoid infinite loop

Add basic scene elements

Using what you've learned about toolbox functions and sdfs:

  • Create a noise-based terrain with height-based coloration that suggests at least 3 distinct terrain features (for example, the lowest portions of your terrain can be water and the highest, white-colored icecaps.). Feel free to get creative and do a non-realistic or stylized scene.
    • You must use at least 3 different toolbox functions, such as bias/gain or a wave function. At this point we expect you to be comfy using such functions to modify shape.
  • Create a backdrop / sky where there is no terrain. For example, an interesting gradient with some kind of noise.

Lighting

  • Using the 3-point lighting system (fill light, key light, and fake global illumination light), light your scene to bring it to life.

Animation

Add some element of animation to your scene that ISN'T just changing terrain height. (Been there done that with the fireball!)

Suggestions:

  • Animate the position of your lighting / sun to simulate a change in time of day. We recommend the sky change color in step with your lighting change.
  • Animate the thresholds for different terrain features, to suggest rising tides, or melting ice-caps, or a seasonal change in foliage color.
  • If you elect to add clouds, animate the cloud positions to suggest wind.

(Optional) Extra Credit

  • Additional scene elements eg. a building or animal or trees. [easy-hard, depends]
    • Sculpting with sdfs can be fiddly, so trying to model something very precise may be frustrating. We suggest keeping it simple
    • If your models get heavy you may also need to add acceleration structures *bonus points!
  • Add 3d translucent clouds to your sky. [hard, it will be fiddly and slow your program down A LOT]
  • Add camera animation to create a fly-over effect [???]
    • Depending on how you set up your scene, this may be a pretty involved change because the terrain will have to look good EVERYWHERE not just at a fixed angle. #proceduralLessons).

Submission

  • Update README.md to contain a solid description of your project
  • Publish your project to gh-pages. npm run deploy. It should now be visible at http://username.github.io/repo-name
  • Create a pull request to this repository, and in the comment, include a link to your published project.
  • Submit the link to your pull request on Canvas.

cis566-hw02-landscape's People

Contributors

bigfranklin1 avatar imyself avatar rahwang avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.