Codrops 원본

Building a Scroll-Revealed WebGL Gallery with GSAP, Three.js, Astro and Barba.js

스크롤 · MIT

스크롤 더 보기

Building a Scroll-Revealed WebGL Gallery with GSAP, Three.js, Astro and Barba.js 정적 미리보기

갤러리 안에서는 화면을 벗어나거나 움직임을 멈추면 예제도 닫힙니다. 다시 재생할 때는 처음부터 시작해요.

큰 화면으로 보기

SOURCE FILES

원본 코드 읽기

24개 파일

수집한 원본 소스와 실행 안내를 함께 제공합니다.

astro.config.mjs

파일 저장

// @ts-check
import { defineConfig } from "astro/config"
import glsl from "vite-plugin-glsl"

// https://astro.build/config
export default defineConfig({
  devToolbar: {
    enabled: false,
  },
  vite: {
    plugins: [glsl()],
  },
  server: {
    host: true,
  },
})

src/app/components/canvas.ts

파일 저장

import * as THREE from "three"
import { Dimensions, Size } from "../types/types"

import Media from "./media"
import { ScrollTrigger } from "gsap/ScrollTrigger"

export default class Canvas {
  element: HTMLCanvasElement
  scene: THREE.Scene
  camera: THREE.PerspectiveCamera
  renderer: THREE.WebGLRenderer
  sizes: Size
  dimensions: Dimensions
  medias: (Media | null)[] | null

  constructor() {
    this.element = document.getElementById("webgl") as HTMLCanvasElement
    this.medias = []
    this.createScene()
    this.createCamera()
    this.createRenderer()
    this.setSizes()
  }

  createScene() {
    this.scene = new THREE.Scene()
  }

  createCamera() {
    this.camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      100,
    )
    this.scene.add(this.camera)
    this.camera.position.z = 10
  }

  createRenderer() {
    this.dimensions = {
      width: window.innerWidth,
      height: window.innerHeight,
      pixelRatio: Math.min(2, window.devicePixelRatio),
    }

    this.renderer = new THREE.WebGLRenderer({
      canvas: this.element,
      alpha: true,
    })
    this.renderer.setSize(this.dimensions.width, this.dimensions.height)
    this.renderer.render(this.scene, this.camera)

    this.renderer.setPixelRatio(this.dimensions.pixelRatio)
  }

  setSizes() {
    let fov = this.camera.fov * (Math.PI / 180)
    let height = this.camera.position.z * Math.tan(fov / 2) * 2
    let width = height * this.camera.aspect

    this.sizes = {
      width: width,
      height: height,
    }
  }

  onResize() {
    this.dimensions = {
      width: window.innerWidth,
      height: window.innerHeight,
      pixelRatio: Math.min(2, window.devicePixelRatio),
    }

    this.camera.aspect = window.innerWidth / window.innerHeight
    this.camera.updateProjectionMatrix()
    this.setSizes()

    this.renderer.setPixelRatio(this.dimensions.pixelRatio)
    this.renderer.setSize(this.dimensions.width, this.dimensions.height)

    //ScrollTrigger.refresh()
    this.medias?.forEach((media) => {
      media?.onResize(this.sizes)
    })
  }

  createMedias(activeElement?: HTMLImageElement) {
    const images = document.querySelectorAll("img")
    images.forEach((image) => {
      if (image !== activeElement) {
        const media = new Media({
          element: image,
          scene: this.scene,
          sizes: this.sizes,
        })

        this.medias?.push(media)
      }
    })

    this.medias?.forEach((media) => {
      media?.observe()
    })
  }

  render(scroll: number, updateScroll: boolean = true) {
    this.medias?.forEach((media) => {
      if (updateScroll) {
        media?.updateScroll(scroll)
      }
    })

    this.renderer.render(this.scene, this.camera)
  }
}

함께 쓰는 파일 22개 보기

src/app/components/media.ts

파일 저장

import { Position, Size } from "../types/types"
import * as THREE from "three"
import gsap from "gsap"

import vertexShader from "../shaders/vertex.glsl"
import fragmentShader from "../shaders/fragment.glsl"

interface Props {
  element: HTMLImageElement
  scene: THREE.Scene
  sizes: Size
}

export default class Media {
  element: HTMLImageElement
  anchorElement: HTMLAnchorElement | undefined
  scene: THREE.Scene
  sizes: Size
  material: THREE.ShaderMaterial
  geometry: THREE.PlaneGeometry
  mesh: THREE.Mesh
  nodeDimensions: Size
  meshDimensions: Size
  meshPostion: Position
  elementBounds: DOMRect
  currentScroll: number
  lastScroll: number
  scrollSpeed: number
  scrollTrigger: gsap.core.Tween
  onClickHandler: (e: PointerEvent) => void

  constructor({ element, scene, sizes }: Props) {
    this.element = element
    this.anchorElement = this.element.closest("a") as
      | HTMLAnchorElement
      | undefined
    this.scene = scene
    this.sizes = sizes

    this.currentScroll = 0
    this.lastScroll = 0
    this.scrollSpeed = 0

    this.createGeometry()
    this.createMaterial()
    this.createMesh()
    this.setNodeBounds()
    this.setMeshDimensions()
    this.setMeshPosition()
    this.setTexture()

    // Persist handler reference for correct removal on destroy
    this.onClickHandler = this.onClickLink.bind(this)
    this.anchorElement?.addEventListener("click", this.onClickHandler)

    this.scene.add(this.mesh)
  }

  onClickLink(e: PointerEvent) {
    ;(e.currentTarget as HTMLAnchorElement).setAttribute(
      "data-home-link-active",
      "true",
    )
  }

  createGeometry() {
    this.geometry = new THREE.PlaneGeometry(1, 1, 1, 1)
  }

  createMaterial() {
    this.material = new THREE.ShaderMaterial({
      vertexShader,
      fragmentShader,
      uniforms: {
        uTexture: new THREE.Uniform(new THREE.Vector4()),
        uResolution: new THREE.Uniform(new THREE.Vector2(0, 0)),
        uContainerRes: new THREE.Uniform(new THREE.Vector2(0, 0)),
        uProgress: new THREE.Uniform(0),
        uGridSize: new THREE.Uniform(20),
        uColor: new THREE.Uniform(new THREE.Color("#242424")),
      },
    })
  }

  createMesh() {
    this.mesh = new THREE.Mesh(this.geometry, this.material)
  }

  setNodeBounds() {
    this.elementBounds = this.element.getBoundingClientRect()

    this.nodeDimensions = {
      width: this.elementBounds.width,
      height: this.elementBounds.height,
    }
  }

  setMeshDimensions() {
    this.meshDimensions = {
      width: (this.nodeDimensions.width * this.sizes.width) / window.innerWidth,
      height:
        (this.nodeDimensions.height * this.sizes.height) / window.innerHeight,
    }

    this.mesh.scale.x = this.meshDimensions.width
    this.mesh.scale.y = this.meshDimensions.height
  }

  setMeshPosition() {
    this.meshPostion = {
      x: (this.elementBounds.left * this.sizes.width) / window.innerWidth,
      y: (-this.elementBounds.top * this.sizes.height) / window.innerHeight,
    }

    this.meshPostion.x -= this.sizes.width / 2
    this.meshPostion.x += this.meshDimensions.width / 2

    this.meshPostion.y -= this.meshDimensions.height / 2
    this.meshPostion.y += this.sizes.height / 2

    this.mesh.position.x = this.meshPostion.x
    this.mesh.position.y = this.meshPostion.y
  }

  setTexture() {
    this.material.uniforms.uTexture.value = new THREE.TextureLoader().load(
      this.element.src,
      ({ image }) => {
        const { naturalWidth, naturalHeight } = image

        this.material.uniforms.uResolution.value = new THREE.Vector2(
          naturalWidth,
          naturalHeight,
        )

        this.material.uniforms.uContainerRes.value = new THREE.Vector2(
          this.nodeDimensions.width,
          this.nodeDimensions.height,
        )
      },
    )
  }

  updateScroll(scrollY: number) {
    this.currentScroll = (-scrollY * this.sizes.height) / window.innerHeight

    const deltaScroll = this.currentScroll - this.lastScroll
    this.lastScroll = this.currentScroll

    this.updateY(deltaScroll)
  }

  updateY(deltaScroll: number) {
    this.meshPostion.y -= deltaScroll
    this.mesh.position.y = this.meshPostion.y
  }

  observe() {
    this.scrollTrigger = gsap.to(this.material.uniforms.uProgress, {
      value: 1,
      scrollTrigger: {
        trigger: this.element,
        start: "top bottom",
        end: "bottom top",
        toggleActions: "play reset restart reset",
      },
      duration: 1.6,
      ease: "linear",
    })
  }

  destroy() {
    this.scene.remove(this.mesh)
    this.scrollTrigger.scrollTrigger?.kill()
    this.scrollTrigger?.kill()
    this.anchorElement?.removeEventListener("click", this.onClickHandler)
    this.anchorElement?.removeAttribute("data-home-link-active")
    this.geometry.dispose()
    this.material.dispose()
  }

  onResize(sizes: Size) {
    this.sizes = sizes

    this.setNodeBounds()
    this.setMeshDimensions()
    this.setMeshPosition()

    this.material.uniforms.uContainerRes.value = new THREE.Vector2(
      this.nodeDimensions.width,
      this.nodeDimensions.height,
    )
  }
}

src/app/components/scroll.ts

파일 저장

import { ScrollSmoother } from "gsap/ScrollSmoother"
import { ScrollTrigger } from "gsap/ScrollTrigger"

export default class Scroll {
  scroll: number
  s: globalThis.ScrollSmoother | null

  constructor() {
    window.scrollTo(0, 0)
    this.init()
  }

  init() {
    this.scroll = 0

    // Initialize smoother with explicit content to ensure proper sync
    this.s = ScrollSmoother.create({
      smooth: 1,
      normalizeScroll: true,
      wrapper: document.getElementById("app") as HTMLElement,
      content: document.getElementById("smooth-content") as HTMLElement,
    })

    ScrollTrigger.refresh()
  }

  reset(immediate?: boolean) {
    if (immediate) this.s?.scrollTo(0, false, "top top")
    else this.s?.scrollTop(0)
  }

  destroy() {
    this.s?.kill()
    this.s = null
  }

  getScroll() {
    this.scroll = this.s?.scrollTop() || 0

    return this.scroll
  }
}

src/app/components/text-animation.ts

파일 저장

import gsap from "gsap"
import { SplitText } from "gsap/SplitText"

interface BaseAnimationProps {
  element: HTMLElement
  inDuration: number
  outDuration: number
  inDelay: number
}

interface SplitAnimationProps extends BaseAnimationProps {
  split: globalThis.SplitText
  inStagger?: number
  outStagger?: number
}

export default class TextAnimation {
  elements: HTMLElement[]
  splitAnimations: SplitAnimationProps[] = []
  fadeAnimations: BaseAnimationProps[] = []
  splitTweens: gsap.core.Tween[] = []
  fadeTweens: gsap.core.Tween[] = []
  ready: boolean = false

  constructor() {}

  init() {
    this.ready = true

    this.splitAnimations = []
    this.fadeAnimations = []

    this.elements = document.querySelectorAll(
      "[data-text-animation]",
    ) as unknown as HTMLElement[]

    this.elements.forEach((el) => {
      const inDuration = parseFloat(
        el.getAttribute("data-text-animation-in-duration") || "0.6",
      )

      const outDuration = parseFloat(
        el.getAttribute("data-text-animation-out-duration") || "0.3",
      )

      const inDelay = parseFloat(
        el.getAttribute("data-text-animation-in-delay") || "0",
      )

      // Check if this should be a split text animation
      if (el.hasAttribute("data-text-animation-split")) {
        const split = SplitText.create(el, {
          type: "lines",
          mask: "lines",
        })

        const inStagger = parseFloat(
          el.getAttribute("data-text-animation-in-stagger") || "0.06",
        )

        const outStagger = parseFloat(
          el.getAttribute("data-text-animation-out-stagger") || "0.06",
        )

        split.lines.forEach((line) => {
          gsap.set(line, { yPercent: 100 })
        })

        gsap.set(el, { autoAlpha: 1, visibility: "visible" })

        this.splitAnimations.push({
          element: el,
          split,
          inDuration,
          outDuration,
          inStagger,
          outStagger,
          inDelay,
        })
      } else {
        // Default fade animation
        gsap.set(el, { autoAlpha: 0, visibility: "hidden" })

        this.fadeAnimations.push({
          element: el,
          inDuration,
          outDuration,
          inDelay,
        })
      }
    })
  }

  animateIn({ delay = 0 } = {}) {
    // Split text animations

    this.splitAnimations.forEach(
      ({ element, split, inDuration, inStagger, inDelay }) => {
        const tweenWithScroll = gsap.to(split.lines, {
          yPercent: 0,
          stagger: inStagger,
          scrollTrigger: {
            trigger: element,
            start: "top bottom",
            end: "bottom top",
            toggleActions: "play reset restart reset",
          },
          ease: "expo",
          duration: inDuration,
          delay: inDelay + delay,
        })

        this.splitTweens.push(tweenWithScroll)
      },
    )

    // Fade animations
    this.fadeAnimations.forEach(({ element, inDuration, inDelay }) => {
      const fadeTween = gsap.to(element, {
        autoAlpha: 1,
        scrollTrigger: {
          trigger: element,
          start: "top bottom",
          end: "bottom top",
          toggleActions: "play reset restart reset",
        },
        ease: "power2.out",
        duration: inDuration,
        delay: inDelay + delay,
      })

      this.fadeTweens.push(fadeTween)
    })
    return gsap.timeline()
  }

  animateOut() {
    const tl = gsap.timeline()

    // Split animations
    this.splitAnimations.forEach(({ split, outDuration, outStagger }) => {
      tl.to(
        split.lines,
        {
          yPercent: 100,
          stagger: outStagger,
          ease: "power2.out",
          duration: outDuration,
        },
        0,
      )
    })

    // Fade animations
    this.fadeAnimations.forEach(({ element, outDuration }) => {
      tl.to(
        element,
        {
          autoAlpha: 0,
          ease: "power2.out",
          duration: outDuration,
        },
        0,
      )
    })

    return tl
  }

  onResize() {
    if (!this.ready) return

    this.destroy()
    this.init()

    this.animateIn()
  }

  destroy() {
    this.splitTweens.forEach((tween) => {
      tween.scrollTrigger?.kill()
      tween.kill()
    })

    this.fadeTweens.forEach((tween) => {
      tween.scrollTrigger?.kill()
      tween.kill()
    })

    this.splitAnimations.forEach(({ split }) => {
      split.revert()
    })

    this.splitTweens = []
    this.fadeTweens = []
  }
}

src/app/main.ts

파일 저장

import Canvas from "./components/canvas"
import Scroll from "./components/scroll"
//@ts-ignore
import barba from "@barba/core"

import { ScrollTrigger } from "gsap/ScrollTrigger"
import { ScrollSmoother } from "gsap/ScrollSmoother"
//@ts-ignore
import { Flip } from "gsap/Flip"
import gsap from "gsap"
import Media from "./components/media"
import { SplitText } from "gsap/SplitText"
import TextAnimation from "./components/text-animation"
import FontFaceObserver from "fontfaceobserver"

gsap.registerPlugin(ScrollTrigger, ScrollSmoother, Flip, SplitText)

class App {
  canvas: Canvas
  scroll: Scroll
  template: "home" | "detail"

  mediaHomeState: Flip.FlipState
  scrollBlocked: boolean = false
  scrollTop: number
  textAnimation: TextAnimation
  fontLoaded: boolean = false

  constructor() {
    if (typeof history !== "undefined" && "scrollRestoration" in history) {
      history.scrollRestoration = "manual"
    }

    this.scroll = new Scroll()
    this.canvas = new Canvas()
    this.textAnimation = new TextAnimation()
    this.loadFont(() => {
      this.textAnimation.init()
    })

    this.template = this.getCurrentTemplate()

    this.loadImages(() => {
      this.canvas.createMedias()
      if (this.fontLoaded) {
        this.textAnimation.init()
        this.textAnimation.animateIn()
      } else {
        window.addEventListener("fontLoaded", () => {
          gsap.delayedCall(0, () => {
            gsap.delayedCall(0, () => {
              this.textAnimation.init()
              this.textAnimation.animateIn({ delay: 0.3 })
            })
          })
        })
      }
    })

    let activeLinkImage: HTMLImageElement
    let scrollTop: number

    barba.init({
      prefetchIgnore: true,
      transitions: [
        {
          name: "default-transition",
          before: () => {
            this.scrollBlocked = true
            this.scroll.s?.paused(true)
          },
          leave: () => {
            const medias = this.canvas.medias && this.canvas.medias

            medias?.forEach((media) => {
              if (!media) return
              media.onResize(this.canvas.sizes)
              gsap.set(media.element, {
                visibility: "hidden",
                opacity: 0,
              })
            })

            return new Promise<void>((resolve) => {
              const tl = this.textAnimation.animateOut()

              this.canvas.medias?.forEach((media) => {
                if (!media) return
                tl.fromTo(
                  media.material.uniforms.uProgress,
                  { value: 1 },
                  {
                    duration: 1,
                    ease: "linear",
                    value: 0,
                  },
                  0,
                )
              })

              tl.call(() => {
                this.textAnimation.destroy()
                resolve()
              })
            })
          },
          beforeEnter: () => {
            this.canvas.medias?.forEach((media) => {
              media?.destroy()
              media = null
            })

            this.scrollBlocked = false

            this.scroll.reset()
            this.scroll.destroy()
          },
          after: () => {
            this.scroll.init()
            this.textAnimation.init()

            const template = this.getCurrentTemplate()
            this.setTemplate(template)

            this.loadImages(() => {
              this.canvas.medias = []
              this.canvas.createMedias()
              this.textAnimation.animateIn({ delay: 0.3 })
            })
          },
        },
        {
          name: "home-detail",
          from: {
            custom: () => {
              const activeLink = document.querySelector(
                'a[data-home-link-active="true"]',
              )
              if (!activeLink) return false

              return true
            },
          },
          before: () => {
            this.scrollBlocked = true
            this.scroll.s?.paused(true)

            const tl = this.textAnimation.animateOut()

            activeLinkImage = document.querySelector(
              'a[data-home-link-active="true"] img',
            ) as HTMLImageElement

            this.canvas.medias?.forEach((media) => {
              if (!media) return
              media.scrollTrigger.kill()

              const currentProgress = media.material.uniforms.uProgress.value
              const totalDuration = 1.2

              if (media.element !== activeLinkImage) {
                const remainingDuration = totalDuration * currentProgress

                tl.to(
                  media.material.uniforms.uProgress,
                  {
                    duration: remainingDuration,
                    value: 0,
                    ease: "linear",
                  },
                  0,
                )
              } else {
                const remainingDuration = totalDuration * (1 - currentProgress)

                tl.to(
                  media.material.uniforms.uProgress,
                  {
                    value: 1,
                    duration: remainingDuration,
                    ease: "linear",
                    onComplete: () => {
                      media.element.style.opacity = "1"
                      media.element.style.visibility = "visible"
                      gsap.set(media.material.uniforms.uProgress, { value: 0 })
                    },
                  },
                  0,
                )
              }
            })

            return new Promise<void>((resolve) => {
              tl.call(() => {
                resolve()
              })
            })
          },

          leave: () => {
            scrollTop = this.scroll.getScroll()

            const container = document.querySelector(
              ".container",
            ) as HTMLElement
            container.style.position = "fixed"
            container.style.top = `-${scrollTop}px`
            container.style.width = "100%"
            container.style.zIndex = "1000"

            this.mediaHomeState = Flip.getState(activeLinkImage)
            this.textAnimation.destroy()
          },
          beforeEnter: () => {
            this.scroll.reset()
            this.scroll.destroy()
          },
          after: () => {
            this.scroll.init()
            this.textAnimation.init()

            const detailContainer = document.querySelector(
              ".details-container",
            ) as HTMLElement

            detailContainer.innerHTML = ""
            detailContainer.append(activeLinkImage)

            const template = this.getCurrentTemplate()
            this.setTemplate(template)

            return new Promise<void>((resolve) => {
              let activeMedia: Media | null = null

              this.textAnimation.animateIn({ delay: 0.3 })

              Flip.from(this.mediaHomeState, {
                absolute: true,

                duration: 1,
                ease: "power3.inOut",

                onComplete: () => {
                  this.scrollBlocked = false
                  this.canvas.medias?.forEach((media) => {
                    if (!media) return
                    if (media.element !== activeLinkImage) {
                      media.destroy()
                      media = null
                    } else {
                      activeMedia = media
                    }
                  })

                  this.canvas.medias = [activeMedia]

                  resolve()
                },
              })
            })
          },
        },
      ],
    })

    window.addEventListener("resize", this.onResize.bind(this))

    this.render = this.render.bind(this)
    gsap.ticker.add(this.render)
  }

  getCurrentTemplate() {
    return document
      .querySelector("[data-page-template]")
      ?.getAttribute("data-page-template") as "home" | "detail"
  }

  setTemplate(template: string) {
    this.template = template as "home" | "detail"
  }

  loadImages(callback?: () => void) {
    const medias = document.querySelectorAll("img")
    let loadedImages = 0
    const totalImages = medias.length

    medias.forEach((img) => {
      if (img.complete) {
        loadedImages++
      } else {
        img.addEventListener("load", () => {
          loadedImages++
          if (loadedImages === totalImages) {
            this.onReady(callback)
          }
        })
      }
    })

    if (loadedImages === totalImages) {
      this.onReady(callback)
    }
  }

  onReady(callback?: () => void) {
    if (callback) callback()
    ScrollTrigger.refresh()
  }

  loadFont(onLoaded: () => void) {
    const satoshi = new FontFaceObserver("Satoshi")

    satoshi.load().then(() => {
      onLoaded()
      this.fontLoaded = true
      window.dispatchEvent(new Event("fontLoaded"))
    })
  }

  onResize() {
    this.textAnimation?.onResize()
    this.canvas?.onResize()
  }

  render() {
    this.scrollTop = this.scroll?.getScroll() || 0
    this.canvas?.render(this.scrollTop, !this.scrollBlocked)
  }
}

export default new App()

src/app/shaders/fragment.glsl

파일 저장

uniform sampler2D uTexture;
varying vec2 vUv;

uniform vec2 uResolution;
uniform float uProgress;
uniform vec3 uColor;

uniform vec2 uContainerRes;
uniform float uGridSize;

float random (vec2 st) {
    return fract(sin(dot(st.xy,
                         vec2(12.9898,78.233)))*
        43758.5453123);
}

vec2 squaresGrid(vec2 vUv)
{
    float imageAspectX = 1.;
    float imageAspectY = 1.;

    float containerAspectX = uResolution.x/uResolution.y;
    float containerAspectY = uResolution.y/uResolution.x;

    vec2 ratio = vec2(
        min(containerAspectX / imageAspectX, 1.0),
        min(containerAspectY / imageAspectY, 1.0)
    );

    vec2 squareUvs = vec2(
        vUv.x * ratio.x + (1.0 - ratio.x) * 0.5,
        vUv.y * ratio.y + (1.0 - ratio.y) * 0.5
    );

    return squareUvs;
}


void main()
{
            
    vec2 newUvs = vUv;            

    float imageAspectX = uResolution.x/uResolution.y;
    float imageAspectY = uResolution.y/uResolution.x;
    
    float containerAspectX = uContainerRes.x/uContainerRes.y;
    float containerAspectY = uContainerRes.y/uContainerRes.x;

    vec2 ratio = vec2(
        min(containerAspectX / imageAspectX, 1.0),
        min(containerAspectY / imageAspectY, 1.0)
    );

    vec2 coverUvs = vec2(
        vUv.x * ratio.x + (1.0 - ratio.x) * 0.5,
        vUv.y * ratio.y + (1.0 - ratio.y) * 0.5
    );


    //generate grid
    vec2 squareUvs = squaresGrid(coverUvs);
    float gridSize = floor(uContainerRes.x/20.);
    vec2 grid = vec2(floor(squareUvs.x*gridSize)/gridSize,floor(squareUvs.y*gridSize)/gridSize);
    vec4 gridTexture = vec4(uColor,0.);
    

    //image texture    
    vec4 texture = texture2D(uTexture,coverUvs);
    float height = 0.2;

    float progress = (1.+height)-(uProgress*(1.+height+height)); //goes from 1+height to -height


    float dist = 1.-distance(grid.y,progress);

    float clampedDist = smoothstep(height,0.,distance(grid.y,progress));

    float randDist=step(1.-height*random(grid),dist);
    dist=step(1.-height,dist);
    
    float rand = random(grid); 

    float alpha = dist*(clampedDist+rand-0.5*(1.-randDist));
    alpha=max(0.,alpha);
    gridTexture.a = alpha;


    texture.rgba *= step(progress,grid.y);
    
    gl_FragColor = vec4(mix(texture,gridTexture,gridTexture.a));
}

src/app/shaders/vertex.glsl

파일 저장

varying vec2 vUv;

void main()
{ 
    vUv=uv;

    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);

}

src/app/types/types.ts

파일 저장

export interface Size {
  width: number
  height: number
}

export interface Dimensions {
  width: number
  height: number
  pixelRatio: number
}

export interface Position {
  x: number
  y: number
}

src/components/arrow.astro

파일 저장