{"id":17038179,"url":"https://github.com/bchao1/webgl-3d-viewer","last_synced_at":"2025-10-17T08:37:42.650Z","repository":{"id":113819862,"uuid":"349717631","full_name":"bchao1/webgl-3d-viewer","owner":"bchao1","description":"3D model viewer in WebGL and pure Javascript.","archived":false,"fork":false,"pushed_at":"2021-05-13T08:15:22.000Z","size":63810,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-28T14:11:53.688Z","etag":null,"topics":["3d-models","3d-viewer","3d-visualization","computer-graphics","javascript","opengl","shading","transformations","webgl"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bchao1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-20T12:23:56.000Z","updated_at":"2022-07-26T01:31:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"ccd74ceb-f9cb-4443-897e-94fabc6a3229","html_url":"https://github.com/bchao1/webgl-3d-viewer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bchao1%2Fwebgl-3d-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bchao1%2Fwebgl-3d-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bchao1%2Fwebgl-3d-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bchao1%2Fwebgl-3d-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bchao1","download_url":"https://codeload.github.com/bchao1/webgl-3d-viewer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251326850,"owners_count":21571636,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d-models","3d-viewer","3d-visualization","computer-graphics","javascript","opengl","shading","transformations","webgl"],"created_at":"2024-10-14T08:56:13.160Z","updated_at":"2025-10-17T08:37:37.575Z","avatar_url":"https://github.com/bchao1.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 3D Viewer\n\n3D viewer in WebGL and pure Javascript.\n\n![Viewer](./imgs/viewer.png)\n\n## Features\n- Controllable Phong illumination model:\n    - Ambient intensity\n    - Diffuse intensity\n    - Specular intensity\n    - Specular order\n- Controllable light source colors (currently 3 light sources)\n- Controllable geometry:\n    - Translation\n    - Scaling\n    - Rotation\n    - 3D shear\n- Controllable camera:\n    - FOV (field of view)\n- Controllable models\n- Toggle Y-axis rotation animation\n\n## Shadings\n|Flat|Gouraud|Phong|\n|--|--|--|\n|![flat](./imgs/flat.png)|![gouraud](./imgs/gouraud.png)|![phong](./imgs/phong.png)|\n|![flat](./imgs/flat-close.png)|![gouraud](./imgs/gouraud-close.png)|![phong](./imgs/phong-close.png)|\n\n## Phong illumination model\n\u003e \"Suzanne\" a.k.a Blender Monkey.\n\n|Ambient|Diffuse|Specular|Full|\n|--|--|--|--|\n|![ambient](./imgs/ambient.png)|![diffuse](./imgs/diffuse.png)|![specular](./imgs/specular.png)|![full](./imgs/full.png)|\n\n|Low specular order (metal-like)|High specular order (glossy)|\n|--|--|\n|![spec-low](./imgs/spec-low.png)|![spec-high](./imgs/spec-high.png)|\n\n## Model transformations\n\u003e \"Stanford Bunny\"\n\n|Original|Rotate|Translate|Scale|Shear|\n|--|--|--|--|--|\n|![orig](./imgs/orig.png)|![rotate](./imgs/rotate.png)|![translate](./imgs/translate.png)|![scale](./imgs/scale.png)|![shear](./imgs/shear.png)|\n\n## Using your own model\n\nYou 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.\n   \nTo 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).\n\n\u003e Stanford \"Happy Buddha\"\n\n![buddha-happy](./imgs/happy_buddha.png)\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbchao1%2Fwebgl-3d-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbchao1%2Fwebgl-3d-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbchao1%2Fwebgl-3d-viewer/lists"}