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

已编辑

我是处理语言和GLSL着色器的初学者。我正在尝试为玻璃材质移植一个菲涅尔+立方体贴图着色器。但结果我的形状永远消失了，取而代之的是…：-（

我的顶点着色器是：

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);
}

我正在Android模式下使用Processing 3.0 sketch bellow（编辑的）测试此着色器：

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();
}

PShader着色器；
假球形；
无效设置（）{
全屏（P3D）；
仰泳（）；
shader=loadShader（“glass.frag.glsl”、“glass.vert.glsl”）；
openCubeMap（“posx.png”、“negx.png”、“posy.png”、“negy.png”、“posz.png”、“negz.png”）；
着色器.set（“立方体贴图”，1）；
球体=createShape（球体，120）；
球体填充（颜色（-1,50））；
} 
作废提款（）{
背景（0）；
定向光（102102102,0,0，-1）；
光反射（204204204）；
定向光（102102102,0,1，-1）；
镜面反射（100150150）；
平移（宽度/2，高度/2）；
着色器（着色器）；
形状（球体）；
}  
void openCubeMap（字符串posX、字符串negX、字符串posY、字符串negY、字符串posZ、字符串negZ）{
PGL PGL=beginPGL（）；
//创建基于OpenGL的cubeMap
IntBuffer envmappTextureId=IntBuffer.allocate（1）；
genTextures（1，envMapTextureID）；
pgl.activeTexture（pgl.TEXTURE1）；
pgl.enable（pgl.TEXTURE\u CUBE\u MAP）；
pgl.bindTexture（pgl.TEXTURE_CUBE_MAP，envMapTextureID.get（0））；
pgl.texParameteri（pgl.TEXTURE\u CUBE\u MAP、pgl.TEXTURE\u WRAP\S、pgl.CLAMP\u TO\u EDGE）；
pgl.texParameteri（pgl.TEXTURE\u CUBE\u MAP、pgl.TEXTURE\u WRAP\u T、pgl.CLAMP\u TO\u EDGE）；
pgl.texParameteri（pgl.TEXTURE\u CUBE\u MAP、pgl.TEXTURE\u WRAP\u R、pgl.CLAMP\u TO\u EDGE）；
pgl.texParameteri（pgl.TEXTURE\u CUBE\u MAP，pgl.TEXTURE\u MIN\u FILTER，pgl.LINEAR）；
pgl.texParameteri（pgl.TEXTURE\u CUBE\u MAP，pgl.TEXTURE\u MAG\u FILTER，pgl.LINEAR）；
//加载纹理
字符串[]textureNames={posX，negX，posY，negY，posZ，negZ}；
对于（inti=0；i而言，问题不在代码中，而在数据中

OpenGL要求立方体贴图使用的所有纹理具有相同的尺寸，并且纹理为方形，否则将拒绝加载

我检查了您的PNG，但情况并非如此，它们都具有相同的尺寸，但它们不是正方形（255x230）

同样，对于Android，可能要求纹理尺寸为2的幂次方（128、256、512…）

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

这需要我们检查很多代码。如果你发布一篇文章，将其缩小到尽可能少的行数，你可能会运气更好。你完全正确，对不起。上一篇文章有点混乱。请检查我编辑的问题。相关部分是顶点和碎片代码。但我添加了草图代码以提供帮助，还有抱歉，如果仍然有这么多行，但如果我再减少一些，我恐怕会牺牲一些清晰度。谢谢你的帮助和建议，@Kevin Workman。你有没有弄明白这一点？