尝试将GLSL玻璃着色器移植到处理3.0

Question

编辑的

我是处理语言和GLSL着色器的初学者。我试图移植一个fresnel+cubemap着色器作为玻璃材料。但结果我的体型消失了，反而.:-(

我的顶点着色器是：

const float Air = 1.0;
const float Glass = 1.51714;

const float Eta = Air / Glass;

const float R0 = ((Air - Glass) * (Air - Glass)) / ((Air + Glass) * (Air + Glass));

uniform mat4 transform;
uniform mat4 modelview;
uniform mat3 normalMatrix;

attribute vec4 vertex;
attribute vec3 normal;

varying vec3 v_reflection;
varying vec3 v_refraction;
varying float v_fresnel;

void main(void){

    vec4 t_vertex = modelview * vertex;

    vec3 incident = normalize(vec3(t_vertex));

    vec3 t_normal = normalMatrix * normal;

    v_refraction = refract(incident, t_normal, Eta);
    v_reflection = reflect(incident, t_normal);

    v_fresnel = R0 + (1.0 - R0) * pow((1.0 - dot(-incident, t_normal)), 5.0);

    gl_Position = transform * t_vertex;
}

碎片着色器：

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

uniform samplerCube cubemap;

varying vec3 v_refraction;
varying vec3 v_reflection;
varying float v_fresnel;

void main(void){
    vec4 refractionColor = textureCube(cubemap, normalize(v_refraction));
    vec4 reflectionColor = textureCube(cubemap, normalize(v_reflection));

    gl_FragColor = mix(refractionColor, reflectionColor, v_fresnel);
}

我正在使用Process3.0草图(编辑的)测试这个着色器，在安卓模式上：

PShader shader;
PShape sphere;

void setup() {
  fullScreen(P3D);
  noStroke();

  shader = loadShader("glass.frag.glsl", "glass.vert.glsl");
  openCubeMap("posx.png", "negx.png", "posy.png", "negy.png", "posz.png", "negz.png");
  shader.set("cubemap", 1);

  sphere = createShape(SPHERE, 120);
  sphere.setFill(color(-1, 50));
} 

void draw() {
  background(0);      

  directionalLight(102, 102, 102, 0, 0, -1);
  lightSpecular(204, 204, 204);
  directionalLight(102, 102, 102, 0, 1, -1);
  specular(100, 150, 150);

  translate(width / 2, height / 2);
  shader(shader);
  shape(sphere);
}  

void openCubeMap(String posX, String negX, String posY, String negY, String posZ, String negZ) {

  PGL pgl = beginPGL();
  // create the OpenGL-based cubeMap
  IntBuffer envMapTextureID = IntBuffer.allocate(1);
  pgl.genTextures(1, envMapTextureID);
  pgl.activeTexture(PGL.TEXTURE1);
  pgl.enable(PGL.TEXTURE_CUBE_MAP);  
  pgl.bindTexture(PGL.TEXTURE_CUBE_MAP, envMapTextureID.get(0));
  pgl.texParameteri(PGL.TEXTURE_CUBE_MAP, PGL.TEXTURE_WRAP_S, PGL.CLAMP_TO_EDGE);
  pgl.texParameteri(PGL.TEXTURE_CUBE_MAP, PGL.TEXTURE_WRAP_T, PGL.CLAMP_TO_EDGE);
  pgl.texParameteri(PGL.TEXTURE_CUBE_MAP, PGL.TEXTURE_WRAP_R, PGL.CLAMP_TO_EDGE);
  pgl.texParameteri(PGL.TEXTURE_CUBE_MAP, PGL.TEXTURE_MIN_FILTER, PGL.LINEAR);
  pgl.texParameteri(PGL.TEXTURE_CUBE_MAP, PGL.TEXTURE_MAG_FILTER, PGL.LINEAR);

  //Load in textures
  String[] textureNames = { posX, negX, posY, negY, posZ, negZ };
  for (int i=0; i<textureNames.length; i++) {    
    PImage texture = loadImage(textureNames[i]);
    int w = texture.width;
    int h = texture.height;
    texture.loadPixels();
    pgl.texImage2D(PGL.TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, PGL.RGBA, w, h, 0, PGL.RGBA, PGL.UNSIGNED_BYTE, IntBuffer.wrap(texture.pixels));
  }

  endPGL();
}

我正在使用this图像来构建cubemap。

有人知道我该怎么做吗？

Answer 1

问题不在代码中，而是在数据中。

OpenGL要求cubemap使用的所有纹理都具有相同的维度，并且纹理为square，否则它将拒绝加载它。

我检查了您的PNG，情况并非如此，它们都有相同的维度，但它们不是正方形(255x230)。

对于安卓系统来说，可能需要纹理尺寸是2的幂(128,256,512 .)

因此，我测试了将所有纹理调整到256x256像素的大小，现在您的示例工作了：

​

​