How to write shaders to reproduce the hand drawn style of this old map?

Hello,

I’m new with shaders and I want to recreate this type of hand drawn style of an old map of Paris. So it’s basically outlines and hatch or cross hatch on the faces.

The project is using React Three Fiber so it’s regular glsl shaders.

I don’t know where to start and here are my main concerns:

  • How can I have automatically the lines going the right direction?
  • How to handle the dark parts (more lines in the same space) depending on the light?
  • Should I consider using multiple shaders for the differents types of materials: grass, roofs, facades, tress, etc?

Thanks for your help!

I’d rather use an artistic approach and made textures with all those strokes/outlines/cross-strokes and applied them to different faces of the models, especially because they don’t look like they are mathematically aligned, they are drawn by an artist.

Making a procedural shader for this looks like an overkill and it won’t have the same look and feel.

Thanks for your answer, and good point, yes.

As there are a lot of buildings, I was wondering if I could use a base with maybe the outlines only for everyone and then add image textures?

Also I found this nice render by Jaume Sanchez:
https://spite.github.io/sketch/lines-vi/index.html

or maybe this one:
https://spite.github.io/sketch/post-cross-hatch-i/index.html

Is it possible to apply a shader to some objects, and another shader to other objects?

2 Likes

Outlines are usually postprocessing effects, they are added in 2D on the rendered image, THREE has an example:

https://threejs.org/examples/#webgl_postprocessing_outline

This renders are possible to do of course but they are very complex and might not look well on a particular building in a particular orientation, they look better on abstract shapes.

It’s relatively easy to make a texture with vertical lines in it and then tile it differently depending on the illumination of the surface (making lines more dense if the surface is darker), I might try it if I have time, but it might look trippy when you rotate it.

Making lines parallel to the edges of a roof can be done through uv unwrapping in the modelling software like Blender but that’s a manual process.

Yes, a shader code is a part of a material setup, you create ShaderMaterial and then create a mesh out of some geometry and the material.

You can have many shader materials and mix them with different geometries to make various models.

1 Like

Ok, I didn’t know that, thanks.

Yes, I can prepare multiple textures in order to use them automatically but I can’t make all building since it’s very large map in the end. It’s 20 panels like this one. Actually, I need to build myself a tool, like a world builder for a video game.

Thanks for your answers!

If every building is unique then it’s gonna be a lot of work but if you make a roof panel, texturize it up to your liking and then reuse it in as many roofs as possible then you only need to do it once or twice. Same with wall panels windows and everything. Video games might have many buildings but they are all built out of not-so-many-parts (and textures). You can scale/rotate parts, assemble them differently to produce larger variety of models.

1 Like

Made the trippy cube where texture density depends on illumination.
https://alikim.com/qcode/index.html?glsl%20:%20stripy%20cube

1 Like

Oh thanks that’s very helpful!

Hi, the link unfortunately does not work anymore.
I would be very interested in your approach. Anyway you could reupload it?

Thanks a lot!

1 Like

Thanks for noticing, the website should be up and running by now, let me know if you have any problems :wink:

1 Like

Thanks a lot!

1 Like