关于android:OpenGL ES 2.0/3.0 中的折射。大像素纹理 | 珊瑚贝

Refraction in OpenGL ES 2.0/3.0. Large pixels texture


尝试在 OpenGL ES 2.0/3.0 中实现折射。使用了以下着色器:

顶点着色器:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#version 300 es
precision lowp float;
uniform mat4 u_mvMatrix;

in vec4 a_position;  
in vec3 a_normal;

out mediump vec2 v_refractCoord;

const mediump float eta = 0.95;

void main() {
    vec4 eyePositionModel = u_mvMatrix * a_position;

    // eye direction in model space
    mediump vec3 eyeDirectModel = normalize(a_position.xyz eyePositionModel.xyz);

    // calculate refraction direction in model space
    mediump vec3 refractDirect = refract(eyeDirectModel, a_normal, eta);

    // project refraction
    refractDirect = (u_mvpMatrix * vec4(refractDirect, 0.0)).xyw;

    // map refraction direction to 2d coordinates
    v_refractCoord = 0.5 * (refractDirect.xy / refractDirect.z) + 0.5;
   
}

片段着色器:

1
2
3
4
5
6
7

in mediump vec2 v_refractCoord;
uniform samplerCube s_texture; // skybox

void main() {
    outColor = texture(s_texture, vec3(v_refractCoord, 1.0));
}

纹理加载方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@JvmStatic
fun createTextureCubemap(context: Context, rowID: Int) {
    val input = context.resources.openRawResource(rowID)
    val bitmap = BitmapFactory.decodeStream(input)

    val textureId = IntArray(1)
    glGenTextures(1, textureId, 0)
    glBindTexture(GL_TEXTURE_CUBE_MAP, textureId[0])

    GLUtils.texImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_X, 0, bitmap, 0)
    GLUtils.texImage2D(GL_TEXTURE_CUBE_MAP_NEGATIVE_X, 0, bitmap, 0)
    GLUtils.texImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_Y, 0, bitmap, 0)
    GLUtils.texImage2D(GL_TEXTURE_CUBE_MAP_NEGATIVE_Y, 0, bitmap, 0)
    GLUtils.texImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_Z, 0, bitmap, 0)
    GLUtils.texImage2D(GL_TEXTURE_CUBE_MAP_NEGATIVE_Z, 0, bitmap, 0)

    glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MIN_FILTER, GL_NEAREST)
    glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MAG_FILTER, GL_NEAREST)
    return textureId[0]
}

但是纹理是用大像素获得的,例如:

enter


此外,这是一个法线向量属性的问题。
问题是由于法向量是按面计算的,而不是针对每个顶点单独计算的。
注意,折射方向(refractDirect)取决于顶点坐标(eyeDirectModel)和法向量(a_normal):

1
mediump vec3 refractDirect = refract(eyeDirectModel, a_normal, eta);

由于相邻曲面之间的法线向量不同,您可以在网格面之间看到明显的边缘。

></p>
<p>如果法向量是按顶点计算的,那么相邻面共享顶点坐标和对应的法向量。这将导致从面对面的平稳过渡。 </p>
<p><img src=

  • 您能否告诉我是否需要更改法线数据或更改着色器代码?
  • @alexrnov 着色器是正确的。如答案中所述,法线向量似乎是面法线向量。这是法线向量属性而不是着色器的问题。
  • 非常感谢你!!!我将更改普通属性的数据。
  • 太棒了!甚至使用一个: normalize(- eyePositionView.xyz) 现在使图像好多了!


来源:https://www.codenong.com/61678506/

微信公众号
手机浏览(小程序)

Warning: get_headers(): SSL operation failed with code 1. OpenSSL Error messages: error:14090086:SSL routines:ssl3_get_server_certificate:certificate verify failed in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57

Warning: get_headers(): Failed to enable crypto in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57

Warning: get_headers(https://static.shanhubei.com/qrcode/qrcode_viewid_8688.jpg): failed to open stream: operation failed in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57
0
分享到:
没有账号? 忘记密码?