GLSL 效果示例
图像像素化:把任意分辨率变成等大的方块
横屏和竖屏下像素块都保持方形,可对照原图。
在线示例
修改右侧代码,左侧预览会实时更新。
观察什么
横屏和竖屏下像素块都保持方形,可对照原图。
实现原理
先在屏幕像素空间分格,再除以分辨率取样,横竖屏的像素块都会保持正方形。
找到控制效果的代码
float size=2.+floor(u_parameter*30.);vec2 coord=(floor(gl_FragCoord.xy/size)+.5)*size/u_resolution;c=texture2D(u_texture,coord).rgb;
动手修改
把 u_parameter 从 0 调到 1,size=2.+floor(u_parameter*30.) 会从 2 变成 32 个屏幕像素。GLSL 字样会逐渐变成更大的正方形色块。
调试与成本
每个片段只采样一次,读取量化格子的中心。把 coord 表达式里的 +.5 改为 +0.,就会改采格子角点;色块颜色会变化,块的大小不变。