Paint color and images on 3d model

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.

1 Like

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

3 Likes

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

2 Likes

This example may be helpful: https://threejs.org/examples/?q=texture#webgl_raycast_texture

2 Likes

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/

5 Likes