Skip to content

Sekuta82/oil-on-threejs-template

Repository files navigation

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

base rendering

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.

base rendering

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.

base rendering

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.

base rendering

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.

About

Template for the brush style rendering with three.js

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published