updates meshes using custom shaders

src/lib/babylon/explorer-alpha-shader/fragment.ts

@@ -38,77 +38,77 @@ in vec3 vNormalW;
 in vec2 vUV;
 
 // Refs
-float _AlphaToMaskAvailable	= 1.00f;
-float _Clipping_Level = 0.00f;
-float _Unlit_Intensity = 4.00f;
-float _Is_BLD = 0.00f;
-float _Offset_X_Axis_BLD = -0.05f;
-float _Offset_Y_Axis_BLD = 0.09f;
-float _Inverse_Z_Axis_BLD = 1.00f;
-float _Is_Filter_LightColor = 1.00f;
-float _Is_LightColor_Base = 1.00f;
-vec3 _Color = vec3(-4.48876f, 0.00f, 0.00f);
-vec3 _1st_ShadeColor = vec3(0.88792f, 0.88792f, 0.88792f);
-vec3 _2nd_ShadeColor = vec3(0.60383f, 0.60383f, 0.60383f);
-float _Use_BaseAs1st = 1.00f;
-float _Is_LightColor_1st_Shade = 1.00f;
-float _Use_1stAs2nd = 1.00f;
-float _Is_LightColor_2nd_Shade = 1.00f;
-float _Is_NormalMapToBase = 0.00f;
-float _Tweak_SystemShadowsLevel = 0.00f;
-float _Set_SystemShadowsToBase = 1.00f;
-float _BaseColor_Step = 0.20f;
-float _BaseShade_Feather = 0.02f;
-vec3 _ShadeColor_Step = vec3(0.20f, 0.20f, 0.20f);
-vec3 _1st2nd_Shades_Feather = vec3(0.05f, 0.05f, 0.05f);
-float _Is_NormalMapToHighColor = 1.00f;
-float _Tweak_HighColorMaskLevel = -1.00f;
-float _HighColor_Power = 0.70f;
-float _Is_SpecularToHighColor = 0.00f;
-vec3 _HighColor = vec3(1.00f, 1.00f, 1.00f);
-float _Is_LightColor_HighColor = 1.00f;
-float _Is_BlendAddToHiColor = 1.00f;
-float _TweakHighColorOnShadow = 0.00f;
-float _Is_UseTweakHighColorOnShadow = 0.00f;
-vec3 _RimLightColor = vec3(1.00f, 1.00f, 1.00f);
-float _Is_LightColor_RimLight = 1.00f;
-float _Is_NormalMapToRimLight = 1.00f;
-float _RimLight_Power = 0.30f;
-float _RimLight_InsideMask = 0.15f;
-float _RimLight_FeatherOff = 0.00f;
-float _Tweak_LightDirection_MaskLevel = 0.00f;
-float _LightDirection_MaskOn = 0.00f;
-float _Ap_RimLight_Power = 0.10f;
-float _Tweak_RimLightMaskLevel = -0.90f;
-vec3 _Ap_RimLightColor = vec3(1.00f, 1.00f, 1.00f);
-float _Is_LightColor_Ap_RimLight = 1.00f;
-float _Ap_RimLight_FeatherOff = 0.00f;
-float _Add_Antipodean_RimLight = 0.00f;
-float _RimLight = 1.00f;
-float _Rotate_MatCapUV = 4.59037E-41f;
-float _CameraRolling_Stabilizer = 3.23322E-41f;
-float _Rotate_NormalMapForMatCapUV = 5.60519E-45f;
-float _BumpScaleMatcap = 2.32616E-43f;
-float _Is_NormalMapForMatCap = 1.79366E-43f;
-float _Is_Ortho = 9.38870E-43f;
-float _Tweak_MatCapUV = -2.41782E+15f;
-float _Inverse_MatcapMask = 0.00f;
-float _Tweak_MatcapMaskLevel = 0.00f;
-vec4 _MatCapColor = vec4(1.00f, 1.00f, 1.00f, 1.00f);
-float _Is_LightColor_MatCap = 1.00f;
-float _TweakMatCapOnShadow = 0.00f;
-float _Is_BlendAddToMatCap = 1.00f;
-float _Is_UseTweakMatCapOnShadow = 0.00f;
-float _MatCap = 0.00f;
-float _GI_Intensity = 0.00f;
-vec4 emissive = vec4(1.07760E-42f, 0.00f, 0.00f, 0.0f);
-float _BlurLevelMatcap = 0.00f;
-vec4 _BaseColor = vec4(0.88792f, 0.53948f, 0.37626f, 1.00f);
-float _Cutoff = 0.0f;
-float _Smoothness = 0.50f;
-half _BumpScale = 1.00f;
-vec4 _EmissionColor = vec4(0.00f, 0.00f, -3.77099E+15f, 4.59037E-41f);
-vec4 _GlossyEnvironmentColor = vec4(0.00f, 0.00f, 0.00f, 0.00f);
+float _AlphaToMaskAvailable = 1.0;
+float _Clipping_Level = 0.0;
+float _Unlit_Intensity = 4.0;
+float _Is_BLD = 0.0;
+float _Offset_X_Axis_BLD = -0.05;
+float _Offset_Y_Axis_BLD = 0.09;
+float _Inverse_Z_Axis_BLD = 1.0;
+float _Is_Filter_LightColor = 1.0;
+float _Is_LightColor_Base = 1.0;
+vec3 _Color = vec3(-4.48876, 0.0, 0.0);
+vec3 _1st_ShadeColor = vec3(0.88792, 0.88792, 0.88792);
+vec3 _2nd_ShadeColor = vec3(0.60383, 0.60383, 0.60383);
+float _Use_BaseAs1st = 1.0;
+float _Is_LightColor_1st_Shade = 1.0;
+float _Use_1stAs2nd = 1.0;
+float _Is_LightColor_2nd_Shade = 1.0;
+float _Is_NormalMapToBase = 0.0;
+float _Tweak_SystemShadowsLevel = 0.0;
+float _Set_SystemShadowsToBase = 1.0;
+float _BaseColor_Step = 0.2;
+float _BaseShade_Feather = 0.02;
+vec3 _ShadeColor_Step = vec3(0.2, 0.2, 0.2);
+vec3 _1st2nd_Shades_Feather = vec3(0.05, 0.05, 0.05);
+float _Is_NormalMapToHighColor = 1.0;
+float _Tweak_HighColorMaskLevel = -1.0;
+float _HighColor_Power = 0.7;
+float _Is_SpecularToHighColor = 0.0;
+vec3 _HighColor = vec3(1.0, 1.0, 1.0);
+float _Is_LightColor_HighColor = 1.0;
+float _Is_BlendAddToHiColor = 1.0;
+float _TweakHighColorOnShadow = 0.0;
+float _Is_UseTweakHighColorOnShadow = 0.0;
+vec3 _RimLightColor = vec3(1.0, 1.0, 1.0);
+float _Is_LightColor_RimLight = 1.0;
+float _Is_NormalMapToRimLight = 1.0;
+float _RimLight_Power = 0.3;
+float _RimLight_InsideMask = 0.15;
+float _RimLight_FeatherOff = 0.0;
+float _Tweak_LightDirection_MaskLevel = 0.0;
+float _LightDirection_MaskOn = 0.0;
+float _Ap_RimLight_Power = 0.1;
+float _Tweak_RimLightMaskLevel = -0.9;
+vec3 _Ap_RimLightColor = vec3(1.0, 1.0, 1.0);
+float _Is_LightColor_Ap_RimLight = 1.0;
+float _Ap_RimLight_FeatherOff = 0.0;
+float _Add_Antipodean_RimLight = 0.0;
+float _RimLight = 1.0;
+float _Rotate_MatCapUV = 4.59037e-41;
+float _CameraRolling_Stabilizer = 3.23322e-41;
+float _Rotate_NormalMapForMatCapUV = 5.60519e-45;
+float _BumpScaleMatcap = 2.32616e-43;
+float _Is_NormalMapForMatCap = 1.79366e-43;
+float _Is_Ortho = 9.3887e-43;
+float _Tweak_MatCapUV = -2.41782e+15;
+float _Inverse_MatcapMask = 0.0;
+float _Tweak_MatcapMaskLevel = 0.0;
+vec4 _MatCapColor = vec4(1.0, 1.0, 1.0, 1.0);
+float _Is_LightColor_MatCap = 1.0;
+float _TweakMatCapOnShadow = 0.0;
+float _Is_BlendAddToMatCap = 1.0;
+float _Is_UseTweakMatCapOnShadow = 0.0;
+float _MatCap = 0.0;
+float _GI_Intensity = 0.0;
+vec4 emissive = vec4(1.07760e-42, 0.0, 0.0, 0.0);
+float _BlurLevelMatcap = 0.0;
+vec4 _BaseColor = vec4(0.88792, 0.53948, 0.37626, 1.0);
+float _Cutoff = 0.0;
+float _Smoothness = 0.5;
+float _BumpScale = 1.0;
+vec4 _EmissionColor = vec4(0.0, 0.0, -3.77099e+15, 4.59037e-41);
+vec4 _GlossyEnvironmentColor = vec4(0.0, 0.0, 0.0, 0.0);
 
 uniform vec4 _Emissive_Color; // 0.00, 0.00, 0.00, 1.00
 
@@ -771,15 +771,13 @@ half3 EnvironmentBRDFSpecular(BRDFData brdfData, half fresnelTerm)
 {
     float surfaceReduction = 1.0 / (brdfData.roughness2 + 1.0);
     return half3(surfaceReduction * lerp(brdfData.specular, vec3(brdfData.grazingTerm), fresnelTerm));
-    //return half3(0.0);
 }
 
 half3 EnvironmentBRDF(BRDFData brdfData, half3 indirectDiffuse, half3 indirectSpecular, half fresnelTerm)
 {
     half3 c = indirectDiffuse * brdfData.diffuse;
     c += indirectSpecular * EnvironmentBRDFSpecular(brdfData, fresnelTerm);
     return c;
-    //return half3(0.0);
 }
 
 half3 GlobalIlluminationUTS(BRDFData brdfData, half3 bakedGI, half occlusion, half3 normalWS, half3 viewDirectionWS, float3 positionWS, float2 normalizedScreenSpaceUV)
@@ -839,7 +837,7 @@ half3 SHEvalLinearL2(half4 normal)
     // Final (5th) quadratic (L2) polynomial
     half vC = normal.x*normal.x - normal.y*normal.y;
     x2 = unity_SHC.rgb * vC;
-
+    
     return x1 + x2;
 }
 
@@ -866,7 +864,6 @@ half3 GetLightColor(UtsLight light)
 }
 
 
-
 float4 fragDoubleShadeFeather(VertexOutput i)
 {
     float2 Set_UV0 = i.uv0;
@@ -1005,7 +1002,6 @@ float4 fragDoubleShadeFeather(VertexOutput i)
 
     int nSet_2nd_ShadePositionArrID = _Set_2nd_ShadePositionArr_ID;
     float4 _Set_2nd_ShadePosition_var = SAMPLE_SET_2ND_SHADEPOSITION(TRANSFORM_TEX(Set_UV0,_Set_2nd_ShadePosition),nSet_2nd_ShadePositionArrID);
-    // SHARED END
 
     //Minmimum value is same as the Minimum Feather's value with the Minimum Step's value as threshold.
     float _SystemShadowsLevel_var = (shadowAttenuation*0.5)+0.5+_Tweak_SystemShadowsLevel > 0.001 ? (shadowAttenuation*0.5)+0.5+_Tweak_SystemShadowsLevel : 0.0001;

src/lib/babylon/explorer-alpha-shader/index.ts

@@ -1,24 +1,28 @@
-import { ShaderMaterial, ShaderLanguage, Scene, ShaderStore } from '@babylonjs/core'
+import { ShaderMaterial, ShaderLanguage, Scene, Effect } from '@babylonjs/core'
 import { customFragmentShader } from './fragment'
 import { customVertexShader } from './vertex'
 
-export function createShader(scene: Scene) {
-  ShaderStore.ShadersStore['customVertexShader'] = customVertexShader
-  ShaderStore.ShadersStore['customFragmentShader'] = customFragmentShader
+export function createShader(scene: Scene, shaderId: string) {
+  Effect.ShadersStore['customVertexShader'] = customVertexShader
+  Effect.ShadersStore['customFragmentShader'] = customFragmentShader
   return new ShaderMaterial(
-    'shader',
+    shaderId,
     scene,
     {
       vertex: 'custom',
       fragment: 'custom',
     },
     {
       attributes: ['position', 'normal', 'uv'],
-      uniforms: ['world', 'worldView', 'worldViewProjection', 'view', 'projection','time','direction'],
+      uniforms: ['world', 'worldView', 'worldViewProjection', 'view', 'projection', 'time', 'direction'],
       uniformBuffers: undefined,
-      samplers: ['textureSampler'],
-      defines: ['MyDefine'],
-      needAlphaBlending: true,
+      samplers: [
+        'sampler_MainTex',
+        'sampler_NormalMap',
+        'sampler_Emissive_Tex',
+        'MAINTEX',
+      ],
+      defines: [],
       shaderLanguage: ShaderLanguage.GLSL,
     }
   )

src/lib/babylon/render.ts

@@ -1,4 +1,4 @@
-import { Color3, Color4, Texture } from '@babylonjs/core'
+import { Color4, HighlightLayer, Texture } from '@babylonjs/core'
 import { PreviewConfig, PreviewType, BodyShape, IPreviewController, IEmoteController } from '@dcl/schemas'
 import { createInvalidEmoteController, isEmote } from '../emote'
 import { getBodyShape } from './body'
@@ -21,14 +21,13 @@ export async function render(canvas: HTMLCanvasElement, config: PreviewConfig):
   // create the root scene
   const [scene, sceneController] = await createScene(canvas, config)
 
-  // create Shader
-  const shaderMaterial = createShader(scene)
-  const mainTexture = new Texture('logo.png', scene)
+  // create shaders - feet , hands , body , pants , hairs
+  const hairShaderMaterial = createShader(scene, 'hair')
+  const upperBodyShaderMaterial = createShader(scene, 'hoodie')
+  const lowerBodyShaderMaterial = createShader(scene, 'pants')
+  const feetShaderMaterial = createShader(scene, 'shoes')
 
-  // Add Texture to the Shader
-  if (shaderMaterial) {
-    shaderMaterial?.setTexture('textureSampler', mainTexture)
-  }
+  const hl = new HighlightLayer('hl1', scene)
 
   try {
     // setup the mappings for all the contents
@@ -53,11 +52,44 @@ export async function render(canvas: HTMLCanvasElement, config: PreviewConfig):
         })
         promises.push(promise)
       }
+
       const assets = (await Promise.all(promises)).filter(isSuccesful)
 
-      // add all assets to scene
+      // add all assets to  scene and create shaderMaterial based on bodyPart
       for (const asset of assets) {
         asset.container.addAllToScene()
+
+        // Dynamically create a texture for the asset
+        const texture = new Texture(asset.wearable.thumbnail, scene)
+
+        texture.onLoadObservable.add(() => {
+          console.log(`${'asset name'} texture loaded successfully.`)
+        })
+
+        switch (asset.wearable.name) {
+          case 'body_shape':
+            break
+
+          case 'hair':
+            hairShaderMaterial.setTexture('sampler_MainTex', texture)
+            break
+
+          case 'upper_body':
+            upperBodyShaderMaterial.setTexture('sampler_MainTex',texture)
+            break
+
+          case 'lower_body':
+            lowerBodyShaderMaterial.setTexture('sampler_MainTex', texture)
+            break
+
+          case 'feet':
+            feetShaderMaterial.setTexture('sampler_MainTex', texture)
+            break
+
+          default:
+            console.warn(`Unknown asset type: ${asset.wearable.name}`)
+            break
+        }
       }
 
       // build avatar
@@ -95,34 +127,46 @@ export async function render(canvas: HTMLCanvasElement, config: PreviewConfig):
       emoteController = createInvalidEmoteController()
     }
 
-    // Apply Shader
-    if (shaderMaterial) {
-      for (const mesh of scene.meshes) {
-        if (mesh.material !== shaderMaterial) {
-          // Dispose of the existing material if it exists
-          mesh.material?.dispose();
-
-          // Assign the new shader material
-          mesh.material = shaderMaterial;
-        }
+    scene.getOutlineRenderer()
 
-        mesh.material = shaderMaterial;
-        mesh.computeBonesUsingShaders = false;
-        // mesh.renderOutline = true;
-        mesh.outlineColor = new Color3(0.95, 0.95, 0.95) // Set the outline color to red
+    // Apply Shader
+    for (const mesh of scene.meshes) {
+      switch (mesh?.id) {
+        case 'M_Hair_Standard_01':
+          mesh.material = hairShaderMaterial
+          break
+        case 'M_uBody_Hoodie_01':
+          mesh.material = upperBodyShaderMaterial
+          break
+        case 'M_uBody_Hoodie_02':
+          mesh.material = upperBodyShaderMaterial
+          break
+        case 'M_lBody_LongPants_01_primitive0':
+          mesh.material = lowerBodyShaderMaterial
+          break
+        case 'M_lBody_LongPants_01_primitive1':
+          mesh.material = lowerBodyShaderMaterial
+          break
+        case 'M_Feet_Sneakers_01_primitive0':
+          mesh.material = feetShaderMaterial
+          break
+        case 'M_Feet_Sneakers_02':
+          mesh.material = feetShaderMaterial
+          break
+
+        default:
+          // Optional: Handle cases where no match is found
+          break
       }
+      hl.innerGlow = false
+      mesh.computeBonesUsingShaders = false
     }
 
     // center the root scene into the camera
     if (config.centerBoundingBox) {
       center(scene)
     }
 
-    scene.registerBeforeRender(() => {
-      scene.meshes.forEach((mesh) => {
-        mesh.rotation.y += 0.01 // Adjust rotation speed as needed
-      })
-    })
     // return preview controller
     const controller: IPreviewController = {
       scene: sceneController,