PBR from one image

mrdoob · April 21, 2019, 7:31pm

We used to have a method to convert a bump texture to a normal texture. I think I may have deleted it instead of moving it to the examples folder…

NoxWings · April 27, 2019, 1:19am

Bump to normal can also be computed on the fragment shader
https://www.shadertoy.com/view/3sSSW1

Not sure if threejs has such an option though, or if it really makes sense on a practical approach.

If you are really concerned about texture download size, you could just do bump to normal after the bump textures are downloaded.

mrdoob · April 28, 2019, 6:25am

Found the file:

github.com

mrdoob/three.js/blob/b6070a0c9da829bb66213e861d2298c879e12bbf/examples/js/utils/ImageUtils.js

/**
 * @author alteredq / http://alteredqualia.com/
 * @author mrdoob / http://mrdoob.com/
 * @author Daosheng Mu / https://github.com/DaoshengMu/
 */

THREE.ImageUtils = {

	getNormalMap: function ( image, depth ) {

		// Adapted from http://www.paulbrunt.co.uk/lab/heightnormal/

		function cross( a, b ) {

			return [ a[ 1 ] * b[ 2 ] - a[ 2 ] * b[ 1 ], a[ 2 ] * b[ 0 ] - a[ 0 ] * b[ 2 ], a[ 0 ] * b[ 1 ] - a[ 1 ] * b[ 0 ] ];

		}

		function subtract( a, b ) {

This file has been truncated. show original

Topic		Replies	Views
PBR material in threejs Questions textures , materials	18	4271	December 21, 2020
Can the bumpmap texture be combined into a single channel? Questions bump-maps , material	2	834	October 27, 2021
PBR material looks too shiny in three.js Questions textures , materials , pbr	12	3447	July 1, 2020
Multiple color/bump/metalness maps on one object Questions textures	0	230	August 8, 2023
Mapping roughness/metallic/AO from one texture file Questions textures , materials	4	3271	June 25, 2022

PBR from one image

Related Topics