Skip to content

Commit

Permalink
added sample textures
Browse files Browse the repository at this point in the history
  • Loading branch information
@mayankdigii
mayankdigii committed Dec 3, 2024
1 parent dc694ed commit a311928
Show file tree
Hide file tree
Showing 5 changed files with 87 additions and 54 deletions.
Binary file added public/feet.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/grey.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/pink.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 25 additions & 0 deletions src/lib/babylon/explorer-alpha-shader/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,31 @@ import { customVertexShader } from './vertex'

export function createShader(scene: Scene, shaderId: string) {
Effect.ShadersStore['customVertexShader'] = customVertexShader
// Effect.ShadersStore['customFragmentShader'] = `precision highp float;

// uniform sampler2D sampler_MainTex; // Albedo texture (Main texture)
// uniform sampler2D sampler_NormalMap; // Normal map texture
// uniform sampler2D sampler_Emissive_Tex; // Emissive texture
// uniform float alpha; // Alpha (transparency) value

// varying vec2 vUV;

// void main() {
// // Sample the textures
// vec4 albedoColor = texture2D(sampler_MainTex, vUV); // Sample the albedo (main) texture
// vec4 normalColor = texture2D(sampler_NormalMap, vUV); // Normal map texture (not used for color directly)
// vec4 emissiveColor = texture2D(sampler_Emissive_Tex, vUV); // Emissive texture

// // Combine the colors: base color from albedo with emissive highlights
// vec4 finalColor = albedoColor + emissiveColor * 0.3; // Add emissive highlights to albedo

// // Set the alpha channel for transparency
// finalColor.a = 0.99; // Apply alpha transparency

// // Output the final color (with transparency)
// gl_FragColor = finalColor;
// }
// `
Effect.ShadersStore['customFragmentShader'] = customFragmentShader
return new ShaderMaterial(
shaderId,
Expand Down
116 changes: 62 additions & 54 deletions src/lib/babylon/render.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,52 +32,39 @@ export async function render(canvas: HTMLCanvasElement, config: PreviewConfig):

const hl = new HighlightLayer('hl1', scene)


// working on the texture
// working on the texture

const mainTex = new DynamicTexture('mainTex', { width: 512, height: 512 }, scene)
const mainCtx = mainTex.getContext()

const mainTex2 = new DynamicTexture('mainTex', { width: 512, height: 512 }, scene)
const mainCtx2 = mainTex2.getContext()

mainCtx.fillStyle = '#8B4513'
mainCtx.fillRect(0, 0, 512, 512)
mainCtx.fillStyle = '#8B4513'
mainCtx.fillRect(0, 0, 512, 512)
mainTex.update()

mainCtx2.fillStyle = '#FFC0CB'
mainCtx2.fillStyle = '#00FF00' // Green color
mainCtx2.fillRect(0, 0, 512, 512)
mainTex2.update()

const normalMap = new DynamicTexture('normalMap', { width: 512, height: 512 }, scene)
const normalCtx = normalMap.getContext()

normalCtx.fillStyle = '#0000FF'
// Normal map remains blue
normalCtx.fillStyle = '#FFC0CB' // Blue color for the normal map
normalCtx.fillRect(0, 0, 512, 512)
normalMap.update()

const emissiveTex = new DynamicTexture('emissiveTex', { width: 512, height: 512 }, scene)
const emissiveCtx = emissiveTex.getContext()

emissiveCtx.fillStyle = '#00FF00'
// Emissive texture with white color
emissiveCtx.fillStyle = '#000000' // White color
emissiveCtx.fillRect(0, 0, 512, 512)
emissiveTex.update()

// lower
lowerBodyShaderMaterial.setTexture('sampler_MainTex', mainTex)
lowerBodyShaderMaterial.setTexture('sampler_NormalMap', normalMap)
lowerBodyShaderMaterial.setTexture('sampler_Emissive_Tex', emissiveTex)

// upper
upperBodyShaderMaterial.setTexture('sampler_MainTex', mainTex2)
upperBodyShaderMaterial.setTexture('sampler_NormalMap', normalMap)
upperBodyShaderMaterial.setTexture('sampler_Emissive_Tex', emissiveTex)

// feat

feetShaderMaterial.setTexture('sampler_MainTex', mainTex2)
feetShaderMaterial.setTexture('sampler_NormalMap', normalMap)
feetShaderMaterial.setTexture('sampler_Emissive_Tex', emissiveTex)

const albedoTexture = new Texture('pink.jpg', scene)

try {
// setup the mappings for all the contents
Expand All @@ -97,6 +84,16 @@ export async function render(canvas: HTMLCanvasElement, config: PreviewConfig):
const wearables = Array.from(slots.values())

for (const wearable of wearables.filter(isModel)) {
// if (
// wearable?.data?.category !== 'upper_body' &&
// wearable?.data?.category !== 'lower_body' &&
// wearable?.data?.category !== 'hair'
// ) {
// const promise = loadWearable(scene, wearable, config.bodyShape, config.skin, config.hair).catch((error) => {
// console.warn(error.message)
// })
// avatarPromises?.push(promise)
// }
const promise = loadWearable(scene, wearable, config.bodyShape, config.skin, config.hair).catch((error) => {
console.warn(error.message)
})
Expand All @@ -105,6 +102,8 @@ export async function render(canvas: HTMLCanvasElement, config: PreviewConfig):

const assets = (await Promise.all(avatarPromises)).filter(isSuccesful)

console.log('assets', assets)

const mainTexture = new Texture('logo.png', scene)

// add all assets to scene and create shaderMaterial based on bodyPart
Expand All @@ -127,15 +126,21 @@ export async function render(canvas: HTMLCanvasElement, config: PreviewConfig):
break

case 'upper_body':
// upperBodyShaderMaterial.setTexture('sampler_MainTex', mainTexture)
upperBodyShaderMaterial.setTexture('sampler_MainTex', mainTex2)
upperBodyShaderMaterial.setTexture('sampler_NormalMap', normalMap)
upperBodyShaderMaterial.setTexture('sampler_Emissive_Tex', emissiveTex)
break

case 'lower_body':
// lowerBodyShaderMaterial.setTexture('sampler_MainTex', mainTexture)
lowerBodyShaderMaterial.setTexture('sampler_MainTex', mainTex)
lowerBodyShaderMaterial.setTexture('sampler_NormalMap', normalMap)
lowerBodyShaderMaterial.setTexture('sampler_Emissive_Tex', emissiveTex)
break

case 'feet':
// feetShaderMaterial.setTexture('sampler_MainTex', mainTexture)
feetShaderMaterial.setTexture('sampler_MainTex', albedoTexture)
feetShaderMaterial.setTexture('sampler_NormalMap', normalMap)
feetShaderMaterial.setTexture('sampler_Emissive_Tex', emissiveTex)
break

default:
Expand Down Expand Up @@ -192,7 +197,7 @@ export async function render(canvas: HTMLCanvasElement, config: PreviewConfig):
]

// options could be new-avatar, outline, both, old
const renderMode: any = 'old'
const renderMode: any = 'new-avatar'

engine.runRenderLoop(() => {
switch (renderMode) {
Expand All @@ -209,33 +214,36 @@ export async function render(canvas: HTMLCanvasElement, config: PreviewConfig):
break
case 'new-avatar':
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
}
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
// case 'ShapeB_Head_BaseMesh':
// mesh.material = upperBodyShaderMaterial
// break;

default:
// Optional: Handle cases where no match is found
break
}
hl.innerGlow = false
mesh.computeBonesUsingShaders = false
}
Expand Down

0 comments on commit a311928

Please sign in to comment.