chameleon.js

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

• Igarashi, T., & Cosgrove, D. (2001). Adaptive Unwrapping for Interactive Texture Painting. In Proceedings of the 2001 Symposium on Interactive 3D Graphics (pp. 209–216). New York, NY, USA
• @kangax (2013). Exploring canvas drawing techniques.