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.,就会改采格子角点;色块颜色会变化,块的大小不变。

深入理解

用到的内置函数

一步步学会这个效果