Skip to content

GSOC 26: bumpTexture() for height maps - #9089

Merged
davepagurek merged 7 commits into
processing:mainfrom
Nixxx19:bump-texture
Aug 16, 2026
Merged

GSOC 26: bumpTexture() for height maps#9089
davepagurek merged 7 commits into
processing:mainfrom
Nixxx19:bump-texture

Conversation

@Nixxx19

@Nixxx19 Nixxx19 commented Aug 16, 2026

Copy link
Copy Markdown
Member

closes #9088. follow up to #9067.

p5 has normalTexture() for tangent space normal maps, where rgb encodes the surface normal. this adds bumpTexture() for the other kind: a grayscale height map, where brightness is height and the normal is worked out from how fast that height changes.

how it works

both share one texture slot and differ by a mode flag the shader reads, so only one is active at a time and setting either replaces the other. that keeps it purely additive, nothing about normalTexture() or the existing api changes.

in bump mode the shader samples the map at the current texel and its two neighbours, and builds the tangent space normal from the difference. it reuses the same per vertex tangent frame normal mapping already uses, so no extra vertex data and it works in webgl1 too (no dFdx). the texel size comes in as a uniform so the neighbour offsets are right for any map size.

done in both webgl and webgpu, matching what we did for normal maps.

docs

the two techniques get confused a lot, and the obj format doesn't help by calling the slot map_Bump even when the image is a normal map. so both reference entries now explain what image each one expects (grayscale height vs blue tinted directions) and cross link to each other. bumpTexture() has a runnable example, which i rendered to check it matches its describe().

loading a model is unchanged: map_Bump still loads as a normal map, since that's what it has been.

tests

added coverage for bump mode being set, null clearing it, and the two kinds replacing each other in the shared slot. full webgl + webgpu suites pass, including the existing normal map visual tests, which confirms mode 0 renders exactly as before.

note: this is stacked on #9068, so that one goes in first.

@p5-bot

p5-bot Bot commented Aug 16, 2026

Copy link
Copy Markdown

@davepagurek

Copy link
Copy Markdown
Contributor

I'm reading some more, I actually wonder if this should be what the obj format's map_bump refers to? This stackoverflow suggests normal maps were never officially added, and this issue for a common loader library talks about the lack of consensus for a normal map parameter. Did you have other references for the obj format using normal maps? If not maybe we should update our model importer to go through this bump map path instead, and keep the normal maps as just a a user-facing method for now and for the future gltf importer?

Comment thread src/webgl/material.js
*
* function draw() {
* background(0);
*

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's add orbitControl() here, and some subtle rotation like in the other PR, + maybe some shininess to make it clearer?

I also notice a seam here too:

Image

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done, added orbitControl(), the same subtle rotation, and turned on specular + shininess so the raised areas catch a highlight. reads much clearer.

the seam was the texture not tiling, same root cause as the one on the other pr. two parts to it here: the pattern now repeats a whole number of times across the image, and the example turns on textureWrap(REPEAT). the wrap matters specifically for bump maps because the shader reads a neighbouring texel to get the slope, so at u=1 that neighbour was running off the edge and clamping, which flattened the slope right at the seam. with both, it's gone.

@davepagurek
davepagurek merged commit 6ed63f4 into processing:main Aug 16, 2026
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

add bumpTexture() alongside normalTexture(), and document the difference

2 participants