/mfsv

A prototypical WebGL-based Multi-frame Sampling viewer for 3D scenes.

Primary LanguageJavaScriptMIT LicenseMIT

MFSV: A Multi-frame Sampling Viewer in WebGL

A prototypical WebGL-based Multi-frame Sampling viewer for 3D scenes using Three.js. Based on the paper "Progressive Rendering using Multi-Frame Sampling" by Daniel Limberger, Karsten Tausche, Johannes Linke, and Jürgen Döllner (published in GPU Pro 7, edited by Wolfgang Engel, pp.125-141, 2016).

Click here for examples.

Features

  • Kernel-based Multi-frame Sampling
    • Anti-Aliasing
    • Soft Shadows
    • Depth-of-Field
    • SSAO
  • Trackball controls
  • Presets for light and camera position
  • Automatic detection of highest texture precision for render targets (float > half-float > byte)
  • DPI-sensitive rendering (no blurry images on high DPI displays)

Supported model formats

Usage

Step 1: Include .js files

Get and include the following .js files in your HTML code:

  • mfsv.js
  • kernels.js
  • three.js
  • TrackballControls.js
  • dat.gui.js
  • OBJLoader.js
  • stats.js (optional)
  • eval.js (optional)

Step 2: Displaying a model

OBJ model

<div class="mfsviewer" objPath="obj/mitsuba.obj">

JSON model format

<div class="mfsviewer" jsonPath="obj/crytek-sponza.json">

All textures need to be located in a subdirectory called "textures" relative to the model file. A Python script to convert textured .obj models into JSON models can be found here.

Optional URL Parameters

msoechting.github.io/mfsv/demo-teapot.html?shadowMapSize=512&forcefloat=1
  • shadowMapSize: Sets the width and height for the shadow map.
  • forcefloat: If set to 1, forces the renderer to use float texture precision, regardless of detected WebGL extensions.