glsl - 我如何标准化在 glsl 中绘制的圆圈,以使分辨率不会拉伸?
问题描述
我正在尝试使用 glsl 在特定精灵周围创建一个圆圈。但是,分辨率是矩形 (800x600),这会导致圆形略微拉伸:
我在这里尝试了答案,但我不知道如何正确地将它们应用于我的特定着色器。我需要做什么
#define SHADER_NAME SPOTLIGHT_FS
precision highp float;
uniform sampler2D uMainSampler;
varying vec2 outTexCoord;
// coord is the non-normalized position if the sprite that the circle follows
uniform vec2 coord;
vec2 px = vec2(1.0/800.0, 1.0/600.0);
float getDistance(vec2 pixelCoord, vec2 playerCoord) {
// pixelCoord is normalized, but playerCoord is passed in as-is
return distance(pixelCoord, playerCoord*px);
}
void main( void )
{
if (getDistance(outTexCoord, coord) > 0.125) {
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
}
else {
gl_FragColor = texture2D(uMainSampler, outTexCoord);
}
}
解决方案
您必须考虑视口的纵横比。例如:
vec2 px = vec2(1.0/800.0, 1.0/600.0);
float aspect = 800.0 / 600.0;
float getDistance(vec2 pixelCoord, vec2 playerCoord) {
vec2 p = playerCoord * px * vec2(1.0, 1.0/aspect);
// pixelCoord is normalized, but playerCoord is passed in as-is
return distance(pixelCoord, p);
}
或者,您可以以像素为单位计算距离:
vec2 resolution = vec2(800.0, 600.0);
float radius = 100.0; // radius in pixel
float getDistance(vec2 pixelCoord, vec2 playerCoord) {
return distance(pixelCoord*resolution, playerCoord);
}
void main( void )
{
if (getDistance(outTexCoord, coord) > radius) {
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
}
else {
gl_FragColor = texture2D(uMainSampler, outTexCoord);
}
}
推荐阅读
- python - 将整数添加到字典(TypeError:'int' 对象不可下标)
- reactjs - Trans Component i18next 中的动态内容
- node.js - Google OAuth2 无法获取个人资料信息
- c++ - 从文本文件中读取,然后将项目存储到列表中
- ruby-on-rails - activerecord-multi-tenant /acts_as_tenant 和 Active Admin
- c# - 尝试从 sql 数据库中读取数据并在文本框中显示 - Visual C#(语法错误)
- javascript - 下载完成后 Django 更新模板
- javascript - 在反应中重定向到主页时出错
- rx-java - rxjava 过滤流中的项目与流中的任何其他过滤器不匹配
- amazon-web-services - 通过 ec2 上的 curl 获取实例名称?