Code Monkey home page Code Monkey logo

gapyear's Introduction

gapyear

A deferred rendering engine in WebGL.

Goals

Scene setup

  • Create basic project that serves a static HTML page with a bundled script.
  • Import scene-helpers.js from webgl-hello and add a blank canvas.
  • Create scene graph object, with separate arrays for light, geometry, and cameras.
  • Add cube and render scene.
  • Add FPS counter.
  • Add basic Material class with phong variables.
  • Add basic Light class and allow a single light in the scene.
  • Add many objects to scene randomly.

G-buffer

  • Render entire scene to FBO.
  • Output red, green, and blue to 3 separate FBO color attachments.
  • Render albedo to g-buffer FBO.
  • Display albedo buffer in debug window.
  • Render normal to g-buffer FBO.
  • Render specular contrib to g-buffer FBO.
  • Display albedo + normal + specular contrib + depth buffers in debug window.

L-buffer

  • Render a sphere to FBO for a single point light (debug).
  • Pass a single texture from g-buffer to l-buffer.
  • Render all geometry in light's sphere of influence as white to FBO (debug).
  • Render diffuse to l-buffer FBO.
  • Render specular to l-buffer FBO.
  • Accumulate diffuse and specular for each light to create final image.

Final pass

  • Render textured quad to screen.

Other stuff

  • Add specular intensity to Material class.
  • Add specular intensity to Phong calculation.
  • Remove position from g-buffer and recalculate using depth instead.
  • Pack g-buffer info into 2 textures instead of 3 (diffuse.rgb + specular intensity, normal.xyz + shininess).
  • Integrate basic obj file loader (parse-obj.js from webgl-hello).
  • Add obj file to scene graph.
  • Add some heirarchical model to scene graph.
  • Integrate key capture library (maybe keypress).
  • Add multiple cameras, with the ability to switch between them using keystrokes.
  • Animate some of the objects.
  • Change lighting to Blinn-Phong.
  • Grok Blinn-Phong differences enough to validate that it's working as expected.
  • Add Fresnel factor to specular lighting.
  • Add per-pixel fog using g-buffer depth.
  • Add SSAO.
  • Implement deferred lighting (should be its own section).

gapyear's People

Contributors

cbrenton avatar

Watchers

 avatar  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.