Oculus Rift shader?

General Discussion Other

leputita

in General Discussion • Other • 4 months ago

Hello there.

I was thinking of making some still-images and short animations for the Oculus Rift virtual reality thingy. Problem is, I've never worked with shaders before and, although it looks like a really fun subject, I'm quite lost

I've found this GLSL shader for the rift: https://github.com/dghost/glslRiftDistort

and I've read the shaders tutorial on the Processign website

But I don't know how to implement the shader into my project.

If anyone could point me in the right direction, I would be forever grateful.

thank you for your time

Replies(6)

paul.stro..

Re: Oculus Rift shader?

3 months ago

I'm about to try this as well. No idea where and how to even begin, so if you or anyone else would have any pointers for me, they would be appreciated.

I'll report back here once and if I figure anything out.

p.

michael.o..

Re: Oculus Rift shader?

2 months ago

I just got my Oculus Rift and starting to use it with Processing.

The shader leputita is mentioning does not work with processing because it's a geometry shader.

I found a Java implementation that seems more compatible:
https://developer.oculusvr.com/forums/viewtopic.php?f=20&t=88#p977

Unfortunately i just get a black window and the error:
OpenGL error 1282 at bot endDraw(): invalid operation

Here's the code.

Processing pde:

PShader barrel;
PImage img;

void setup() {
size(1024, 600, P3D);

img = loadImage("nasa_buzz.jpg");
// Shaders files must be in the "data" folder to load correctly
barrel = loadShader("barrel_frag.glsl", "barrel_vert.glsl");

// left
float x = 0.0f;
float y = 0.0f;
float w = 0.5f;
float h = 1.0f;

float K0 = 1.0f;
float K1 = 0.22f;
float K2 = 0.24f;
float K3 = 0.0f;
float as = w/h;

float DistortionXCenterOffset = 0.25f; // left
float scaleFactor = 1.0f;

float[] LensCenter = {x + (w + DistortionXCenterOffset * 0.5f)*0.5f, y + h*0.5f};
barrel.set("LensCenter", LensCenter);
println(LensCenter);
float[] ScreenCenter = {x + w*0.5f, y + h*0.5f};
barrel.set("ScreenCenter", ScreenCenter);
float[] Scale = {(w/2.0f) * scaleFactor, (h/2.0f) * scaleFactor * as};
barrel.set("Scale", Scale);
float[] ScaleIn = {(2.0f/w), (2.0f/h) / as};
barrel.set("ScaleIn", ScaleIn);
float[] HmdWarpParam = {K0, K1, K2, K3};
barrel.set("HmdWarpParam", HmdWarpParam);
barrel.set("tex", img);

stroke(0, 102, 153);
rectMode(CENTER);
}

void draw() {
background(200);
shader(barrel);
image(img, 0, 0);
}

Vertex shader (barrel_vert.glsl):

void main() {
gl_TexCoord[0] = gl_MultiTexCoord0;
gl_Position = gl_Vertex;
}

Fragment shader (barrel_frag.glsl):

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

#define PROCESSING_TEXTURE_SHADER

uniform sampler2D tex;
uniform vec2 LensCenter;
uniform vec2 ScreenCenter;
uniform vec2 Scale;
uniform vec2 ScaleIn;
uniform vec4 HmdWarpParam;

vec2 HmdWarp(vec2 texIn)
{
   vec2 theta = (texIn - LensCenter) * ScaleIn;
   float rSq= theta.x * theta.x + theta.y * theta.y;
   vec2 theta1 = theta * (HmdWarpParam.x + HmdWarpParam.y * rSq +            HmdWarpParam.z * rSq * rSq + HmdWarpParam.w * rSq * rSq * rSq);
   return LensCenter + Scale * theta1;
}

void main()
{
   vec2 tc = HmdWarp(gl_TexCoord[0].xy);
   if (any(notEqual(clamp(tc, ScreenCenter-vec2(0.25,0.5), ScreenCenter+vec2(0.25, 0.5)) - tc, vec2(0.0, 0.0))))
       gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
   else
       gl_FragColor = texture2D(tex, tc);
}

I think one of the error sources is that i had to change this line:

vec2 tc = HmdWarp(gl_TexCoord[0]);

vec2 tc = HmdWarp(gl_TexCoord[0].xy);

gl_TexCoord[0] is a vec4 and the the function HmdWarp expects a vec2.

michael.o..

Re: Oculus Rift shader?

2 months ago

Ok. I am quite close. The fragment shader is now working. Unfortunately the position and size of the eyes is not perfect yet.

Processing code:

PShader barrel;
PGraphics pg;

int eye_width = 1280;
int eye_height = 800;

void setup() {
size(1280, 800, P3D);

pg = createGraphics(eye_width, eye_height);

// Shaders files must be in the "data" folder to load correctly
barrel = loadShader("barrel_frag.glsl");

stroke(0, 102, 153);
rectMode(CENTER);

pg.beginDraw();
pg.background(0);
pg.stroke(255, 0, 255);
for (int yy=0; yy<eye_height; yy+=20)
{
    pg.line(0, yy, eye_width, yy);
}
for (int xx=0; xx<eye_width; xx+=20)
{
    pg.line(xx, 0, xx, eye_height);
}
pg.endDraw();
}

void draw() {
background(0);

blendMode(ADD);

set_shader("left");
shader(barrel);
image(pg, 0, 0, width, height);

resetShader();

set_shader("right");
shader(barrel);
image(pg, 0, 0, width, height);
//image(pg.get(width/2, 0, width/2, height), width/2, 0);
//blend(pg, 0, 0, width, height, width/2, 0, width/2, height, ADD);
}

void set_shader(String eye)
{
float x = 0.0;
float y = 0.0;
float w = 0.5;
float h = 1.0;
float DistortionXCenterOffset = 0.25;
float as = w/h;

float K0 = 1.0f;
float K1 = 0.22f;
float K2 = 0.24f;
float K3 = 0.0f;

float scaleFactor = 1.0f;

if (eye == "left")
{
    x = 0.0f;
    y = 0.0f;
    w = 0.5f;
    h = 1.0f;
    as = w/h;
    DistortionXCenterOffset = 0.25f;
}
else if (eye == "right")
{
    x = 0.5f;
    y = 0.0f;
    w = 0.5f;
    h = 1.0f;
    as = w/h;
    DistortionXCenterOffset = -0.25f;
}

barrel.set("LensCenter", x + (w + DistortionXCenterOffset * 0.5f)*0.5f, y + h*0.5f);
barrel.set("ScreenCenter", x + w*0.5f, y + h*0.5f);
barrel.set("Scale", (w/2.0f) * scaleFactor, (h/2.0f) * scaleFactor * as);
barrel.set("ScaleIn", (2.0f/w), (2.0f/h) / as);
barrel.set("HmdWarpParam", K0, K1, K2, K3);
}

Fragment shader:

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

uniform vec2 LensCenter;
uniform vec2 ScreenCenter;
uniform vec2 Scale;
uniform vec2 ScaleIn;
uniform vec4 HmdWarpParam;

vec2 HmdWarp(vec2 texIn)
{
   vec2 theta = (texIn - LensCenter) * ScaleIn;
   float rSq = theta.x * theta.x + theta.y * theta.y;
   vec2 theta1 = theta * (HmdWarpParam.x + HmdWarpParam.y * rSq + HmdWarpParam.z * rSq * rSq + HmdWarpParam.w * rSq * rSq * rSq);
   return LensCenter + Scale * theta1;
}

void main()
{
   vec2 tc = HmdWarp(vertTexCoord.xy); //gl_TexCoord[0].xy);
   if (any(notEqual(clamp(tc, ScreenCenter-vec2(0.25,0.5), ScreenCenter+vec2(0.25, 0.5)) - tc, vec2(0.0, 0.0))))
       gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
   else
       gl_FragColor = texture2D(texture, tc);
}

michael.o..

Re: Oculus Rift shader?

2 months ago

jherico writes in the Oculus development forum:
https://developer.oculusvr.com/forums/viewtopic.php?f=26&t=789&p=39595#p39595

Well, from your screenshot you appear to be rendering half of the texture to each eye. This isn't what you want to do. Neither do you want to render the full image to each eye, because it won't converge. In theory you need to render the full image in each eye, but have the image centered at the proper location for the user's IPD. In practice, you can probably get close enough just by using the center of the lenses, which are configured for the average IPD, and maybe tweak it a little bit with keyboard input.

Part of the difficulty in dealing with this is OVR's use of screen coordinates for everything, instead of viewport coordinates. I'm hoping to produce an OpenGL demo using screen coordinates soon, but I have a lot of stuff going on, so I don't know when it will happen.

michael.o..

Re: Oculus Rift shader?

2 months ago

Finally i got a working solution. The sketch is still to complicated and full of small hacks but it works on the Oculus Rift. Next i'll have a look at JRift for the sensors.

PShader barrel;
PGraphics fb;
PGraphics scene;
PImage img;

int eye_width = 640;
int eye_height = 800;

void setup() {
size(1280, 800, P3D);

// Load background image
img = loadImage("buzz.jpg");

// Create framebuffer
fb = createGraphics(width, height, P3D);
// Create PGraphics for actual scene
scene = createGraphics(eye_width, eye_height, P3D);

// Load fragment shader for oculus rift barrel distortion
barrel = loadShader("barrel_frag.glsl");
}

void draw() {
background(0);

// Draw actual scene
// Bg image and a rotating box
scene.beginDraw();
scene.background(0);
scene.image(img, 0, 0);
scene.fill(200, 200, 200, 100);
scene.translate(scene.width/2, scene.height/2, 100);
scene.rotateX(millis()/1000.0);
scene.rotateY(millis()/900.0);
scene.box(100, 100, 100);
scene.endDraw();

blendMode(ADD);

// Render left eye
set_shader("left");
shader(barrel);
fb.beginDraw();
fb.background(0);
fb.image(scene, 50, 0, eye_width, eye_height);
fb.endDraw();
image(fb, 0, 0);

resetShader();

// Render right eye
set_shader("right");
shader(barrel);
fb.beginDraw();
fb.background(0);
fb.image(scene, eye_width-50, 0, eye_width, eye_height);
fb.endDraw();
image(fb, 0, 0);
}

void set_shader(String eye)
{
float x = 0.0;
float y = 0.0;
float w = 0.5;
float h = 1.0;
float DistortionXCenterOffset = 0.25;
float as = w/h;

float K0 = 1.0f;
float K1 = 0.22f;
float K2 = 0.24f;
float K3 = 0.0f;

float scaleFactor = 0.7f;

if (eye == "left")
{
    x = 0.0f;
    y = 0.0f;
    w = 0.5f;
    h = 1.0f;
    DistortionXCenterOffset = 0.25f;
}
else if (eye == "right")
{
    x = 0.5f;
    y = 0.0f;
    w = 0.5f;
    h = 1.0f;
    DistortionXCenterOffset = -0.25f;
}

barrel.set("LensCenter", x + (w + DistortionXCenterOffset * 0.5f)*0.5f, y + h*0.5f);
barrel.set("ScreenCenter", x + w*0.5f, y + h*0.5f);
barrel.set("Scale", (w/2.0f) * scaleFactor, (h/2.0f) * scaleFactor * as);
barrel.set("ScaleIn", (2.0f/w), (2.0f/h) / as);
barrel.set("HmdWarpParam", K0, K1, K2, K3);
}

Fragment shader:

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

uniform vec2 LensCenter;
uniform vec2 ScreenCenter;
uniform vec2 Scale;
uniform vec2 ScaleIn;
uniform vec4 HmdWarpParam;

vec2 HmdWarp(vec2 texIn)
{
   vec2 theta = (texIn - LensCenter) * ScaleIn;
   float rSq = theta.x * theta.x + theta.y * theta.y;
   vec2 theta1 = theta * (HmdWarpParam.x + HmdWarpParam.y * rSq + HmdWarpParam.z * rSq * rSq + HmdWarpParam.w * rSq * rSq * rSq);
   return LensCenter + Scale * theta1;
}

void main()
{
   vec2 tc = HmdWarp(vertTexCoord.xy); //gl_TexCoord[0].xy);
   if (any(notEqual(clamp(tc, ScreenCenter-vec2(0.25,0.5), ScreenCenter+vec2(0.25, 0.5)) - tc, vec2(0.0, 0.0))))
       gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
   else
       gl_FragColor = texture2D(texture, tc);
}

https://github.com/ixd-hof/Processing/tree/master/Examples/Oculus%20Rift/OculusRift_Basic

meta.meta

Re: Oculus Rift shader?

2 months ago

michael.of.05, thanks for your work! I've been playing with your code today and found that you can get rid of the need for blendMode(ADD) if you modify one line in the fragment shader. discard

void main()
{
vec2 tc = HmdWarp(vertTexCoord.xy); //gl_TexCoord[0].xy);
if (any(notEqual(clamp(tc, ScreenCenter-vec2(0.25,0.5), ScreenCenter+vec2(0.25, 0.5)) - tc, vec2(0.0, 0.0))))
discard;
else
gl_FragColor = texture2D(texture, tc);
}

Also, I got JRift working and controlling 2 cameras if you're interested in some code. I'm working in Java though rather than the Processing IDE.

Top Reply