diff --git a/packages/shadergradient-v2/src/ShaderGradient/Mesh/Mesh.tsx b/packages/shadergradient-v2/src/ShaderGradient/Mesh/Mesh.tsx index 82d94954..25dc0a10 100644 --- a/packages/shadergradient-v2/src/ShaderGradient/Mesh/Mesh.tsx +++ b/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) }} diff --git a/packages/shadergradient-v2/src/shaders/a/fragmentSphere.glsl b/packages/shadergradient-v2/src/shaders/a/fragmentSphere.glsl new file mode 100644 index 00000000..386d9ee3 --- /dev/null +++ b/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 +#include +#include +#include +#include +#include +#include +#include +#include +#include +#include +// #include +#include +#include +#include +#include +#include +#include +#include +#include +#include +#include +#include +#include +#include +#include +#include +// 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 + + 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 +#include +#include +#include +#include +#include +#include +#include +#include +#include +#include +#include +// #include +#include +#include +#include +#include +#include + 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 +#include +#include +#include +#include +} diff --git a/packages/shadergradient-v2/src/shaders/a/index.ts b/packages/shadergradient-v2/src/shaders/a/index.ts index 43d15dbc..e2088dca 100644 --- a/packages/shadergradient-v2/src/shaders/a/index.ts +++ b/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 }