Shader error after initialisation

[1337jick]

Hi! First of all, thank you for such a contribution to vanilla users :)

After basic implementation, I hope that I did it right:

       const lensGeometry = new THREE.SphereGeometry( 2, 128, 128 );

        const lensMaterial = new MeshTransmissionMaterial({
          buffer: renderTarget.texture,
          ior: 1.025,
          thickness: 0.5,
          chromaticAberration: 0.05,
          backside: true,
        })
        const lens = new THREE.Mesh(lensGeometry, lensMaterial);

I get an error:

       three.module.js?39ea:18765 THREE.WebGLProgram: Shader Error 1282 - VALIDATE_STATUS false

Program Info Log: Fragment shader is not compiled.
�

FRAGMENT

ERROR: 0:1563: '[' : syntax error
�

  1558:         vec3 distortionNormal = vec3(0.0);
  1559:         vec3 temporalOffset = vec3(time, -time, -time) * temporalDistortion;
  1560:         if (distortion > 0.0) {
  1561:           distortionNormal = distortion * vec3(snoiseFractal(vec3((pos * distortionScale + temporalOffset))), snoiseFractal(vec3(pos.zxy * distortionScale - temporalOffset)), snoiseFractal(vec3(pos.yxz * distortionScale + temporalOffset)));
  1562:         }
> 1563:         for (float i = 0.0; i < [object Object].0; i ++) {
  1564:           vec3 sampleNorm = normalize(n + roughnessFactor * roughnessFactor * 2.0 * normalize(vec3(rand() - 0.5, rand() - 0.5, rand() - 0.5)) * pow(rand(), 0.33) + distortionNormal);
  1565:           transmissionR = getIBLVolumeRefraction(
  1566:             sampleNorm, v, material.roughness, material.diffuseColor, material.specularColor, material.specularF90,
  1567:             pos, modelMatrix, viewMatrix, projectionMatrix, material.ior, material.thickness  + thickness_smear * (i + randomCoords) / float([object Object]),
  1568:             material.attenuationColor, material.attenuationDistance
  1569:           ).r;

I tried to solve this in the source code by changing all ${sample} to "6" but it did nothing, basically no error but mesh became black

[vis-prime]

Hello ,Regarding MTM and most of the other components , there's more code needed after importing it from drei-vanilla
The examples showing how to do so are in the process of being set up.

Meanwhile if you're still interested
Here's the code on how to use it
https://github.com/vis-prime/explore-vanilla-drei/blob/main/demos/MeshTransmissionMaterialDemo1.js
and
demo https://vis-prime.github.io/explore-vanilla-drei/?scene=MeshTransmissionMaterial1

[CodyJasonBennett]

If this wasn't answered in Discord (see discussion on https://discord.gg/poimandres), the material's implementation doesn't actually accept material parameters, only arbitrary arguments. That's not intended, but is why you're getting the above error.

drei-vanilla/src/materials/MeshTransmissionMaterial.ts

Lines 31 to 34 in 209f4bc

	constructor(samples = 6, transmissionSampler = false) {
	super()

You can do this in the meantime:

const sphereMaterial = Object.assign(new MeshTransmissionMaterial(), {
  _transmission: 1,
  thickness: 0,
  roughness: 0,
  chromaticAberration: 0.03,
  anisotropy: 0.1,
  distortion: 0,
  distortionScale: 0.5,
  temporalDistortion: 0.0,
})

cc @drcmda, was this just a typo?