Curtains with different image sources based on the viewport size

Hey Martin,

Do you have any examples of CurtainsJS working with different image sources depending on the viewport size? It could or could not use the <picture> element. I haven’t seen any material or demos on the subject. Looking at the texture docs I don’t see a straightforward way of doing this sort of thing but I very well could be missing something. Perhaps this sort of thing is what a texture loader could be used for? Any direction would be appreciated.

[ZachSaucier]

In my actual project I used data attributes to specify the image sources at different sizes and used a loop to keep the code more DRY:

const planeTexture = plane.createTexture({
  sampler: "planeTexture"
});

const images = {
  small: {
    src: planeEl.dataset.smallimg,
    img: null,
    minWinWidth: 992
  },
  medium: {
    src: planeEl.dataset.mediumimg,
    img: null,
    minWinWidth: 768
  },
  large: {
    src: planeEl.dataset.largeimg,
    img: null,
    minWinWidth: -1
  },
};

// set the texture source dynamically based on viewport size
const setResponsiveTexture = () => {
  // be careful it takes curtains pixelRatio into account
  const curtainsBBox = curtains.getBoundingRect();

  for(const size in images) {
    const imgInfo = images[size];

    if(curtainsBBox.width >= imgInfo.minWinWidth && plane.userData.planeTexture !== size) {
      plane.userData.planeTexture = size;
      
      if(imgInfo.img) {
        planeTexture.setSource(imgInfo.img);
      }
      else {
        const image = new Image();
        image.addEventListener('load', () => {
          imgInfo.img = image;
          planeTexture.setSource(imgInfo.img);
        });
        image.crossOrigin = "anonymous";
        image.src = imgInfo.src;
      }

      break;
    }
  }
};

setResponsiveTexture();

plane.onAfterResize(() => {
  setResponsiveTexture();
});

Thanks again for the help!

[martinlaxenaire]

My first answer may not have been clear, sorry about that. The thing is, you cannot upload a texture to the GPU if the image source itself is not already loaded (this is not a curtainsjs limitation, it’s just how WebGL works). That being said, this is up to you to load the right image and use it as your texture source whenever you want.

I’ve made this quick codepen to demonstrate how to achieve what I think you are trying to do: https://codepen.io/martinlaxenaire/pen/abmvyNG

Was this helpful?

Cheers,