在 做地图定位时候 往往都是高亮边框的方式来做样式展示，今天通过gl-matrix 结合做 闪烁定位，有点像照相机 闪了一下的感觉
```html
闪烁定位
html,
body,
#viewDiv {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#info {
position: absolute;
right: 100px;
bottom: 100px;
color: white;
font-family: 'Gruppo', cursive;
}
#info h1 {
font-family: 'Orbitron', sans-serif;
}
precision highp float;
uniform mat3 u_transform;
uniform mat3 u_display;
attribute vec2 a_position;
void main() {
gl_Position.xy = (u_display * (u_transform * vec3(a_position, 1.0))).xy;
gl_Position.zw = vec2(0.0, 1.0);
}
precision highp float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
precision mediump float;
attribute vec2 a_position;
varying vec2 v_texcoord;
void main(void) {
gl_Position = vec4(a_position, 0.0, 1.0);
v_texcoord = 0.5 * (a_position + 1.0);
}
precision mediump float;
uniform sampler2D u_texture;
uniform ivec2 u_size;
varying vec2 v_texcoord;
vec4 sample(int dx, int dy) {
return texture2D(u_texture, v_texcoord + vec2(dx, dy) / vec2(u_size));
}
float height(int dx, int dy) {
return length(sample(dx, dy).ra);
}
void main(void) {
float dx = -(height(+1, 0) - height(-1, 0));
float dy = -(height(0, +1) - height(0, -1));
gl_FragColor = vec4(length(vec2(dx, dy)), 0.0, 0.0, 1.0) * texture2D(u_texture, v_texcoord).a;
}
precision mediump float;
attribute vec2 a_position;
varying vec2 v_texcoord;
void main(void) {
gl_Position = vec4(a_position, 0.0, 1.0);
v_texcoord = 0.5 * (a_position + 1.0);
}
precision mediump float;
uniform sampler2D u_texture;
uniform ivec2 u_size;
varying vec2 v_texcoord;
vec4 sample(int dx, int dy) {
return texture2D(u_texture, v_texcoord + vec2(dx, dy) / vec2(u_size));
}
void main(void) {
vec4 blurred = vec4(0.0, 0.0, 0.0, 0.0);
for (int i = -1; i <= 1; ++i) {
for (int j = -1; j <= 1; ++j) {
blurred += sample(i, j);
}
}
gl_FragColor = blurred / 9.0;
}
precision mediump float;
attribute vec2 a_position;
varying vec2 v_texcoord;
更多消息参考小专栏https://xiaozhuanlan.com/topic/4816923075
网友评论