Изменение падения Френеля на шейдере ThreeJS

#three.js #shader #fragment-shader #vertex-shader

Вопрос:

Я использовал этот шейдер в своем проекте ThreeJS, за исключением того, что я более или менее скопировал код дословно, потому что я понятия не имею, как написать функцию шейдера. В принципе, я хочу отредактировать скорость падения эффекта Френеля, чтобы на самом деле только края использовали цвет с небольшим свечением внутри

 var material = THREE.extendMaterial(THREE.MeshStandardMaterial, {
      // Will be prepended to vertex and fragment code

      header: 'varying vec3 vNN; varying vec3 vEye;',
      fragmentHeader: 'uniform vec3 fresnelColor;',

      // Insert code lines by hinting at a existing
      vertex: {
        // Inserts the line after #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);`
      },
      fragment: {
        'gl_FragColor = vec4( outgoingLight, diffuseColor.a );' : 
        `gl_FragColor.rgb  =  ( 1.0 - -min(dot(vEye, normalize(vNN) ), 0.0) ) * fresnelColor;`
      },
      // Uniforms (will be applied to existing or added)
      uniforms: {
        diffuse: new THREE.Color( 'black' ),
        fresnelColor: new THREE.Color( 'blue' )
      }
    });
 

Я попытался изменить число в этой строке gl_FragColor.rgb = ( **1.0** - -min(dot(vEye, normalize(vNN) ), 0.0) ) * fresnelColor; , и хотя это остановило градиент Френеля, это была жесткая остановка, как будто это ограничивало уровни, а не скорость градиента.

Мне просто нужна помощь в том, как я могу сделать так, чтобы падение не заходило так далеко в мои модели, чтобы оно было только по краям

Ответ №1:

Может быть, это поможет:

       fragment: {
        'gl_FragColor = vec4( outgoingLight, diffuseColor.a );' : `

float m = ( 1.0 - -min(dot(vEye, normalize(vNN)), 0.0) );
m = pow(m, 8.); // the greater the second parameter, the thinner effect you get
gl_FragColor.rgb  =  m * fresnelColor;

`
 

Комментарии:

1. Потрясающе! Огромное спасибо.

2. Всегда пожалуйста 🙂