@mirage-engine/painter 0.4.0 → 1.0.0

package/src/BoxGenerator.ts

@@ -1,236 +0,0 @@
-import * as THREE from "three";
-import { BoxStyles, ShaderHooks } from "./types";
-// [for dev]
-// import { glassHooks } from "./dev/devShader";
-
-function parsePixelValue(value: string | number): number {
-  if (typeof value === "number") return value;
-  return parseFloat(value) || 0;
-}
-
-function setBorderRadius(target: THREE.Vector4, radius: string) {
-  if (!radius) {
-    target.set(0, 0, 0, 0);
-    return;
-  }
-  const arr = radius.split("/")[0].trim().split(/\s+/);
-  const tl = parsePixelValue(arr[0]);
-  const tr = parsePixelValue(arr[1] ?? arr[0]);
-  const br = parsePixelValue(arr[2] ?? arr[0]);
-  const bl = parsePixelValue(arr[3] ?? arr[1] ?? arr[0]);
-
-  target.set(tl, tr, br, bl);
-}
-
-const vertexShader = /* glsl */ `
-  varying vec2 vUv;
-  varying vec4 vScreenPos;
-  void main() {
-    vUv = uv;
-    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-    vScreenPos = gl_Position;
-  }
-`;
-
-const fragmentShaderTemplate = /* glsl */ `
-
-  varying vec2 vUv;
-  
-  uniform vec2 uSize;
-  uniform vec4 uBorderRadius;
-  uniform float uBorderWidth;
-  uniform vec3 uBgColor;
-  uniform vec3 uBorderColor;
-  uniform float uOpacity;
-  uniform float uBgOpacity;
-  uniform float uBorderOpacity;
-
-  #INJECT_DECLARATIONS
-
-  float sdRoundedBox(vec2 p, vec2 b, float r) {
-    vec2 q = abs(p) - b + r;
-
-    return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
-  }
-
-  void main() {
-    vec2 p = (vUv - 0.5) * uSize;
-    vec2 halfSize = uSize * 0.5;
-
-    #INJECT_UV_MODIFIER
-    
-    // color decision pipeline
-    vec4 baseColor = vec4(uBgColor, uBgOpacity);
-
-    #INJECT_BASE_COLOR
-
-    // sdf shape pipeline
-    vec2 xRadii = mix(uBorderRadius.xw, uBorderRadius.yz, step(0.0, p.x));
-    float r = mix(xRadii.y, xRadii.x, step(0.0, p.y));
-    float d = sdRoundedBox(p, halfSize, r);
-
-    float aa = 1.0; 
-    float bgMask = 1.0 - smoothstep(0.0, aa, d);
-
-    float halfBorder = uBorderWidth * 0.5;
-    float borderD = abs(d + halfBorder) - halfBorder;
-    float borderAlpha = (1.0 - smoothstep(0.0, aa, borderD)) * uBorderOpacity; 
-    if (uBorderWidth <= 0.01) {
-      borderAlpha = 0.0;
-    }
-
-    // final blending (border + background)
-    float aFront = borderAlpha;
-    float aBack = baseColor.a;
-    float aOut = aFront + aBack * (1.0 - aFront);
-
-    float safeAlpha = max(aOut, 0.0001);
-    vec3 cOut = (uBorderColor * aFront + baseColor.rgb * aBack * (1.0 - aFront)) / safeAlpha;
-    vec4 finalColor = vec4(cOut, aOut);
-
-    // final color control (Tint, Noise)
-    #INJECT_COLOR_MODIFIER
-
-    float finalOpacity = finalColor.a * bgMask * uOpacity;
-    if (finalOpacity < 0.001) discard;
-
-    gl_FragColor = vec4(finalColor.rgb, finalOpacity);
-
-    #include <colorspace_fragment>
-  }
-`;
-
-function parseColor(colorStr: string) {
-  if (!colorStr || colorStr === "transparent") {
-    return { color: new THREE.Color(0xffffff), alpha: 0.0 };
-  }
-
-  const rgbaMatch = colorStr.match(
-    /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/,
-  );
-
-  if (rgbaMatch) {
-    const r = parseInt(rgbaMatch[1], 10);
-    const g = parseInt(rgbaMatch[2], 10);
-    const b = parseInt(rgbaMatch[3], 10);
-    const a = rgbaMatch[4] !== undefined ? parseFloat(rgbaMatch[4]) : 1.0;
-    return { color: new THREE.Color(`rgb(${r}, ${g}, ${b})`), alpha: a };
-  }
-  return { color: new THREE.Color(colorStr), alpha: 1.0 };
-}
-
-export function createBoxMaterial(
-  styles: BoxStyles,
-  width: number,
-  height: number,
-  texture: THREE.Texture | null = null,
-  hooks?: ShaderHooks,
-): THREE.ShaderMaterial {
-  const hasTexture = texture !== null;
-  // [for dev]
-  // const activeHooks = hasTexture ? glassHooks : hooks;
-
-  const declChunk = hasTexture
-    ? /* glsl */ `
-    uniform sampler2D uTexture;
-    varying vec4 vScreenPos;
-  `
-    : "";
-
-  // [un dev]
-  const uvChunk = hasTexture
-    ? /* glsl */ `
-    vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
-    vec2 resultUv = screenUv;
-    ${hooks?.uvModifier || ""}
-  `
-    : "";
-
-
-  // [for dev]
-  // const uvChunk = hasTexture
-  //   ? /* glsl */ `
-  //   vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
-  //   vec2 resultUv = screenUv;
-  //   ${activeHooks?.uvModifier || ""}
-  // `
-  //   : "";
-
-  const baseColorChunk = hasTexture
-    ? /* glsl */ `
-    baseColor = texture2D(uTexture, resultUv);
-  `
-    : "";
-
-  // [un dev]
-  const colorModChunk = hooks?.colorModifier || "";
-
-  // [for dev]
-  // const colorModChunk = hasTexture
-  //   ? activeHooks?.colorModifier || ""
-  //   : hooks?.colorModifier || "";
-
-  const fragmentShader = fragmentShaderTemplate
-    .replace("#INJECT_DECLARATIONS", declChunk)
-    .replace("#INJECT_UV_MODIFIER", uvChunk)
-    .replace("#INJECT_BASE_COLOR", baseColorChunk)
-    .replace("#INJECT_COLOR_MODIFIER", colorModChunk);
-
-  // uniform setting
-  const parsedBg = parseColor(styles.backgroundColor);
-  const parsedBorder = parseColor(styles.borderColor);
-  const uniforms = {
-    uSize: { value: new THREE.Vector2(width, height) },
-    uBorderRadius: { value: new THREE.Vector4(0, 0, 0, 0) },
-    uBorderWidth: { value: parsePixelValue(styles.borderWidth) },
-    uBgColor: { value: parsedBg.color },
-    uBorderColor: { value: parsedBorder.color },
-    uOpacity: { value: styles.opacity ?? 1.0 },
-    uBgOpacity: { value: parsedBg.alpha },
-    uBorderOpacity: { value: parsedBorder.alpha },
-    uTexture: { value: null as THREE.Texture | null },
-  };
-  // border radius value initialize
-  setBorderRadius(uniforms.uBorderRadius.value, styles.borderRadius);
-
-  if (hasTexture) {
-    uniforms.uTexture.value = texture;
-  }
-
-  const material = new THREE.ShaderMaterial({
-    uniforms: uniforms,
-    vertexShader: vertexShader,
-    fragmentShader: fragmentShader,
-    transparent: true,
-    side: THREE.FrontSide, // for better performance
-  });
-
-  return material;
-}
-
-export function updateBoxMaterial(
-  material: THREE.ShaderMaterial,
-  styles: BoxStyles,
-  width: number,
-  height: number,
-  texture?: THREE.Texture | null,
-) {
-  const parsedBg = parseColor(styles.backgroundColor);
-  const parsedBorder = parseColor(styles.borderColor);
-
-  material.uniforms.uSize.value.set(width, height);
-
-  // material.uniforms.uBorderRadius.value = parsePixelValue(styles.borderRadius);
-  setBorderRadius(material.uniforms.uBorderRadius.value, styles.borderRadius);
-  material.uniforms.uBorderWidth.value = parsePixelValue(styles.borderWidth);
-
-  material.uniforms.uBgColor.value.copy(parsedBg.color);
-  material.uniforms.uBorderColor.value.copy(parsedBorder.color);
-
-  material.uniforms.uOpacity.value = styles.opacity ?? 1.0;
-  material.uniforms.uBgOpacity.value = parsedBg.alpha;
-  material.uniforms.uBorderOpacity.value = parsedBorder.alpha;
-  if (material.uniforms.uTexture && texture !== undefined) {
-    material.uniforms.uTexture.value = texture;
-  }
-}

package/src/TextGenerator.ts

@@ -1,85 +0,0 @@
-import * as THREE from "three";
-import { TextStyles } from "./types";
-
-function wrapText(
-  ctx: CanvasRenderingContext2D,
-  text: string,
-  maxWidth: number
-): string[] {
-  const forcedLines = text.split("\n");
-  const resultLines: string[] = [];
-
-  forcedLines.forEach((line) => {
-    const words = line.split(" ");
-    let currentLine = words[0];
-
-    for (let i = 1; i < words.length; i++) {
-      const word = words[i];
-      const width = ctx.measureText(currentLine + " " + word).width;
-
-      if (width < maxWidth) {
-        currentLine += " " + word;
-      } else {
-        resultLines.push(currentLine);
-        currentLine = word;
-      }
-    }
-    resultLines.push(currentLine);
-  });
-
-  return resultLines;
-}
-
-export function createTextTexture(
-  text: string,
-  styles: TextStyles,
-  rectWidth: number,
-  rectHeight: number,
-  qualityFactor: number = 2
-): THREE.CanvasTexture {
-  const canvas = document.createElement("canvas");
-  const ctx = canvas.getContext("2d");
-
-  if (!ctx) {
-    throw new Error("[Mirage] Failed to create canvas context");
-  }
-  // text Quality
-
-  const pixelRatio = window.devicePixelRatio || 1;
-  const scale = pixelRatio * qualityFactor;
-
-  canvas.width = rectWidth * scale;
-  canvas.height = rectHeight * scale;
-  ctx.scale(scale, scale);
-
-  ctx.font = styles.font;
-  ctx.fillStyle = styles.color;
-  ctx.textBaseline = "top";
-
-  ctx.globalAlpha = 1;
-
-  const lines = wrapText(ctx, text, rectWidth);
-  const lineHeight = styles.lineHeight;
-
-  lines.forEach((line, index) => {
-    const y = index * lineHeight + 2;
-
-    let x = 0;
-    if (styles.textAlign === "center") {
-      x = rectWidth / 2;
-    } else if (styles.textAlign === "right") {
-      x = rectWidth;
-    }
-    ctx.textAlign = styles.textAlign as CanvasTextAlign;
-
-    ctx.fillText(line, x, y);
-  });
-
-  const texture = new THREE.CanvasTexture(canvas);
-  texture.colorSpace = THREE.SRGBColorSpace;
-  texture.minFilter = THREE.LinearFilter;
-  texture.magFilter = THREE.LinearFilter;
-  texture.needsUpdate = true;
-
-  return texture;
-}

package/src/dev/devShader.ts

@@ -1,114 +0,0 @@
-export const isTraveler = true;
-
-export const glassHooks = {
-  uvModifier: /* glsl */ `
-    // 1. 박스 크기에 비례한 두께감
-    // float thickness_uv = min(uSize.x, uSize.y) * 0.5; 
-    float thickness_uv = 25.0; 
-    float index = 1.3; // 굴절률 (공기: 1.0, 유리: 1.5~1.9)
-    float base_height = thickness_uv * 1.5;
-
-    // 2. 로컬 SDF 계산 (p는 픽셀 단위)
-    vec2 xRadii_uv = mix(uBorderRadius.xw, uBorderRadius.yz, step(0.0, p.x));
-    float r_uv = mix(xRadii_uv.y, xRadii_uv.x, step(0.0, p.y));
-    float d_uv = sdRoundedBox(p, halfSize, r_uv);
-
-    // 3. 3D 노말(Normal) 계산
-    float dx_uv = dFdx(d_uv);
-    float dy_uv = dFdy(d_uv);
-    if (abs(dx_uv) < 0.001 && abs(dy_uv) < 0.001) {
-        vec2 fallbackDir = normalize(p);
-        dx_uv = fallbackDir.x; dy_uv = fallbackDir.y;
-    }
-    float n_cos_uv = max(thickness_uv + d_uv, 0.0) / max(thickness_uv, 0.001);
-    float n_sin_uv = sqrt(max(1.0 - n_cos_uv * n_cos_uv, 0.0));
-    vec3 normal_uv = normalize(vec3(dx_uv * n_cos_uv, dy_uv * n_cos_uv, n_sin_uv));
-
-    // 4. Z 높이 계산
-    float h = 0.0;
-    if (d_uv < -thickness_uv) {
-        h = thickness_uv;
-    } else if (d_uv < 0.0) {
-        float x = thickness_uv + d_uv;
-        h = sqrt(max(thickness_uv * thickness_uv - x * x, 0.0));
-    }
-
-    // 5. 굴절(Refraction) 적용
-    vec3 incident = vec3(0.0, 0.0, -1.0);
-    vec3 refract_vec = refract(incident, normal_uv, 1.0 / index);
-    
-    float denom = dot(vec3(0.0, 0.0, -1.0), refract_vec);
-    float refract_length = (h + base_height) / max(denom, 0.001); 
-    
-    // offsetPx는 '박스 내부의 픽셀 단위' 왜곡 거리입니다.
-    vec2 offsetPx = refract_vec.xy * refract_length;
-    
-    // [다시 복구!] 큰 배경 텍스쳐를 자르기 위해 screenUv를 사용
-    // 화면 1픽셀이 전체 screenUv(0~1)에서 차지하는 비율을 편미분으로 동적 계산
-    vec2 pixelToUv = vec2(dFdx(screenUv.x), dFdy(screenUv.y));
-    if (abs(pixelToUv.x) < 0.000001) pixelToUv.x = 1.0 / 1920.0; // 안전 장치
-    if (abs(pixelToUv.y) < 0.000001) pixelToUv.y = 1.0 / 1080.0; // 안전 장치
-    
-    // 픽셀 오프셋을 화면 UV 오프셋으로 변환
-    vec2 distortOffset = offsetPx * pixelToUv;
-
-    // vUv 대신 screenUv에서 왜곡값을 빼서 최종 배경 픽셀을 당겨옵니다.
-    resultUv = screenUv - distortOffset; 
-  `,
-
-  //   colorModifier: /* glsl */ `
-  //     // float thickness_c = min(uSize.x, uSize.y) * 0.5;
-  //     float thickness_c = 25.0;
-  //     float dx_c = dFdx(d);
-  //     float dy_c = dFdy(d);
-  //     if (abs(dx_c) < 0.001 && abs(dy_c) < 0.001) {
-  //         vec2 fallbackDir = normalize(p);
-  //         dx_c = fallbackDir.x; dy_c = fallbackDir.y;
-  //     }
-  //     float n_cos_c = max(thickness_c + d, 0.0) / max(thickness_c, 0.001);
-  //     float n_sin_c = sqrt(max(1.0 - n_cos_c * n_cos_c, 0.0));
-  //     vec3 normal_c = normalize(vec3(dx_c * n_cos_c, dy_c * n_cos_c, n_sin_c));
-
-  //     float edgeReflection = smoothstep(-5.0, 0.0, d) * smoothstep(0.0, -5.0, d);
-  //     float fresnel = pow(1.0 - max(dot(normal_c, vec3(0.0, 0.0, 1.0)), 0.0), 3.0);
-
-  //     finalColor.rgb += vec3(1.0) * (edgeReflection * 0.4 + fresnel * 0.5);
-  //   `,
-  colorModifier: /* glsl */ `
-    // 1. 노말 계산 (기존과 동일)
-    float thickness_c = 25.0;
-    float dx_c = dFdx(d);
-    float dy_c = dFdy(d);
-    if (abs(dx_c) < 0.001 && abs(dy_c) < 0.001) {
-        vec2 fallbackDir = normalize(p);
-        dx_c = fallbackDir.x; dy_c = fallbackDir.y;
-    }
-    float n_cos_c = max(thickness_c + d, 0.0) / max(thickness_c, 0.001);
-    float n_sin_c = sqrt(max(1.0 - n_cos_c * n_cos_c, 0.0));
-    vec3 normal_c = normalize(vec3(dx_c * n_cos_c, dy_c * n_cos_c, n_sin_c));
-
-    // ==========================================
-    // [애플 스타일 리퀴드 글래스 틴트 & 질감 추가]
-    // ==========================================
-
-    // A. 틴트(Tint) 조작
-    // 밝은 테마라면 vec3(1.0), 어두운 테마라면 vec3(0.1) 등을 사용
-    vec3 tintColor = vec3(0.03, 0.03, 0.8); 
-    float tintStrength = 0.3; // 틴트 강도 (0.1 ~ 0.3 사이 추천)
-    finalColor.rgb = mix(finalColor.rgb, tintColor, tintStrength);
-
-    // B. 프로스트 글래스 노이즈 (시각적 밀도감)
-    // vUv를 이용한 간단한 난수 생성으로 화면 픽셀 단위의 미세한 질감을 줌
-    float noise = fract(sin(dot(vUv, vec2(12.9898, 78.233))) * 43758.5453) * 2.0 - 1.0;
-    finalColor.rgb += noise * 0.01; // 노이즈 강도 (너무 강하면 지저분해짐)
-
-    // C. 프레넬(Fresnel) 및 날카로운 단면 반사광
-    float fresnel = pow(1.0 - max(dot(normal_c, vec3(0.0, 0.0, 1.0)), 0.0), 4.0);
-    
-    // 기존의 두꺼운 15px 빛 맺힘 대신 1.5px~2px 수준의 예리한 테두리 하이라이트
-    float sharpEdge = smoothstep(-5.0, 0.0, d) * smoothstep(0.0, -5.0, d); 
-    
-    // 빛 합성 (테두리가 살짝 빛나며 유리 질감을 완성)
-    finalColor.rgb += vec3(1.0) * (sharpEdge * 0.6 + fresnel * 0.3);
-  `,
-};