https://github.com/bchao1/webgl-3d-viewer

3D model viewer in WebGL and pure Javascript.
https://github.com/bchao1/webgl-3d-viewer

3d-models 3d-viewer 3d-visualization computer-graphics javascript opengl shading transformations webgl

Last synced: 5 months ago
JSON representation

3D model viewer in WebGL and pure Javascript.

• Host: GitHub
• URL: https://github.com/bchao1/webgl-3d-viewer
• Owner: bchao1
• Created: 2021-03-20T12:23:56.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-05-13T08:15:22.000Z (over 4 years ago)
• Last Synced: 2025-04-28T14:11:53.688Z (5 months ago)
• Topics: 3d-models, 3d-viewer, 3d-visualization, computer-graphics, javascript, opengl, shading, transformations, webgl
• Language: HTML
• Homepage:
• Size: 60.9 MB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 3D Viewer

3D viewer in WebGL and pure Javascript.

![Viewer](./imgs/viewer.png)

## 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](./imgs/flat.png)|![gouraud](./imgs/gouraud.png)|![phong](./imgs/phong.png)|

|![flat](./imgs/flat-close.png)|![gouraud](./imgs/gouraud-close.png)|![phong](./imgs/phong-close.png)|

## Phong illumination model

> "Suzanne" a.k.a Blender Monkey.

|Ambient|Diffuse|Specular|Full|

|--|--|--|--|

|![ambient](./imgs/ambient.png)|![diffuse](./imgs/diffuse.png)|![specular](./imgs/specular.png)|![full](./imgs/full.png)|

|Low specular order (metal-like)|High specular order (glossy)|

|--|--|

|![spec-low](./imgs/spec-low.png)|![spec-high](./imgs/spec-high.png)|

## Model transformations

> "Stanford Bunny"

|Original|Rotate|Translate|Scale|Shear|

|--|--|--|--|--|

|![orig](./imgs/orig.png)|![rotate](./imgs/rotate.png)|![translate](./imgs/translate.png)|![scale](./imgs/scale.png)|![shear](./imgs/shear.png)|

## 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](./imgs/happy_buddha.png)