Use a GLSL shader as background

[marluscw]

Hello there,

I'm working on a shader for using as a background of a scene.

Just found two threads about this technique, which consists in disabling auto clear and having two cameras / two scenes

https://stackoverflow.com/questions/56636971/fixed-position-shader-background-in-three-js
https://discourse.threejs.org/t/how-do-i-use-my-own-custom-shader-as-a-scene-background/13598/8

So, in order to do that in R3F, need to configure the custom renderer with UseFrame? Is there an alternative way to do that?

Thanks in advance!

[drcmda]

what do you mean when you say alternative? memoized calc goes into usememo, effects into useeffect, state into usestate, renderloop into useframe. when you unfiddle vanilla code you just need to place it into these categories to form a self contained component in the end.

[marluscw]

Thanks, @drcmda!

The issue with the shader I solved adding a very large plane with shader material in the back of the scene, no need to create two scenes.

Still learning how to use the hooks.

I had a scene with some planes, the same sprite map but different uvs for each plane.

<group position={[0,0,0]} ref={screen1Ref}>
  <group position={[0,1.8,.6]} >
    <SmartPhoneInterface size={[2,1]} uv={[0,0.75]} uv2={[.5,0.25]} scale={[2,2,2]} />
  </group>
  <group position={[0,0.2,.4]}>
    <SmartPhoneInterface size={[2,2]} uv={[0,0.25]} uv2={[.5,0.5]} scale={[2,2,2]} />
  </group>
  <group position={[0,-1.5,.6]}>
    <SmartPhoneInterface size={[2,1]} uv={[0,0]} uv2={[.5,0.25]} scale={[2,2,2]} />
  </group>
</group>

I was having a performance issue cloning the texture. Discovered that I can change uv in the geometry attributes (used useMemo). And for changing texture.premultiplyAlpha, I've used the hook useEffect

import * as THREE from 'three'
import { useTexture } from "@react-three/drei"
import { useEffect, useMemo } from 'react'

export default function SmartPhoneInterface(props) {
  
  const {size,uv,uv2} = props

  const texture = useTexture('/assets/swap-spritesheet.png')

  // create geometry with correct UV
  const geom = useMemo(()=>{
    const geom = new THREE.PlaneBufferGeometry(size[0],size[1])
    const uvatt = geom.attributes.uv
    uvatt.setXY(2,uv[0],uv[1])
    uvatt.setXY(3,uv[0]+uv2[0],uv[1])
    uvatt.setXY(0,uv[0],uv[1]+uv2[1])
    uvatt.setXY(1,uv[0]+uv2[0],uv[1]+uv2[1])
    return geom
  },[])
  
  // update texture after load
  useEffect(() => {
    texture.premultiplyAlpha = true
    texture.needsUpdate = true
  }, [texture])

  return (
    <mesh {...props} geometry={geom} >
      <meshStandardMaterial
        attach="material"
        map={texture}
        transparent={true}
        flatShading={true}
        opacity={.4}
        alphaTest={.1}
      />
    </mesh>
  )
}

Didn't understand why premultiplyAlpha could not be set as an argument, it only works after the texture is loaded...

Anyway, I'm in love with R3F, incredible way to use Three.js!