Trying to port a GLSL glass shader to Processing 3.0

Question

EDITED

I am beginner on Processing language and GLSL shaders. I am trying to port a fresnel+cubemap shader for a glass material. But as result my shape ever disappear, instead... :-(

My vertex shader is:

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

And the fragment shader:

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

I am testing this shader with the Processing 3.0 sketch bellow (edited), on Android Mode:

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

And I am using this images to build the cubemap.

Someone know how I can make this work?

Answer 1

Problem is not in your code but in your data.

OpenGL requires that all textures used by the cubemap have the same dimensions, and that the textures be square otherwise it will refuse to load it.

I checked your PNGs and this is not the case, they all have the same dimension but they are not square (255x230).

Also for Android it may be required that the texture dimensions be a power of 2 (128, 256, 512 ...)

So I tested resizing all the textures to 256x256 pixels and now your sample works :