Last active
February 26, 2018 17:29
-
-
Save cansik/d6a61bcfe1ffc4f36eb1592d7143ab8f to your computer and use it in GitHub Desktop.
Depth buffer shading to 2d texture
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#ifdef GL_ES | |
precision mediump float; | |
precision mediump int; | |
#endif | |
uniform vec4 nearColor = vec4(1.0, 1.0, 1.0, 1.0); | |
uniform vec4 farColor = vec4(0.0, 0.0, 0.0, 1.0); | |
uniform float near; | |
uniform float far; | |
varying vec4 vertColor; | |
void main() { | |
gl_FragColor = mix(nearColor, farColor, smoothstep(near, far, gl_FragCoord.z / gl_FragCoord.w)); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
uniform mat4 transform; | |
attribute vec4 vertex; | |
attribute vec4 color; | |
varying vec4 vertColor; | |
void main() { | |
gl_Position = transform * vertex; | |
vertColor = color; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import peasy.*; | |
final int size = 500; | |
PShader shader; | |
PGraphics canvas; | |
PGraphics depthImage; | |
PeasyCam cam; | |
float near = 0f; | |
float far = 1000f; | |
boolean shaderApplied = false; | |
void settings() { | |
size(size * 2, size, P3D); | |
PJOGL.profile = 4; | |
pixelDensity(displayDensity()); | |
} | |
void setup() { | |
shader = loadShader("depthFrag.glsl", "depthVert.glsl"); | |
shader.set("near", near); | |
shader.set("far", far); | |
// setup other objects | |
canvas = createGraphics(size, size, P3D); | |
depthImage = createGraphics(size, size, P2D); | |
cam = new PeasyCam(this, 1000); | |
} | |
void draw() { | |
background(0); | |
// render 3d | |
render(canvas); | |
cam.getState().apply(canvas); | |
createDepthImage((PGraphics3D)canvas); | |
// show output onto onscreen canvas | |
cam.beginHUD(); | |
image(canvas, 0, 0); | |
image(depthImage, size, 0); | |
textSize(15); | |
text("ORIGINAL (3D)", 25, 25); | |
text("DEPTH (2D)", size + 25, 25); | |
text("FPS: " + frameRate, 25, height - 25); | |
cam.endHUD(); | |
} | |
void createDepthImage(PGraphics3D graphics) | |
{ | |
if (!graphics.is3D()) | |
return; | |
// add shader to graphics | |
graphics.shader(shader); | |
depthImage.beginDraw(); | |
depthImage.image(graphics, 0, 0); | |
depthImage.endDraw(); | |
// reset shader after operation | |
if (!shaderApplied) | |
graphics.resetShader(); | |
} | |
void render(PGraphics graphics) | |
{ | |
float size = 4.0f; | |
graphics.beginDraw(); | |
graphics.background(55); | |
graphics.pushMatrix(); | |
//canvas.translate(canvas.width / 2, canvas.height / 2); | |
graphics.rotateX(radians(frameCount % 360)); | |
graphics.rotateZ(radians(frameCount % 360)); | |
graphics.noStroke(); | |
graphics.fill(20, 20, 20); | |
graphics.box(100 * size); | |
graphics.fill(150, 255, 255); | |
graphics.sphere(60 * size); | |
graphics.popMatrix(); | |
graphics.endDraw(); | |
graphics.endDraw(); | |
} | |
void keyPressed() | |
{ | |
if (shaderApplied) | |
canvas.resetShader(); | |
else | |
canvas.shader(shader); | |
shaderApplied = !shaderApplied; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment