Open krumpyzoid opened 2 years ago
I see people accessing THREE.FresnelShader in this post https://discourse.threejs.org/t/material-with-emissionmap-and-fresnel-shader/6223 , but I can't find official three.js doc about it
Is there a way to directly use this somehow ?
You should create your own material component :
import { Color } from 'three'
import { StandardMaterial } from 'troisjs'
export default {
extends: StandardMaterial,
created() {
this.material.onBeforeCompile = (shader) => {
shader.uniforms.fresnelColor = { value: new Color(0x0000ff) }
shader.vertexShader = `
varying vec3 vNN;
varying vec3 vEye;
` + shader.vertexShader
shader.vertexShader = shader.vertexShader.replace(
'#include <fog_vertex>',
`
#include <fog_vertex>
mat4 LM = modelMatrix;
LM[2][3] = 0.0;
LM[3][0] = 0.0;
LM[3][1] = 0.0;
LM[3][2] = 0.0;
vec4 GN = LM * vec4(objectNormal.xyz, 1.0);
vNN = normalize(GN.xyz);
vEye = normalize(GN.xyz-cameraPosition);
`
)
shader.fragmentShader = `
uniform vec3 fresnelColor;
varying vec3 vNN;
varying vec3 vEye;
` + shader.fragmentShader
shader.fragmentShader = shader.fragmentShader.replace(
'#include <output_fragment>',
`
#include <output_fragment>
gl_FragColor.rgb += ( 1.0 - -min(dot(vEye, normalize(vNN) ), 0.0) ) * fresnelColor;
`
)
}
}
}
I'm trying to add fresnel shader to my mesh
I did not write the shader myself, I tried turning it into a string as it's what is required. The original uniforms were declared using new THREE.color('black') but I do not have access to the THREE functions it seems
Error:
The original setup I copied was using objects so it would return "string.replace is not a function"
Any idea how to do this ? Or a simpler way of adding fresnel ?
Original code