Skip to content

Latest commit

 

History

History
53 lines (41 loc) · 3.24 KB

README.md

File metadata and controls

53 lines (41 loc) · 3.24 KB
Raw

chameleon.js

Screenshot

Chameleon.js is an HTML5 application for interactive 3D texture painting built on three.js and TypeScript / JavaScript. The implementation is based on the paper by Takeo Igarashi and Dennis Cosgrove about their Chameleon system.

Usage

  • Drag and drop a local obj 3D model file into the browser window to paint on it.
    • You can find some obj models in the models folder of this repository.
  • Drag your mouse on the object to draw.
  • Hold ⇧Shift key to move the camera around:
    • Drag with mouse left button to rotate.
    • Drag with mouse right button to pan.
    • Scroll with mouse wheel to zoom.
  • Check Perspective Viewing to view the model using a perspective camera
  • Click Reset under Camera to reset camera position.
  • Select a color at Background Reset to repaint the texture with a single color
  • Click Export Textured Model to download a zip file, which contains the texture image and the model in obj format.

Known Issues

Some limitations of the system have been discussed in the original paper. Other issues include:

  • Sluggishness when trying to load relatively complex models with a lot of faces.
  • Incomplete implementation of "Smart Brush":
    • Doesn't prevent brush pill if the mouse moves across a sharp edge.
    • Brush doesn't try to remain on the surface being painted.
  • Cannot paint on a face that does not fully appear on the screen.

Contributors

This was our final project for course CSCI 580 - 3-D Graphics and Rendering. Team members include (in alphabetical order):

  • Jakapun @boong555
    • Implemented the canvas brushes.
    • Implemented the update of "viewing texture" from "drawing texture".
  • Wansui @wansuisu
    • Found out ways to import & export of meshes in obj format.
    • Implemented the update of "viewing texture" from "drawing texture".
  • Yanqing @VividLiu
    • Implemented the algorithm for generating "packed texture" for export from "viewing texture".
  • Yubing @tomtung
    • Designed & implemented the overall system in general.
    • Implemented the generation of "drawing texture" from "viewing texture".
    • Implemented synchronized control of both cameras based on THREE.TrackballControls and THREE.OrthographicTrackballControls
  • Zhenyu @memorybank
    • Implemented the algorithm for recursively finding affected faces in the drawing process.

Reference