Oil on Three.js Template

This is a working examble of a realtime 3d scene that is supposed to look like a rough oil painting that is constantly changing.

The sample consists of basic Javascript and GLSL without any francy frameworks.

It utilises gl_PontSize to create the "planes" for the brush strokes.

To ensure the correct sorting, transparency can't be used. To still have transparent brush strokes, it uses the discard command in the shader, which discards rendering of specifix fragments.

Preview

http://ays-arts.de/public/oil-on-threejs-template/index.html

Creating the point clouds

This is my approach. There might be better options, based on your tool. In the end, all you need is a point-type or a regular polygon-type mesh. It doesn't really matter. Three.js takes both.

It begins with a regular 3D scene. The mesh resolution does not matter. These objects won't be used directly.

The next step is about creating a point cloud. I chose to use a point cloud generator that creates fairly uniformly distributed points on any surface. I then used these points to create a polygon at each point's position.

Why polygons? I couldn't manage to export a real point mesh so I chose this workaround. The polygons don't relly matter. We only need the vertices. Again. this is highly tool-specific.

The final step is getting the color into the vertex color of each vertex. I first baked the output into a texture and converted the outcome to a vertex color attribute. You can skip the texture, if your tool allows your to directly bake into the vertex color buffer.

That's it. The shader will do the rest of the work for you.

Please let me know if you are building something cool based on this idea.