Displacement Effect

examples/src/examples/graphics/mesh-displacement.tsx

@@ -17,6 +17,9 @@ class MeshDisplacementExample {
                 <LabelGroup text='Height Map Factor'>
                     <SliderInput binding={new BindingTwoWay()} link={{ observer: data, path: 'script.useDisplacement.heightMapFactor' }} min={-2.0} max={2.0}/>
                 </LabelGroup>
+                <LabelGroup text='Displacement Offset'>
+                    <SliderInput binding={new BindingTwoWay()} link={{ observer: data, path: 'script.useDisplacement.displacementOffset' }} min={-2.0} max={2.0}/>
+                </LabelGroup>
             </Panel>
             <Panel headerText='Point light'>
                 <LabelGroup text='Enabled'>
@@ -145,7 +148,8 @@ class MeshDisplacementExample {
                         },
                         useDisplacement: {
                             enabled: true,
-                            heightMapFactor: -0.25
+                            heightMapFactor: -0.25,
+                            displacementOffset: 0.2
                         }
                     });
 
@@ -187,6 +191,13 @@ class MeshDisplacementExample {
                     material.heightMap = assets.height.resource;
                     material.heightMapFactor = data.get('script.useDisplacement.heightMapFactor');
                     material.useDisplacement = data.get('script.useDisplacement.enabled');
+                    material.displacementOffset = data.get('script.useDisplacement.displacementOffset');
+                    const tiling = new pc.Vec2(2, 2);
+                    material.heightMapTiling = tiling;
+                    material.diffuseMapTiling = tiling;
+                    material.metalnessMapTiling = tiling;
+                    material.glossMapTiling = tiling;
+                    material.normalMapTiling = tiling;
                     material.update();
 
                     const sphere = createSphere(0, 2.5, 0, material, true);
@@ -265,9 +276,11 @@ class MeshDisplacementExample {
 
                     let resizeControlPanel = true;
                     app.on("update", function (dt) {
-						// update material options
+                        // update material options
                         material.heightMapFactor = data.get('script.useDisplacement.heightMapFactor');
                         material.useDisplacement = data.get('script.useDisplacement.enabled');
+                        material.displacementOffset = data.get('script.useDisplacement.displacementOffset');
+
                         material.update();
 
                         // resize control panel to fit the content better

src/scene/materials/standard-material-options-builder.js

@@ -284,7 +284,7 @@ class StandardMaterialOptionsBuilder {
         options.litOptions.useDynamicRefraction = stdMat.useDynamicRefraction;
 
         options.litOptions.useDisplacement = stdMat.useDisplacement;
-
+        options.litOptions.displacementOffset = stdMat.displacementOffset;
     }
 
     _updateEnvOptions(options, stdMat, scene) {

src/scene/materials/standard-material-parameters.js

@@ -90,6 +90,7 @@ const standardMaterialParameterTypes = {
     heightMapFactor: 'number',
 
     useDisplacement: "boolean",
+    displacementOffset: "number",
 
     alphaToCoverage: 'boolean',
     alphaTest: 'number',

src/scene/materials/standard-material.js

@@ -800,6 +800,11 @@
             this._setParameter('material_heightMapFactor', getUniform('heightMapFactor'));
         }
 
+        if (this.useDisplacement) {
+            this._setParameter('material_displacementOffset', this.displacementOffset);
+            console.log(this.displacementOffset)
+        }
+
         const isPhong = this.shadingModel === SPECULAR_PHONG;
 
         // set overridden environment textures
@@ -813,7 +818,7 @@
         } else if (this.sphereMap) {
             this._setParameter('texture_sphereMap', this.sphereMap);
         }
 
         this._setParameter('material_reflectivity', this.reflectivity);
 
         // remove unused params

src/scene/shader-lib/chunks/common/vert/transform.js

@@ -59,13 +59,14 @@ mat4 getModelMatrix() {
 #ifdef DISPLACEMENT
 uniform sampler2D texture_heightMap;
 uniform float material_heightMapFactor;
+uniform float material_displacementOffset;
 #endif
 vec4 getPosition() {
     dModelMatrix = getModelMatrix();
 
     #ifdef DISPLACEMENT
     vec4 dMapSample = texture2D(texture_heightMap, vertex_texCoord0.xy);
-    float displacer = dMapSample.r * material_heightMapFactor * 10.;
+    float displacer = dMapSample.r * material_heightMapFactor * 10. + material_displacementOffset;
     vec3 localPos = vertex_position + vertex_normal * displacer;
     #else
     vec3 localPos = vertex_position;

utils/types-fixup.mjs

@@ -374,6 +374,7 @@ const standardMaterialProps = [
     ['cubeMap', 'Texture|null'],
     ['cubeMapProjection', 'number'],
     ['cubeMapProjectionBox', 'BoundingBox'],
+    ['displacementOffset', 'number'],
     ['diffuse', 'Color'],
     ['diffuseDetailMap', 'Texture|null'],
     ['diffuseDetailMapChannel', 'string'],