How to make diamond looks real?

Questions
,
31

this is about unpkg serving it, it’s not a drei thing. i would suggest you copy this material into your own project. then you still need the glue code drei/src/core/MeshRefractionMaterial.tsx at aa2dd0f99fcb33562eff69b57fcb51dbe1d65ff3 · pmndrs/drei · GitHub

first you set the material up, keep in mind that drei uses a shaderMaterial helper that creates auto setter/getters for uniforms. best copy drei/shaderMaterial into your project as well drei/src/core/shaderMaterial.tsx at aa2dd0f99fcb33562eff69b57fcb51dbe1d65ff3 · pmndrs/drei · GitHub.

const material = new MeshRefractionMaterial()
material.resolution = new THREE.Vector2(size.width, size.height)
material.aberrationStrength = aberrationStrength
material.envMap=envMap

the useMemo creates the defines, just copy the contents of it into your code and apply them:

    const temp = {}
    // Sampler2D and SamplerCube need different defines
    const isCubeMap = isCubeTexture(envMap)
    const w = (isCubeMap ? envMap.image[0]?.width : envMap.image.width) ?? 1024
    const cubeSize = w / 4
    const _lodMax = Math.floor(Math.log2(cubeSize))
    const _cubeSize = Math.pow(2, _lodMax)
    const width = 3 * Math.max(_cubeSize, 16 * 7)
    const height = 4 * _cubeSize
    if (isCubeMap) temp.ENVMAP_TYPE_CUBEM = ''
    temp.CUBEUV_TEXEL_WIDTH = `${1.0 / width}`
    temp.CUBEUV_TEXEL_HEIGHT = `${1.0 / height}`
    temp.CUBEUV_MAX_MIP = `${_lodMax}.0`
    // Add defines from chromatic aberration
    if (aberrationStrength > 0) temp.CHROMATIC_ABERRATIONS = ''
    if (fastChroma) temp.FAST_CHROMA = ''
    materal.defines = themp

the useLayoutEffect is about applying the geometry

      material.bvh = new MeshBVHUniformStruct()
      material.bvh.updateFrom(
        new MeshBVH(geometry.clone().toNonIndexed(), { lazyGeneration: false, strategy: SAH })
      )

then the material needs a ticker, these are uniforms as well

function yourFrameLoop() {
    material.viewMatrixInverse = camera.matrixWorld
    material.projectionMatrixInverse = camera.projectionMatrixInverse

this is the reason we haven’t included it into drei-vanilla GitHub - pmndrs/drei-vanilla: 🍦 drei-inspired helpers for threejs it’s way too complex for a simple class and without the component paradigm there would be all this extra glue code the user would have to manage.