/webgl-3d-viewer

3D model viewer in WebGL and pure Javascript.

Primary LanguageHTML

3D Viewer

3D viewer in WebGL and pure Javascript.

Viewer

Features

  • Controllable Phong illumination model:
    • Ambient intensity
    • Diffuse intensity
    • Specular intensity
    • Specular order
  • Controllable light source colors (currently 3 light sources)
  • Controllable geometry:
    • Translation
    • Scaling
    • Rotation
    • 3D shear
  • Controllable camera:
    • FOV (field of view)
  • Controllable models
  • Toggle Y-axis rotation animation

Shadings

Flat Gouraud Phong
flat gouraud phong
flat gouraud phong

Phong illumination model

"Suzanne" a.k.a Blender Monkey.

Ambient Diffuse Specular Full
ambient diffuse specular full
Low specular order (metal-like) High specular order (glossy)
spec-low spec-high

Model transformations

"Stanford Bunny"

Original Rotate Translate Scale Shear
orig rotate translate scale shear

Using your own model

You can modify line 843,844 in index.html to use your own model. Concretely, comment out the predefined models modelNames = ["buddha", "teapot", "bunny", "suzanne"]; and change to modelNames = ["own"];. The program will load the ./src/model/Own.json file and render it.

To generate the Own.json file, modify input_obj_path and texture_path in the ./src/raw/obj2json.py script. The script loads a .obj file and (optinally) a texture atlas and outputs a processed json file to ./src/model/Own.json. Input models generated by this script are scaled and centered to fit a [-50, 50] box (aspect ratio kept).

Stanford "Happy Buddha"

buddha-happy