I am trying to build an app that would allow users to paint colors and images on models using just WebGL (no three.js). I have all the rendering stuff set up. I know that painting on 3d objects have something to do with the stencil buffer but I am not sure how it looks in the code. I also want to draw images onto the models, so I guess the brush should be an image.
Any outline code for handling the painting would be good for me.
In that case, you are on the wrong forum. You should ask on a WebGL or OpenGL forum instead.
You are asking people to do your work for you. Usually, you’ll get a better response if you show how you have attempted to solve this yourself, first.
I am not asking for the full code. just something that would get me started. Some thing like ‘do this and then do that’. I searched on google for the topic. I could only get a github repository that did it all but it had no explanation on how it all worked.
Also, the principles would be same for three.js and for just using webgl, so I don’t think it was a bad idea to ask here.
Fair enough.
Maybe these examples can help you:
https://threejs.org/examples/webgl_decals.html
https://threejs.org/examples/webgl_materials_texture_canvas.html
is there a way that i can somehow do the splash on the texture (by clicking on the model) instead of adding a new object everytime?
yes you can, but that requires carefully unwrapped object with as little seams as possible. 3js now returns UV of the clicked point, with these you can alter the pixel under mouse in the texture
This example may be helpful: https://threejs.org/examples/?q=texture#webgl_raycast_texture
what about this?
https://sbcode.net/extra_html/game.html
click the model with your mouse, or touch with your finger if on mobile.
Thank you everyone for replying! I think I found what I was looking for. This demo created by @sciecode is pretty close to what i want. https://rawcdn.githack.com/sciecode/three.js/f4e363a8e0cf6c496f4191192d7eb15110442a7c/examples/webgl_paint_texture.html
https://sciecode.github.io/THREE.TexturePainter/
Hi,
I’m very interested in this.
am i missing something with the scanned head link, instructions etc?
is there a repo for all of this? open source?
thanks!
https://sciecode.github.io/THREE.TexturePainter/
The project does not exit anymore, only can download the HTML Version. Anyway, this project is a very good staring.
it does exist but is hidden in the deleted branch for some reason
edit: ok so I could not access it with git 
$ git clone git@github.com:sciecode/three.js.git
Cloning into 'three.js'...
remote: Enumerating objects: 307442, done.
remote: Total 307442 (delta 0), reused 0 (delta 0), pack-reused 307442
Receiving objects: 100% (307442/307442), 1.16 GiB | 3.52 MiB/s, done.
Resolving deltas: 100% (226751/226751), done.
Updating files: 100% (4565/4565), done.
$ cd three.js/
$ git checkout -b texture-painter f4e363a8e0cf6c496f4191192d7eb15110442a7c
fatal: reference is not a tree: f4e363a8e0cf6c496f4191192d7eb15110442a7c
$ git reset --hard f4e363a8e0cf6c496f4191192d7eb15110442a7c
fatal: Could not parse object 'f4e363a8e0cf6c496f4191192d7eb15110442a7c'.
edit 2: so I saved it to new github repo and did a patch to work with current 3js. while reading the source, I have noticed there is a kind of wtf texture-related moment that I want to fix too, but it will have to wait.
Good Job @makc3d
Reviving this old thread… I wrote this over the last couple days:
https://manthrax.github.io/monkeypaint/index.html?1
If anyone has questions about the implementation, hmu!
I’m new to Three.js, I would love to know more about the implementation!
wa!!! 厉害啊！
There’s some info in the readme here: 
will you address the performance issues 
Were you asking me something?
yes, I was asking if you will fix the performance? maybe try it on some low-end notebook to see what I mean.