GLSL 效果示例

半调网点:用圆点大小表现图像明暗

网格间距保持不变,点半径随原图亮度变化。

在线示例

修改右侧代码,左侧预览会实时更新。

观察什么

网格间距保持不变,点半径随原图亮度变化。

实现原理

亮度控制圆点面积,因此半径用平方根映射。格子大小固定时,暗处的圆点更大。

找到控制效果的代码

float size=5.+u_parameter*20.;vec2 id=floor(gl_FragCoord.xy/size),q=fract(gl_FragCoord.xy/size)-.5;float l=dot(texture2D(u_texture,(id+.5)*size/u_resolution).rgb,vec3(.299,.587,.114));float radius=sqrt(1.-l)*.5;float ink=1.-smoothstep(radius-.03,radius+.03,length(q));c=mix(vec3(.96,.91,.8),vec3(.07,.04,.12),ink);

动手修改

把 size=5.+u_parameter*20. 改成 size=20.。网点格尺寸会固定,便于观察较暗的测试图采样如何在同样大小的格内产生更大的圆点。

调试与成本

每格在 (id+.5)*size/u_resolution 读取一次纹理来确定亮度。把 sqrt(1.-l)*.5 换成 (1.-l)*.5,中间调的圆点会缩小,说明用面积表示暗度时,半径为何需要平方根。

深入理解

用到的内置函数

一步步学会这个效果