2D to 3D FishEye menu experiment for Globe4D

0.KFair2019_FishEye_Demo.pde

PImage bg, img;
PShader fisheye;
PGraphics pg;

void settings() {
  fullScreen(P3D); //borderless window native 1920x1200
}

void setup() {
  surface.setSize(1200, 1200); //resize window
  surface.setLocation(360, 0); //center window

  bg = loadImage("HOME_back.png");
  img = loadImage("CSR_TXT_main.png");
  fisheye = loadShader("fisheye.glsl");
  pg = createGraphics(2*width, 2*height, P3D); //2x
}

void draw() {

  //draw everying into the PGraphics object 
  pg.beginDraw();
  pg.background(255);
  pg.translate(pg.width/2, pg.height/2);
  pg.pushMatrix();
  pg.rotate(frameCount*.01);
  pg.image(bg, -bg.width/2, -bg.height/2);
  pg.popMatrix();
  pg.pushMatrix();
  pg.translate(2*mouseX-pg.width/2, 2*mouseY-pg.height/2);
  float a = atan2(2*mouseY-pg.height/2, 2*mouseX-pg.width/2)-HALF_PI;
  pg.rotate(a);
  pg.image(img, -img.width/2, -img.height/2);
  pg.popMatrix();  
  pg.endDraw();

  //apply shader on flat pg to make it spherical
  shader(loadShader("fisheye.glsl")); 
  image(pg, 0, 0, width, height);
}

fisheye.glsl

// Inspired by the "Angular Fisheye à la Bourke" sketch from
// Jonathan Cremieux, as shown in the OpenProcessing website:
// http://openprocessing.org/visuals/?visualID=12140
// Using the inverse transform of the angular fisheye as
// explained in Paul Bourke's website:
// http://paulbourke.net/miscellaneous/domefisheye/fisheye/

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

#define PROCESSING_TEXTURE_SHADER

uniform sampler2D texture;
uniform mat4 texMatrix;

varying vec4 vertColor;
varying vec4 vertTexCoord;

float aperture = 120;

const float PI = 3.1415926535;

void main(void) {    
  float apertureHalf = 0.5 * aperture * (PI / 180.0);
  
  // This factor ajusts the coordinates in the case that
  // the aperture angle is less than 180 degrees, in which
  // case the area displayed is not the entire half-sphere.
  float maxFactor = sin(apertureHalf);
  
  // The st factor takes into account the situation when non-pot
  // textures are not supported, so that the maximum texture
  // coordinate to cover the entire image might not be 1.
  vec2 stFactor = vec2(1.0 / abs(texMatrix[0][0]), 1.0 / abs(texMatrix[1][1]));  
  vec2 pos = (2.0 * vertTexCoord.st * stFactor - 1.0);
  
  float l = length(pos);
  if (l > 1.0) {
    gl_FragColor = vec4(0, 0, 0, 1);  
  } else {
    float x = maxFactor * pos.x;
    float y = maxFactor * pos.y;
    
    float n = length(vec2(x, y));
    
    float z = sqrt(1.0 - n * n);
  
    float r = atan(n, z) / PI; 
  
    float phi = atan(y, x);

    float u = r * cos(phi) + 0.5;
    float v = r * sin(phi) + 0.5;

    gl_FragColor = texture2D(texture, vec2(u, v) / stFactor) * vertColor;
  }
}

updated version with scaling:

PApplet app = this;
PImage bg, img;
PShader fisheye;
PGraphics pg;
boolean enableShader = false;
float upScaler = 2;
float dnScaler=2/3.;

void settings() {
  fullScreen(P3D); //borderless window native 1920x1200
}

void setup() {
  surface.setSize(1200, 1200); //resize window
  surface.setLocation(360, 0); //center window

  bg = loadImage("HOME_back.png");
  img = loadImage("CSR_TXT_main.png");
  fisheye = loadShader("fisheye.glsl");
  pg = createGraphics(int(upScaler*width), int(upScaler*height), P3D); //2x
}

void draw() {

  //draw everying into the PGraphics object 
  pg.beginDraw();
  pg.background(255);
  pg.translate(pg.width/2, pg.height/2);
  pg.pushMatrix();
  //pg.rotate(frameCount*.01);
  pg.image(bg, -bg.width/2, -bg.height/2);
  pg.popMatrix();
  pg.pushMatrix();
  pg.translate(upScaler*dnScaler*(mouseX-width/2), upScaler*dnScaler*(mouseY-height/2));
  float a = atan2(upScaler*dnScaler*(mouseY-height/2), upScaler*dnScaler*(mouseX-width/2))-HALF_PI;
  pg.rotate(a);
  pg.image(img, -img.width/2, -img.height/2);
  pg.fill(255, 255, 0);
  pg.ellipse(0, 0, 10, 10);
  pg.popMatrix();
  pg.noFill();
  pg.ellipse(0, 0, pg.width, pg.height);

  pg.stroke(255, 0, 0);
  pg.ellipse(0, 0, pg.width*dnScaler, pg.height*dnScaler);

  pg.endDraw();

  //apply shader on flat pg to make it spherical
  translate(width/2, height/2); 
  if (enableShader) shader(loadShader("fisheye.glsl"));
  else scale(1/dnScaler);
  image(pg, -width/2, -height/2, width, height);
}

void keyPressed() {
  if (key=='s') {
    enableShader=!enableShader;
    resetShader();
  }
}