diff --git a/src/assets/models/scene_3/baked_texture.jpg b/src/assets/models/scene_3/baked_texture.jpg index 5a183dd..5452388 100644 Binary files a/src/assets/models/scene_3/baked_texture.jpg and b/src/assets/models/scene_3/baked_texture.jpg differ diff --git a/src/assets/textures/phone_icons.png b/src/assets/textures/phone_icons.png new file mode 100644 index 0000000..01d5199 Binary files /dev/null and b/src/assets/textures/phone_icons.png differ diff --git a/src/experiences/home/loader.ts b/src/experiences/home/loader.ts index 7a26fe6..43e3c56 100644 --- a/src/experiences/home/loader.ts +++ b/src/experiences/home/loader.ts @@ -32,6 +32,7 @@ import scene_container_model from "~/assets/models/scene_container/model.glb?url import scene_container_baked_texture from "~/assets/models/scene_container/baked_texture.jpg?url"; import cloudAlphaMapTexture from "~/assets/textures/cloudAlphaMap.jpg?url"; import rocksAlphaMapTexture from "~/assets/textures/rocksAlphaMap.jpg?url"; +import phoneScreenshotTexture from "~/assets/textures/phone_icons.png?url"; export class Loader extends ExperienceBasedBlueprint { protected readonly _experience = new HomeExperience(); @@ -125,6 +126,11 @@ export class Loader extends ExperienceBasedBlueprint { type: "texture", path: rocksAlphaMapTexture, }, + { + name: "phoneScreenshot", + type: "texture", + path: phoneScreenshotTexture, + }, ]); } diff --git a/src/experiences/home/world/scene-3.component.ts b/src/experiences/home/world/scene-3.component.ts index 657d934..73deecc 100644 --- a/src/experiences/home/world/scene-3.component.ts +++ b/src/experiences/home/world/scene-3.component.ts @@ -148,6 +148,7 @@ export class Scene3Component extends SceneComponentBlueprint { uniforms: { uTime: { value: 0 }, uTimestamp: { value: 0 }, + uIcons: { value: AVAILABLE_TEXTURE.phoneScreenshot }, }, fragmentShader: phoneScreenFragment, vertexShader: phoneScreenVertex, diff --git a/src/experiences/home/world/shaders/scene-3/phone-screen/fragment.glsl b/src/experiences/home/world/shaders/scene-3/phone-screen/fragment.glsl index 47a94ed..12c4262 100644 --- a/src/experiences/home/world/shaders/scene-3/phone-screen/fragment.glsl +++ b/src/experiences/home/world/shaders/scene-3/phone-screen/fragment.glsl @@ -9,8 +9,10 @@ */ varying vec2 vUv; + uniform float uTime; uniform float uTimestamp; +uniform sampler2D uIcons; #pragma glslify: clockNumber = require(../../partials/clockNumber.glsl) #pragma glslify: clockDots = require(../../partials/clockDots.glsl) @@ -34,12 +36,20 @@ float grid(vec2 uv, float battery) { return clamp(lines.x + lines.y, 0.0, 3.0); } -void mainImage(out vec4 fragColor, in vec2 fragCoord) { - vec2 uv = vUv * -1.5; - uv.x += .35; - uv.y += .7; +vec3 icons(vec2 uv, vec3 maincolor) { + vec3 iconsColor = texture2D(uIcons, uv).rgb; + iconsColor = iconsColor + maincolor; + + return iconsColor; +} +void mainImage(out vec4 fragColor) { + vec2 uv = vUv * -1.75; + uv.x += .42; + uv.y += .8; + vec3 finalColor; float battery = .8; + // TODO: connect the mouse position. // if(iMouse.x > 1.0 && iMouse.y > 1.0) // battery = iMouse.y / iResolution.y; @@ -70,9 +80,9 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) { } else fragColor = vec4(0.0); - uv = vUv * -24.; - uv.y += 24. / 2.; - uv.x += 24. / 2.75; + uv = vUv * -26.; + uv.y += 26. / 2.; + uv.x += 26. / 2.75; float seg = .0; float timeSecs = uTimestamp; @@ -96,19 +106,23 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) { seg *= .8 + .2 * smoothstep(0.02, .04, mod(uv.y + uv.x, .06025)); } - vec3 finalColor; - if(seg < .0) seg = -seg; finalColor = vec3(seg, seg, seg); finalColor += smoothstep(0.8, 0.9, 1. - seg) * fragColor.xyz; + uv = vUv; + uv.x = vUv.x * 2.15; + vec3 finalColorIcons = icons(uv, finalColor); + finalColor = finalColorIcons; + fragColor = vec4(finalColor, 1.); } void main() { vec4 fragment_color; - mainImage(fragment_color, gl_FragColor.xy); + mainImage(fragment_color); + gl_FragColor = fragment_color; }