@realsee/dnalogel
Version:
11 lines (10 loc) • 3.24 kB
TypeScript
/**
* Mask 标签的 Shader 代码
* 参考 itemMask 插件实现
*/
/**
* Vertex Shader
*/
export declare const maskVertexShader = "\nvarying vec2 vUv;\nvoid main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n";
/** 多 style：mergedTexture 中每组 3 像素为 color(id)/tolerance+highlight/opacity，用 color 作 id 匹配 */
export declare const maskFragmentShaderMulti = "\n#define RESOLUTION 2048.0\n#define MAX_GROUPS 64\n#define STRICT_MATCH 0.5/255.0\n\nvarying vec2 vUv;\nuniform sampler2D map;\nuniform sampler2D mergedTexture;\nuniform float groupCount;\nuniform float textureWidth;\nuniform float pixelsPerGroup;\n\nfloat colorGap(vec3 a, vec3 b) {\n return abs(a.r - b.r) + abs(a.g - b.g) + abs(a.b - b.b);\n}\n\nvec4 readStyleColor(float groupIndex) {\n float px = groupIndex * pixelsPerGroup;\n float texX = (px + 0.5) / textureWidth;\n return texture2D(mergedTexture, vec2(texX, 0.5));\n}\n\nvec4 readStyleToleranceHighlight(float groupIndex) {\n float px = groupIndex * pixelsPerGroup + 1.0;\n float texX = (px + 0.5) / textureWidth;\n return texture2D(mergedTexture, vec2(texX, 0.5));\n}\n\nfloat readStyleOpacity(float groupIndex) {\n float px = groupIndex * pixelsPerGroup + 2.0;\n float texX = (px + 0.5) / textureWidth;\n return texture2D(mergedTexture, vec2(texX, 0.5)).r;\n}\n\nfloat detectEdge(sampler2D map, vec2 uv, vec3 matchColor, float tolerance) {\n vec4 centerColor = texture2D(map, uv);\n if (colorGap(centerColor.rgb, matchColor) >= tolerance) return 0.0;\n float step = 1.0 / RESOLUTION;\n vec4 u = texture2D(map, uv + vec2(0.0, -step));\n vec4 l = texture2D(map, uv + vec2(-step, 0.0));\n vec4 r = texture2D(map, uv + vec2(step, 0.0));\n vec4 d = texture2D(map, uv + vec2(0.0, step));\n bool edge = colorGap(u.rgb, matchColor) >= tolerance || colorGap(l.rgb, matchColor) >= tolerance\n || colorGap(r.rgb, matchColor) >= tolerance || colorGap(d.rgb, matchColor) >= tolerance;\n return edge ? 1.0 : 0.0;\n}\n\nvoid main() {\n vec4 image = texture2D(map, vUv);\n if (image.r == 0.0 && image.g == 0.0 && image.b == 0.0) discard;\n\n // WebGL 1.0 \u8981\u6C42\u5FAA\u73AF\u7EC8\u6B62\u6761\u4EF6\u5FC5\u987B\u662F\u7F16\u8BD1\u65F6\u5E38\u91CF\uFF0C\u6240\u4EE5\u7528 MAX_GROUPS\uFF0C\u5FAA\u73AF\u5185\u68C0\u67E5 groupCount\n for (float i = 0.0; i < float(MAX_GROUPS); i += 1.0) {\n if (i < groupCount) {\n vec4 styleColor = readStyleColor(i);\n vec3 colorRgb = styleColor.rgb;\n float tol = readStyleToleranceHighlight(i).r * 3.0;\n vec3 highlight = readStyleToleranceHighlight(i).gba;\n float opacity = readStyleOpacity(i);\n \n if (opacity > 0.0) {\n float gap = colorGap(image.rgb, colorRgb);\n if (gap > STRICT_MATCH) continue;\n float smoothRange = 0.01;\n float matchFactor = 1.0 - smoothstep(tol - smoothRange, tol + smoothRange, gap);\n if (matchFactor > 0.0) {\n float isEdge = detectEdge(map, vUv, colorRgb, tol);\n float alpha = mix(opacity, 1.0, isEdge);\n alpha *= max(matchFactor, 0.9);\n gl_FragColor = vec4(highlight, alpha);\n return;\n }\n }\n }\n }\n discard;\n}\n";