mfsv

A prototypical WebGL-based Multi-frame Sampling viewer for 3D scenes using Three.js. Examples hosted here.

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-senstive rendering (no blurry images on high DPI displays)

Supported model formats

• Untextured .obj models
• JSON Model Format

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
• eval.js

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". A Python script to convert textured .obj models into JSON models can be found here.

Optional URL Parameters

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