โ† All examples

godot shaders

Parallax occlusion mapped procedural bricks

Brick wall with real-looking depth on a flat surface: the view ray is marched through a procedural brick heightfield in tangent space, so mortar lines sink, bricks occlude each other at angles, and the normal comes from the same height.

Recorded render of Parallax occlusion mapped procedural bricks

What this component contains

  • ATTRIBUTION.md
  • LICENSE
  • README.md
  • component.json
  • demo.tscn
  • inspect_shader.py
  • material.tres
  • parallax_occlusion_bricks.gdshader
  • preview.png
  • test_package.py
  • verification/native.json

How it works

Shader type
spatial
Parameters
brick_color (vec4 = 0.62, 0.26, 0.18, 1), mortar_color (vec4 = 0.72, 0.7, 0.66, 1), bricks_across (float = 4), bricks_down (float = 8), mortar_width (float = 0.06), bevel (float = 0.08), depth_scale (float = 0.05), steps (int = 24) and 1 more
Use it on
A mesh with UVs and tangents (Godot primitive meshes have both).
Result
A red brick wall whose mortar lines look recessed and whose bricks occlude each other at angles.
Renderers
compatibility: compiled and rendered, forward plus: not verified, mobile: not verified
Placement
res://baltor/godot_shaders/parallax_occlusion_bricks/

Recorded checks

godot 4.7.2.stable.official.ed1daf0bf

  • contract_static
  • engine_run
  • engine_log_clean
  • shader_in_scene
  • capture_written
  • render_not_uniform
  • shader_changes_pixels

Limits to consider

The silhouette stays flat: only the interior of the surface shows depth. Shadows and depth are the flat surface's. Cost grows with `steps`. Strongly curved surfaces bend the illusion. The march runs in UV space, so non-square UV scaling skews the depth.