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

【问题标题】：Trying to port a GLSL glass shader to Processing 3.0尝试将 GLSL 玻璃着色器移植到 Processing 3.0
【发布时间】：2016-04-06 08:02:12
【问题描述】：

已编辑

我是处理语言和 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 模式下使用以下处理 3.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 图像来构建立方体贴图。

有人知道我怎样才能完成这项工作吗？

【问题讨论】：

有很多代码需要我们完成。如果您通过将minimal reproducible example 缩小到尽可能少的行来发布minimal reproducible example，您的运气可能会更好。
你完全正确，对不起。之前的帖子有点混乱。请检查我编辑的问题。相关部分是顶点和片段代码。但我添加了草图代码来提供帮助，并进行了清理。对不起，如果仍然有这么多行，但如果我减少它，我害怕牺牲一些清晰度。感谢@Kevin Workman 的帮助和建议。
你有想过这个问题吗？

标签： glsl shader processing

【解决方案1】：

问题不在于您的代码，而在于您的数据。

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

我检查了您的 PNG，但事实并非如此，它们都具有相同的尺寸，但它们不是正方形 (255x230)。

对于 Android，可能要求纹理尺寸是 2 的幂（128、256、512 ...）

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

【讨论】：