fragmentSphere

Author: ruucm

packages/shadergradient-v2/src/ShaderGradient/Mesh/Mesh.tsx

@@ -1,7 +1,12 @@
 import { Geometry } from './Geometry'
 import { MeshT } from '@/types'
 import { Materials } from './Materials'
-import { vertexShader, fragmentShader, vertexSphere } from '@/shaders/a'
+import {
+  vertexShader,
+  fragmentShader,
+  vertexSphere,
+  fragmentSphere,
+} from '@/shaders/a'
 // import { vertexShader, fragmentShader } from '@/shaders/base'
 import { dToRArr } from '@/utils'
 
@@ -49,7 +54,7 @@ export function Mesh({
           uIntensity: 0.5,
         }}
         vertexShader={type === 'sphere' ? vertexSphere : vertexShader}
-        fragmentShader={fragmentShader}
+        fragmentShader={type === 'sphere' ? fragmentSphere : fragmentShader}
         onInit={(material) => {
           console.log('material (onInit)', material)
         }}

packages/shadergradient-v2/src/shaders/a/fragmentSphere.glsl

@@ -0,0 +1,153 @@
+
+#define STANDARD
+#ifdef PHYSICAL
+#define REFLECTIVITY
+#define CLEARCOAT
+#define TRANSMISSION
+#endif
+uniform vec3 diffuse;
+uniform vec3 emissive;
+uniform float roughness;
+uniform float metalness;
+uniform float opacity;
+#ifdef TRANSMISSION
+uniform float transmission;
+#endif
+#ifdef REFLECTIVITY
+uniform float reflectivity;
+#endif
+#ifdef CLEARCOAT
+uniform float clearcoat;
+uniform float clearcoatRoughness;
+#endif
+#ifdef USE_SHEEN
+uniform vec3 sheen;
+#endif
+varying vec3 vViewPosition;
+#ifndef FLAT_SHADED
+#ifdef USE_TANGENT
+varying vec3 vTangent;
+varying vec3 vBitangent;
+#endif
+#endif
+#include <alphamap_pars_fragment>
+#include <aomap_pars_fragment>
+#include <color_pars_fragment>
+#include <common>
+#include <dithering_pars_fragment>
+#include <emissivemap_pars_fragment>
+#include <lightmap_pars_fragment>
+#include <map_pars_fragment>
+#include <packing>
+#include <uv2_pars_fragment>
+#include <uv_pars_fragment>
+// #include <transmissionmap_pars_fragment>
+#include <bsdfs>
+#include <bumpmap_pars_fragment>
+#include <clearcoat_pars_fragment>
+#include <clipping_planes_pars_fragment>
+#include <cube_uv_reflection_fragment>
+#include <envmap_common_pars_fragment>
+#include <envmap_physical_pars_fragment>
+#include <fog_pars_fragment>
+#include <lights_pars_begin>
+#include <lights_physical_pars_fragment>
+#include <logdepthbuf_pars_fragment>
+#include <metalnessmap_pars_fragment>
+#include <normalmap_pars_fragment>
+#include <roughnessmap_pars_fragment>
+#include <shadowmap_pars_fragment>
+// include를 통해 가져온 값은 대부분 환경, 빛 등을 계산하기 위해서 기본 fragment
+// shader의 값들을 받아왔습니다. 일단은 무시하셔도 됩니다.
+varying vec3 vNormal;
+varying float displacement;
+varying vec3 vPos;
+varying float vDistort;
+uniform float uC1r;
+uniform float uC1g;
+uniform float uC1b;
+uniform float uC2r;
+uniform float uC2g;
+uniform float uC2b;
+uniform float uC3r;
+uniform float uC3g;
+uniform float uC3b;
+varying vec3 color1;
+varying vec3 color2;
+varying vec3 color3;
+varying float distanceToCenter;
+
+
+// for npm package, need to add this manually
+// 'linearToRelativeLuminance' : function already has a body
+float linearToRelativeLuminance2( const in vec3 color ) {
+    vec3 weights = vec3( 0.2126, 0.7152, 0.0722 );
+    return dot( weights, color.rgb );
+}
+
+void main() {
+  //-------- basic gradient ------------
+  vec3 color1 = vec3(uC1r, uC1g, uC1b);
+  vec3 color2 = vec3(uC2r, uC2g, uC2b);
+  vec3 color3 = vec3(uC3r, uC3g, uC3b);
+  float clearcoat = 1.0;
+  float clearcoatRoughness = 0.5;
+#include <clipping_planes_fragment>
+
+  float distanceToCenter = distance(vPos, vec3(0, 0, 0));
+  // distanceToCenter로 중심점과의 거리를 구함.
+
+  vec4 diffuseColor =
+      vec4(mix(color3, mix(color2, color1, smoothstep(-1.0, 1.0, vPos.y)),
+               distanceToCenter),
+           1);
+
+  //-------- materiality ------------
+  ReflectedLight reflectedLight =
+      ReflectedLight(vec3(0.0), vec3(0.0), vec3(0.0), vec3(0.0));
+  vec3 totalEmissiveRadiance = emissive;
+#ifdef TRANSMISSION
+  float totalTransmission = transmission;
+#endif
+#include <logdepthbuf_fragment>
+#include <map_fragment>
+#include <color_fragment>
+#include <alphamap_fragment>
+#include <alphatest_fragment>
+#include <roughnessmap_fragment>
+#include <metalnessmap_fragment>
+#include <normal_fragment_begin>
+#include <normal_fragment_maps>
+#include <clearcoat_normal_fragment_begin>
+#include <clearcoat_normal_fragment_maps>
+#include <emissivemap_fragment>
+// #include <transmissionmap_fragment>
+#include <lights_physical_fragment>
+#include <lights_fragment_begin>
+#include <lights_fragment_maps>
+#include <lights_fragment_end>
+#include <aomap_fragment>
+  vec3 outgoingLight =
+      reflectedLight.directDiffuse + reflectedLight.indirectDiffuse +
+      reflectedLight.directSpecular + reflectedLight.indirectSpecular;
+//위에서 정의한 diffuseColor에 환경이나 반사값들을 반영한 값.
+#ifdef TRANSMISSION
+  diffuseColor.a *=
+      mix(saturate(1. - totalTransmission +
+                   linearToRelativeLuminance2(reflectedLight.directSpecular +
+                                             reflectedLight.indirectSpecular)),
+          1.0, metalness);
+#endif
+  gl_FragColor = vec4(outgoingLight, diffuseColor.a);
+  // gl_FragColor가 fragment shader를 통해 나타나는 최종값으로, diffuseColor에서
+  // 정의한 그라디언트 색상 위에 반사나 빛을 계산한 값을 최종값으로 정의.
+  // gl_FragColor = vec4(mix(mix(color1, color3, smoothstep(-3.0, 3.0,vPos.x)),
+  // color2, vNormal.z), 1.0); 위처럼 최종값을 그라디언트 값 자체를 넣으면 환경
+  // 영향없는 그라디언트만 표현됨.
+
+#include <tonemapping_fragment>
+#include <encodings_fragment>
+#include <fog_fragment>
+#include <premultiplied_alpha_fragment>
+#include <dithering_fragment>
+}

packages/shadergradient-v2/src/shaders/a/index.ts

@@ -2,5 +2,6 @@ import vertexShader from './vertex.glsl'
 import fragmentShader from './fragment.glsl'
 
 import vertexSphere from './vertexSphere.glsl'
+import fragmentSphere from './fragmentSphere.glsl'
 
-export { vertexShader, fragmentShader, vertexSphere }
+export { vertexShader, fragmentShader, vertexSphere, fragmentSphere }