I can't get my depth to render correctly. No errors are thrown, the glCheckFramebufferStatus says it is complete as well.
Below is the code, the screen always shows up white. The depth values are not 1, but very very close:
EDIT:
So I tried linearizing the depth inside of my depth fragment shader and then drawing that directly to the screen to make sure the values were correct. They are correct. However, even if I send that linearized depth to my full screen quad shader (the 2nd one below), the screen is still all white.
public void initFramebuffers() {
glBindFramebuffer(GL_FRAMEBUFFER, depthShader.fbo);
depthShader.initTexture(width, height, GL_DEPTH_COMPONENT, GL_DEPTH_COMPONENT);
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT, GL_TEXTURE_2D, depthShader.tex, 0);
glDrawBuffer(GL_NONE);
glReadBuffer(GL_NONE);
}
public void initTexture(int width, int height, int format, int internalFormat) {
tex = glGenTextures();
glBindTexture(GL_TEXTURE_2D, tex);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexImage2D(GL_TEXTURE_2D, 0, internalFormat, width, height, 0, format, GL_FLOAT, (ByteBuffer)null);
}
Depth Shader:
#version 400
in vec3 pos;
in float radius;
uniform mat4 mView;
uniform mat4 projection;
uniform vec2 screenSize;
uniform vec3 lightPos;
out float depth;
float linearizeDepth(float depth) {
float n = 0.01;
float f = 100;
return (2.0 * n) / (f + n - depth * (f - n));
}
void main() {
//calculate normal
vec3 normal;
normal.xy = gl_PointCoord * 2.0 - 1.0;
float r2 = dot(normal.xy, normal.xy);
if (r2 > 1.0) {
discard;
}
normal.z = sqrt(1.0 - r2);
//calculate depth
vec4 pixelPos = vec4(pos + normal * radius, 1.0);
vec4 clipSpacePos = projection * pixelPos;
depth = clipSpacePos.z / clipSpacePos.w * 0.5f + 0.5f;
depth = linearizeDepth(depth);
}
Shader that reads in the depth. The values in linearizeDepth are my near and far distances:
#version 400
in vec2 coord;
uniform sampler2D depthMap;
uniform vec2 screenSize;
uniform mat4 projection;
out vec4 color;
float linearizeDepth(float depth) {
float n = 0.01;
float f = 100;
return (2.0 * n) / (f + n - depth * (f - n));
}
void main() {
float curDepth = texture2D(depthMap, coord).x;
//float d = linearizeDepth(curDepth);
color = vec4(d, d, d, 1.0f);
}
Code for drawing everything:
//--------------------Particle Depth-----------------------
{
glUseProgram(depthShader.program);
glBindFramebuffer(GL_FRAMEBUFFER, depthShader.fbo);
depthShader.particleDepthVAO(points);
//Sets uniforms
RenderUtility.addMatrix(depthShader, mView, "mView");
RenderUtility.addMatrix(depthShader, projection, "projection");
RenderUtility.addVector2(depthShader, screenSize, "screenSize");
RenderUtility.addVector3(depthShader, lightPosition, "lightPos");
glDisable(GL_BLEND);
glEnable(GL_DEPTH_TEST);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glBindVertexArray(depthShader.vao);
glDrawArrays(GL_POINTS, 0, points.size());
}
//Draw full screen
{
glUseProgram(blurShader.program);
glBindFramebuffer(GL_FRAMEBUFFER, 0);
blurShader.blurDepthVAO();
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, depthShader.tex);
glUniform1i(blurShader.depthMap, 0);
//Sets uniforms
RenderUtility.addMatrix(blurShader, mView, "mView");
RenderUtility.addMatrix(blurShader, projection, "projection");
RenderUtility.addVector2(blurShader, screenSize, "screenSize");
//glEnable(GL_DEPTH_TEST);
glBindVertexArray(blurShader.vao);
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
glViewport(0, 0, width, height);
}
The problem ended up being that my vertex shader's out variable name didn't match the fragment shader's in variable name (doh). The code posted above is 100% correct in case anyone sees this in the future.
There are a few issues with the posted code.
Inconsistent use of render target
In the setup of the FBO, there is only a depth attachment, and no color attachment. The color draw buffer is also explicitly disabled:
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT, GL_TEXTURE_2D, depthShader.tex, 0);
glDrawBuffer(GL_NONE);
However, the fragment shader writes a color output:
out float depth;
...
depth = clipSpacePos.z / clipSpacePos.w * 0.5f + 0.5f;
depth = linearizeDepth(depth);
To write to the depth attachment of the framebuffer, you will have to set the value of the predefined gl_FragDepth variable. Just because the out variable is named depth does not mean that it's actually used as the depth output. If you want to use the color output, you'll have to create a regular texture, and attach it to GL_COLOR_ATTACHMENT0. Which would actually seem easier.
linearizeDepth() calculation
float linearizeDepth(float depth) {
float n = 0.01;
float f = 100;
return (2.0 * n) / (f + n - depth * (f - n));
}
depth = clipSpacePos.z / clipSpacePos.w * 0.5f + 0.5f;
depth = linearizeDepth(depth);
The way the clipSpacePos is processed, it looks like the arguments to linarizeDepth() will be between 0.0 and 1.0. The calculation inside the function for these extreme values is then:
0.0 --> (2.0 * n) / (f + n)
1.0 --> 1.0
This looks fine for 1.0, but questionable for 0.0. I believe it would actually be more correct to make the preparation step:
depth = clipSpacePos.z / clipSpacePos.w;
This will then pass arguments between -1.0 and 1.0 to the function, which then produces:
-1.0 --> n / f
1.0 --> 1.0
It would actually make even more sense to me to scale the whole thing to produce results between 0.0 and 1.0, but at least this version makes intuitive sense, producing the relative distance to the far plane.
Calculation more complex than necessary
The above looks unnecessarily convoluted to me. You're applying the projection matrix, take the depth from the result, and then effectively invert the depth calculation applied by the projection matrix.
It would seem a whole lot simpler to not apply the projection matrix in the first place, and simply take the original distance. You can still divide by the far distance if you want a relative distance. At least as long as you use a standard projection matrix, I believe the following is equivalent to the corrected calculation above:
vec4 pixelPos = vec4(pos + normal * radius, 1.0);
float f = 100.0; // far plane
depth = -pixelPos.z / f;
The minus sign comes in because the most commonly used eye coordinate system assumes that you're looking down the negative z-axis.
If you wanted results between 0.0 and 1.0, you could also change this to:
float n = 0.01; // near plane
float f = 100.0; // far plane
depth = (-pixelPos.z - n) / (f - n);
Related
I'm working on the examples of the book OpenGlEs 2 for Android.
I did the first example, for drawing a rectangle of base 9, and height 14, by using the below array for defining the coordinates
private float[] tableVerticesWithTriangles = {
//Triangle
0f, 0f,
9f, 14f,
0f, 14f,
//Triangle 2
0f, 0f,
9f, 0f,
9f, 14f
};
The rectangle is appearing as in the example, the white rectangle in the top right corner:
The code I'm working on is in the repository https://github.com/quimperval/opengles-android-rectangle
Now in the book the author centers the rectangle by modifying the coordinates of the rectangle, however as far as I know, openGl can take care of that by using a projection matrix. So, I modified the vertex shader for using a projection Matrix
attribute vec4 a_Position;
attribute mat4 u_Projection;
void main(){
gl_Position = u_Projection * a_Position;
}
And in the CRenderer class I added the below variables
private static final String U_PROJECTION = "u_Projection";
int projectionMatrixLocation;
and the
float[] projectionMatrix = new float[16];
And in the onSurfaceChanged method I added the logic for considering the aspectRatio
#Override
public void onSurfaceChanged(GL10 gl10, int width, int height) {
glViewport(0, 0, width, height);
// Calculate the projection matrix
float aspectRatio = width > height ?
(float) width / (float) height :
(float) height / (float) width;
if (width > height) {
// Landscape
glOrthof(-aspectRatio, aspectRatio, -1f, 1f, -1f, 1f);
} else {
// Portrait or square
glOrthof(-1f, 1f, -aspectRatio, aspectRatio, -1f, 1f);
}
projectionMatrixLocation = glGetUniformLocation(program, "u_Projection");
glUniformMatrix4fv(projectionMatrixLocation, 1, false, projectionMatrix, 0);
}
In the onDrawFrame I didn't do changes.
When I compile and install the application in the emulator, It crashes, with the error:
2022-12-31 14:45:23.971 10499-10521/com.perval.myapplication A/libc: Fatal signal 11 (SIGSEGV), code 1, fault addr 0x0 in tid 10521 (GLThread 411)
Am I missing some operation?
I expect to center the rectangle (of any dimensions) in the screen of the device.
I believe the answer is that you are:
Not declaring the matrix as a uniform
Not checking your response from glGetUniformLocation()
As you are accessing a uniform with glGetUniformLocation, you should declare it in your shader like so:
uniform mat4 u_Projection;
I manage to find another way to achive the result I need, by using the below code in the onSurfaceChangedMethod
#Override
public void onSurfaceChanged(GL10 gl10, int width, int height) {
glViewport(0,0, width, height);
/*orthoM
*projectionMarix - float[] m - the destination array
* mOffset - the offset in to m which the result is written
* float left - the minimum range of the x-axis
* float right - the maximum range of the x-axis
* float bottom - the minimum range of the y-axis
* float top - the maximum range ot the y-axis
* float near - the minimum range of the z-axis
* float far - the maximum range of the z-axis
*
*/
float boundingBoxWidth = 300;
float boundingBoxHeight = 300;
float aspectRatio;
if(width>height){
//Landscape
aspectRatio = (float) width / (float) height;
orthoM(projectionMatrix, 0, -aspectRatio*boundingBoxHeight, aspectRatio*boundingBoxHeight, -boundingBoxHeight, boundingBoxHeight, -1f, 1f);
} else {
//Portrait or square
aspectRatio = (float) height / (float) width;
orthoM(projectionMatrix, 0, -boundingBoxWidth, boundingBoxWidth, -boundingBoxWidth*aspectRatio, boundingBoxWidth*aspectRatio, -1f, 1f);
}
}
In that way I got the behaviour I wanted, place an object in the center of the screen, and the object has vertex coordinates outside of the surface extents (-1,-1) to (1,1).
The key is to know the width and the height of the collision box of the object I want to draw, then it is just a matter of scaling the left, right or bottom/top variables based on the orientation of the screen, with the aspectRatio variable.
I placed the code in the repository:
https://github.com/quimperval/opengl-es-android-draw-object
I need to write a simple shader for the testgrid ground surface. I want to basically draw parallel lines in shader code.
Problem: as the lines grow more distant from the camera, they begin to break up and there're gaps in them. I understand why that happens with my code - because OpenGL approximates fragment's position as being too far from the point that I calculate, so it marks it as not belonging to a line.
I am passing the actual world positions of the plane surface vectors to my shader - that's how I can calculate it.
I've been playing with the algorithm for an hour, but can't seem to get good results.
The best idea I've tried was to include a small coefficient that grows the further the line gets from the camera - but the results are underwhelming. I calculated the coefficient linearly, but I guess I need some smarter formula to go that route, because the rate at which the lines grow thinner on the screen isn't linear. I can't figure this out so far though. Currently it either makes close lines too thick, which is undesirable, or still has the same problem for distant lines.
To simplify, I'm currently only drawing X-axis lines
I'm including a piece of shader code and a screenshot of the problem.
#version 300 es
precision highp float;
precision highp int;
in highp vec3 vertexPosition;
out mediump vec4 fragColor;
void main()
{
highp float lineWidth = 0.2;
highp float squareSize = 5.0f;
highp int roundX = int(vertexPosition.x / squareSize);
highp int roundY = int(vertexPosition.z / squareSize);
highp float remainderX = vertexPosition.x - float(roundX)*squareSize;
highp float remainderY = vertexPosition.x - float(roundY)*squareSize;
// this is the small coefficient I was trying to add to linewidth
highp float test = abs(0.08 * float(roundX));
if (abs(remainderX) <= (lineWidth))
{
fragColor = vec4(1,0,0, 1);
}
else
{
fragColor = vec4(0.8,0.8,0.8, 1);
}
}
The first answer fixes the main problem with lines breaking, but introduces a visual bug. Gonna go and try to find out why. Anyway, this is already a good idea! But as you can see the lines get wider towards the end.
Edit: Found it. Just removed the Z coordinate from vertexPosition before doing dFdy. Now all I need it a way to make the lines smoother and not staircase-like.
p.s. Don't look at how optimized the code is - I'm currently just searching for the right idea
p.p.s. If someone can tell me how to do simple antialiasing for this example - this also would be most welcome.
It is important that roundX is rounded (round) to the nearest integer, rather than truncated:
highp int roundX = int(round(vertexPosition.x / squareSize));
or
highp int roundX = int(vertexPosition.x / squareSize + 0.5 * sign(vertexPosition.x));
A possible solution is to get the partial derivative of vertexPosition.xy along the y axis of the viewport by dFdy.
The length of the partial derivative of vertexPosition.xy gives the distance between 2 fragments in model space. Thus the minimum thickness of a line can be defined:
vec2 dy = dFdy(vertexPosition.xy);
float minWidth = length(dy);
float w = step(max(lineWidth, minWidth), abs(remainderX));
fragColor = mix(vec4(1.0, 0.0, 0.0, 1.0), vec4(0.8, 0.8, 0.8, 1.0), w);
For smoother lines, you have to interpolate the line color and the ground color. Interpolate if abs(remainderX) is between min(lineWidth, minWidth) and max(lineWidth, minWidth). Use smoothstep for the interpolation. e.g.:
highp int roundX = int(round(vertexPosition.x / squareSize));
highp float remainderX = vertexPosition.x - float(roundX)*squareSize;
vec2 dy = dFdy(vertexPosition.xy);
float minWidth = length(dy);
float w = smoothstep(min(lineWidth, minWidth), max(lineWidth, minWidth), abs(remainderX));
fragColor = mix(vec4(1.0, 0.0, 0.0, 1.0), vec4(0.8, 0.8, 0.8, 1.0), w);
See the Three.js example, which uses the shader:
(function onLoad() {
var camera, scene, renderer, orbitControls;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 300);
camera.position.set(10, 15, -60);
loader = new THREE.TextureLoader();
loader.setCrossOrigin("");
scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
scene.add(camera);
window.onresize = resize;
orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
var helper = new THREE.GridHelper(400, 10);
helper.material.opacity = 0.25;
helper.material.transparent = true;
scene.add(helper);
var axis = new THREE.AxesHelper(1000);
scene.add(axis);
var material = new THREE.ShaderMaterial({
vertexShader: document.getElementById('vertex-shader').textContent,
fragmentShader: document.getElementById('fragment-shader').textContent,
});
material.extensions = {
derivatives: true
}
var geometry = new THREE.BoxGeometry( 100, 0.1, 100 );
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
}
function resize() {
var aspect = window.innerWidth / window.innerHeight;
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = aspect;
camera.updateProjectionMatrix();
}
function animate() {
requestAnimationFrame(animate);
orbitControls.update();
render();
}
function render() {
renderer.render(scene, camera);
}
})();
<script type='x-shader/x-vertex' id='vertex-shader'>
varying vec3 vertexPosition;
void main() {
vertexPosition = position.zyx;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
</script>
<script type='x-shader/x-fragment' id='fragment-shader'>
precision highp float;
varying vec3 vertexPosition;
int round(float x)
{
return int(x + 0.5 * sign(x));
}
void main(){
vec4 fragColor;
highp float lineWidth = 0.2;
highp float squareSize = 5.0;
highp int roundX = round(vertexPosition.x / squareSize);
highp float remainderX = vertexPosition.x - float(roundX)*squareSize;
vec2 dy = dFdy(vertexPosition.xy);
float minWidth = length(dy);
float w = smoothstep(min(lineWidth, minWidth), max(lineWidth, minWidth), abs(remainderX));
//float w = step(max(lineWidth, minWidth), abs(remainderX));
fragColor = mix(vec4(1.0, 0.0, 0.0, 1.0), vec4(0.8, 0.8, 0.8, 1.0), w);
gl_FragColor = fragColor;
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
I'm trying to make a Mandelbrot set explorer, which will shade the pixels on the screen based on its coordinate in the window. I've done this before without using shaders but its extremely slow. I can't figure out how to get the position of the fragment so that I can use the algorithm I've already developed to render the Mandelbrot set.
I'm using ljgwl 3. I've been researching all day on how to do this, and I can't find any comprehensive findings on how to get the coordinates. It seems like gl_FragCoord should work and then I could use gl_FragCoord.x and gl_FragCoord.y to get the x and y values, which is all I need for the algorithm, but my screen always ends up being all red. I'm not passing any info from the vertex shader into my fragment shader because I need to render the color of each coordinate in the Mandelbrot based on its x and y values, so the vertex positions aren't helpful (I also don't understand how to get those).
Here is my fragment shader:
in vec4 gl_FragCoord;
uniform vec2 viewportDimensions;
uniform float minX;
uniform float maxX;
uniform float minY;
uniform float maxY;
vec3 hsv2rgb(vec3 c){
vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}
void main(){
float x = gl_FragCoord.x;
float y = gl_FragCoord.y;
vec2 c = vec2((x* (maxX-minX) / viewportDimensions.x + minX), (y*(maxY-minY)/ viewportDimensions.y + minY));
vec2 z = c;
float limit = 1000;
float iterations = 0;
for(int i = 0; i < int(limit); i++){
float t = 2.0 * z.x * z.y + c.y;
z.x = z.x * z.x - z.y * z.y + c.x;
z.y = t;
if(z.x * z.x + z.y *z.y > 4){
break;
}
iterations += 1.0;
}
float itRGB = iterations/limit;
vec3 hsv = vec3(itRGB, 1.0, 1.0);
vec3 rgb = hsv2rgb(hsv);
gl_FragColor = vec4(rgb, 1);
}
I thought that I could use gl_FragCoord without declaring it as in first but it doesn't work either way. vec2 c is attempting to map the current coordinate to a coordinate in the complex number grid based on current resolution of the window.
This is all that's in my vertex shader:
void main(){
gl_Position = ftransform();
}
And the relevant bit of my client code:
glBegin(GL_POLYGON);
glVertex2f(-1f, -1f);
glVertex2f(1f, -1f);
glVertex2f(1f, 1f);
glVertex2f(-1f, 1f);
glEnd();
This is running in my window loop, and just creates the square where the mandelbrot is supposed to render.
This is the output of my working java Mandelbrot program which doesn't use shaders:
This is the output of my shader program:
Fullscreen:
I also have no clue as to how to be able to resize the window properly without the black bars. I am attempting to do this with vec2 c in my code above as I have set the uniforms to be the windows height and width and am using that when mapping the coordinate to the complex number plane, but as gl_FragCoord doesn't seem to work then neither should this. A link to a current guide on lgjwl screen resizing based on glfwCreateWindow would be vastly appreciated.
gl_FragCoord is a built-in input variables, it isn't necessary to declared the input variable gl_FragCoord. The x and y coordinate are window (pixel) coordinate.
The lower left of gl_FragCoord is (0.5, 0.5) and the upper right is (W-0.5, H-0.5), where W and H are the width and the height of the viewport.
You've to map gl_FragCoord.x to the range [minX, maxX] and gl_FragCoord.y to the range [minY, maxy].
I recommend to us the GLSL function mix for this.
viewportDimensions is assumed to contain the with and the height of the viewport rectangle in window (pixel) coordinates.
vec2 c = mix(vec2(minX, minY), vec2(maxX, maxY), gl_FragCoord.xy / viewportDimensions.xy);
See the (WebGL) example, where I applied the suggestions to the the fragment shader of the question.
The bounds are initialized as follows
minX = -2.5
minY = -2.0
maxX = 1.5
maxY = 2.0
(function loadscene() {
var canvas, gl, vp_size, prog, bufObj = {};
function initScene() {
canvas = document.getElementById( "ogl-canvas");
gl = canvas.getContext( "experimental-webgl" );
if ( !gl )
return;
progDraw = gl.createProgram();
for (let i = 0; i < 2; ++i) {
let source = document.getElementById(i==0 ? "draw-shader-vs" : "draw-shader-fs").text;
let shaderObj = gl.createShader(i==0 ? gl.VERTEX_SHADER : gl.FRAGMENT_SHADER);
gl.shaderSource(shaderObj, source);
gl.compileShader(shaderObj);
let status = gl.getShaderParameter(shaderObj, gl.COMPILE_STATUS);
if (!status) alert(gl.getShaderInfoLog(shaderObj));
gl.attachShader(progDraw, shaderObj);
gl.linkProgram(progDraw);
}
status = gl.getProgramParameter(progDraw, gl.LINK_STATUS);
if ( !status ) alert(gl.getProgramInfoLog(progDraw));
progDraw.inPos = gl.getAttribLocation(progDraw, "inPos");
progDraw.minX = gl.getUniformLocation(progDraw, "minX");
progDraw.maxX = gl.getUniformLocation(progDraw, "maxX");
progDraw.minY = gl.getUniformLocation(progDraw, "minY");
progDraw.maxY = gl.getUniformLocation(progDraw, "maxY");
progDraw.viewportDimensions = gl.getUniformLocation(progDraw, "viewportDimensions");
gl.useProgram(progDraw);
var pos = [ -1, -1, 1, -1, 1, 1, -1, 1 ];
var inx = [ 0, 1, 2, 0, 2, 3 ];
bufObj.pos = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, bufObj.pos );
gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( pos ), gl.STATIC_DRAW );
bufObj.inx = gl.createBuffer();
bufObj.inx.len = inx.length;
gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, bufObj.inx );
gl.bufferData( gl.ELEMENT_ARRAY_BUFFER, new Uint16Array( inx ), gl.STATIC_DRAW );
gl.enableVertexAttribArray( progDraw.inPos );
gl.vertexAttribPointer( progDraw.inPos, 2, gl.FLOAT, false, 0, 0 );
gl.enable( gl.DEPTH_TEST );
gl.clearColor( 0.0, 0.0, 0.0, 1.0 );
window.onresize = resize;
resize();
requestAnimationFrame(render);
}
function resize() {
//vp_size = [gl.drawingBufferWidth, gl.drawingBufferHeight];
vp_size = [window.innerWidth, window.innerHeight];
//vp_size = [256, 256]
canvas.width = vp_size[0];
canvas.height = vp_size[1];
}
function render(deltaMS) {
gl.viewport( 0, 0, canvas.width, canvas.height );
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );
gl.uniform1f(progDraw.minX, -2.5);
gl.uniform1f(progDraw.minY, -2.0);
gl.uniform1f(progDraw.maxX, 1.5);
gl.uniform1f(progDraw.maxY, 2.0);
gl.uniform2f(progDraw.viewportDimensions, canvas.width, canvas.height);
gl.drawElements( gl.TRIANGLES, bufObj.inx.len, gl.UNSIGNED_SHORT, 0 );
requestAnimationFrame(render);
}
initScene();
})();
html,body { margin: 0; overflow: hidden; }
<script id="draw-shader-vs" type="x-shader/x-vertex">
precision mediump float;
attribute vec2 inPos;
void main()
{
gl_Position = vec4( inPos.xy, 0.0, 1.0 );
}
</script>
<script id="draw-shader-fs" type="x-shader/x-fragment">
precision mediump float;
uniform vec2 viewportDimensions;
uniform float minX;
uniform float maxX;
uniform float minY;
uniform float maxY;
vec3 hsv2rgb(vec3 c){
vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}
void main()
{
float x = gl_FragCoord.x;
float y = gl_FragCoord.y;
vec2 c = mix(vec2(minX, minY), vec2(maxX, maxY), gl_FragCoord.xy / viewportDimensions.xy);
vec2 z = c;
float limit = 64.0;
float iterations = 0.0;
for(int i = 0; i < 64; i++){
float t = 2.0 * z.x * z.y + c.y;
z.x = z.x * z.x - z.y * z.y + c.x;
z.y = t;
if(z.x * z.x + z.y *z.y > 4.0){
break;
}
iterations += 1.0;
}
float itRGB = iterations/limit;
vec3 hsv = vec3(itRGB, 1.0, 1.0);
vec3 rgb = hsv2rgb(hsv);
gl_FragColor = vec4(rgb, 1);
}
</script>
<canvas id="ogl-canvas" style="border: none"></canvas>
Introduction to the problem:
I'm working on a game engine using the LWJGL library following this tutorial. However, I'm trying to make it so that there is a real division between the main engine and the game itself. I've therefore complicated the project a whole lot and I think this is causing some problems as the ProjectionMatrix doesn't work as explained in the video.
What am I doing:
Creating the ProjectionMatrix:
In order to create a ProjectionMatrix I created the a method which creates it for me:
public static Matrix4f createProjectionMatrix(float aspectRatio, float fov, float nearPlane, float farPlane) {
float y_scale = (float) ((1f / Math.tan(Math.toRadians(fov / 2f))) * aspectRatio);
float x_scale = y_scale / aspectRatio;
float frustum_length = nearPlane - farPlane;
Matrix4f projectionMatrix = new Matrix4f();
projectionMatrix.m00 = x_scale;
projectionMatrix.m11 = y_scale;
projectionMatrix.m22 = -((farPlane + nearPlane) / frustum_length);
projectionMatrix.m23 = -1;
projectionMatrix.m32 = -((2 * nearPlane * farPlane) / frustum_length);
projectionMatrix.m33 = 0;
return projectionMatrix;
}
I create the ProjectionMatrix with the following values:
aspectRatio = width/height = 640/480 = 1.33333
fov = 100
nearPlane = -0.5
farPlane = 100
This results in the following values for my ProjectionMatrix:
0.83909965 0.0 0.0 0.0
0.0 0.83909965 0.0 0.0
0.0 0.0 0.9990005 -0.9995003
0.0 0.0 -1.0 0.0
Using the ProjectionMatrix:
In order to use the ProjectionMatrix I created the following shaders:
vertex.vs:
#version 150
in vec3 position;
in vec2 textureCoordinates;
out vec2 passTextureCoordinates;
uniform mat4 transformationMatrix;
uniform mat4 projectionMatrix;
uniform int useProjectionMatrix;
void main(void){
if (useProjectionMatrix == 1) {
gl_Position = projectionMatrix * transformationMatrix * vec4(position,1.0);
} else {
gl_Position = transformationMatrix * vec4(position,1.0);
}
passTextureCoordinates = textureCoordinates;
}
fragment.fs:
#version 150
in vec2 passTextureCoordinates;
out vec4 out_Color;
uniform sampler2D textureSampler;
void main(void){
out_Color = texture(textureSampler,passTextureCoordinates);
}
Finally in order to render the entity I've created the following renderer class:
public class TexturedEntityRenderer extends AbstractEntityRenderer{
private float aspectRatio;
private float fov;
private float nearPlane;
private float farPlane;
public void prepare() {
GL11.glClearColor(0,0,0,1);
GL11.glClear(GL11.GL_COLOR_BUFFER_BIT);
}
public void render (AbstractEntity entity, AbstractShader shader) {
if(shader instanceof TexturedEntityShader) {
if(entity.getModel() instanceof TexturedModel) {
TexturedModel model = (TexturedModel)entity.getModel();
GL30.glBindVertexArray(model.getVaoID());
GL20.glEnableVertexAttribArray(0);
GL20.glEnableVertexAttribArray(1);
Matrix4f transformationMatrix = MatrixMaths.createTransformationMatrix(entity.getPosition(), entity.getRx(), entity.getRy(), entity.getRz(), entity.getScale());
((TexturedEntityShader)shader).loadTransformationMatrix(transformationMatrix);
GL13.glActiveTexture(GL13.GL_TEXTURE0);
GL11.glBindTexture(GL11.GL_TEXTURE_2D, ((TexturedModel)entity.getModel()).getTexture().getTextureID());
GL15.glBindBuffer(GL15.GL_ARRAY_BUFFER, model.getVaoID());
GL11.glDrawElements(GL11.GL_TRIANGLES, model.getVertexCount(), GL11.GL_UNSIGNED_INT, 0);
GL20.glDisableVertexAttribArray(0);
GL20.glDisableVertexAttribArray(1);
GL30.glBindVertexArray(0);
} else {
ExceptionThrower.throwException(new ModelInvalidException());
}
} else {
ExceptionThrower.throwException(new ShaderIncompatableException(shader.toString()));
}
}
public void setup(AbstractShader shader) {
nearPlane = Float.parseFloat(OptionHandler.getProperty(GraphicOptions.WINDOWNEARPLANE_KEY, OptionHandler.GRAPHIC_OPTION_ID));
farPlane = Float.parseFloat(OptionHandler.getProperty(GraphicOptions.WINDOWFARPLANE_KEY, OptionHandler.GRAPHIC_OPTION_ID));
aspectRatio = DisplayManager.getWidth() / DisplayManager.getHeight();
fov = Float.parseFloat(OptionHandler.getProperty(GraphicOptions.WINDOWFOV_KEY, OptionHandler.GRAPHIC_OPTION_ID));
((TexturedEntityShader)shader).loadProjectionMatrix(MatrixMaths.createProjectionMatrix(aspectRatio, fov, nearPlane, farPlane));
((TexturedEntityShader)shader).loadUseProjectionMatrix();
}
}
The Optionhandler.getProperty() function in the setup() returns the property for a given key(like fov or nearPlane value) from a text file. (I've checked that this works by printing all loaded options.) Also, the DisplayManager.getWidth() and DisplayManager.getHeight() functions, obviously, obtain the width and height for calculating the aspectRatio variable.
Updating the entity:
Last but not least, I'm updating the entity using a class called EntityModifier which looks like this:
public class EntityModifier {
private Vector3f dposition;
private float drx;
private float dry;
private float drz;
private float dscale;
public BasicEntityModifier(Vector3f dposition, float drx, float dry, float drz, float dscale) {
this.dposition = dposition;
this.drx = drx;
this.dry = dry;
this.drz = drx;
this.dscale = dscale;
}
public Vector3f getDposition() {
return dposition;
}
public float getDrx() {
return drx;
}
public float getDry() {
return dry;
}
public float getDrz() {
return drz;
}
public float getDscale() {
return dscale;
}
#Override
public String toString() {
return "BasicEntityModifier [dposition=" + dposition + ", drx=" + drx + ", dry=" + dry + ", drz=" + drz + ", dscale=" + dscale + "]";
}
}
Each entity I create has one of these classes and I cal call an update method which adds the values to the entity's transformation:
public void update() {
increasePosition(modifier.getDposition().getX(),modifier.getDposition().getY(),modifier.getDposition().getZ());
increaseRotation(modifier.getDrx(), modifier.getDry(), modifier.getDrz());
increaseScale(modifier.getDscale());
}
private void increasePosition(float dx, float dy, float dz) {
position.x += dx;
position.y += dy;
position.z += dz;
}
private void increaseRotation(float drx, float dry, float drz) {
rx += drx;
ry += dry;
rz += drz;
}
private void increaseScale(float dscale) {
scale += dscale;
}
The problem:
I'm able to change the position of the x and y values of the entity normally but whenever I change the z position, using an EntityModifier, the entity loads but then dissapears from the screen. It's loaded for about 60 frames before dissapearing and changing dz's value doesn't seem to affect the speed at which it dissapears in any way(It does, see EDIT 2). Also there the entity doesn't have the scale effect as shown in the tutorial here (same link but with timestamp).
Changing the dz value to 0 stops the dissapearing of the entity.
What is going on here? How can I fix this?
EDIT:
I've been pointed out in the comments that the nearPlane value should be positive so I changed it to 0.5 but I still get the same results. I also changed: float frustum_length = nearPlane - farPlane; to float frustum_length = farPlane - nearPlane; which was also suggested there (this also did not solve the problem).
EDIT 2:
After some more investigation I found a few intresting things:
1. Changing the speed at which the z value changes does affect how long it takes for the entity to dissapear. After finding this out I tried timing a few different dz(with dz being the change per frame of z) values and I got this:
`for dz = -0.002 -> frames before dissapear: 515 frames.`
`for dz = -0.001 -> frames before dissapear: 1024 frames.`
`for dz = 0.02 -> frames before dissapear: 63 frames.`
If we take into account reaction times (I made the program output the total ammount of rendered frames on closure and just closed it as fast as possible when the entity dissapeared) we can calculate the values for z at which the entity dissapears.
-0.002 * 515 ≈ -1
-0.001 * 1024 ≈ -1
0.02 * 63 ≈ 1
This probably has to do with the way the coordinate system works in OpenGL but it still doesn't explain why the entity isn't becoming smaller as it does in the tutorial mentioned above.
2. Removing the code which adds the ProjectionMatrix to the renderer class does not change the behavior. This means the error is elsewere.
New Problem:
I think there is no problem with the ProjectionMatrix (or at least not a problem that is causing this behavior) but the problem is with the entity's position surpassing 1 or -1 on the z axes. However this still doesn't explain why there is no "zoom effect". Therefor I don't think that restricting the z movement between -1 and 1 will solve this problem, infact, I think it will work against us as the entity should not be rendered anyway if it's totaly "zoomed" out or in.
What can cause this problem if it isn't the ProjectionManager?
EDIT 3:
Someone on reddit pointed out that the following classes might also be of intrest for solving the problem:
AbstractShader: contains basic shader functionality common for all shader classes.
TexturedEntityShader: used to render a texturedEntity (shown above)
DisplayManager: class which handles rendering.
EDIT 4:
After some more discussion on reddit about this problem we've come across a problem and were able to fix it: The value for useProjectionMatrix was not loaded because the shader was stopped when I tried to load it. Changing the loadUseProjectionMatrix() method to:
public void loadUseProjectionMatrix() {
super.start();
super.loadBoolean(useProjectionMatrixLocation, useProjectionMatrix);
System.out.println("loaded useProjectionMatrix: " + useProjectionMatrix + "\n\n");
super.stop();
}
seems to partially solve the problem as the projectionMatrix now can be used inside the shader (before it would not be used due to the fact that the useProjectionMatrix value would always be 0 as we did not load a value for it.).
However, this did not fix the entire problem as there is still an issue with the projectionMatrix I think. The entity does not want to render at all when using the projectionMatrix but it renders fine when not using it. I've tried hardcoding the values of the projectionMatrix by using the following shader:
#version 150
in vec3 position;
in vec2 textureCoordinates;
out vec2 passTextureCoordinates;
uniform mat4 transformationMatrix;
uniform mat4 projectionMatrix;
uniform int useProjectionMatrix;
mat4 testMat;
void main(void){
testMat[0] = vec4(0.83909965, 0, 0, 0);
testMat[1] = vec4(0, 0.83909965, 0, 0);
testMat[2] = vec4(0, 0, 0.9990005, -0.9995003);
testMat[3] = vec4(0, 0, -1, 0);
if (true) {
gl_Position = testMat * transformationMatrix * vec4(position,1.0);
} else {
gl_Position = transformationMatrix * vec4(position,1.0);
}
passTextureCoordinates = textureCoordinates;
}
However that does not seem to work. Are these values OK?
Fow who wants to see it here are the 2 posts I created on reddit about this problem: post 1, post 2.
I'm trying to implement depth testing for 2D isometric game. To get something working, I started off with this sample, but I cannot get it to work correctly.
I'm trying to draw 2 images in a specific order.
first.png
second.png
first.png is drawn first, and second.png is drawn on top. Using fragment shader, I compute that red color has lower depth than green color, hence green fragments should be discarded when drawn on top of red fragments. The end result is that when second.png is drawn directly on top of first.png, the resulting square colored only red.
At the end of render function, I get the pixels of depth buffer, and looping over them I check if the values have been changed from defaults ones. It seems that no matter what I do, the values in depth buffer never change.
The depth test itself is working, if I set green fragments to depth=1.0, red fragments to depth=0.0 and my depth function is GL_LESS, only red fragments are drawn, but the depth buffer is not changed.
The code is in Java, but OpenGL functions are the same.
private SpriteBatch mBatch;
private Texture mTexture1;
private Texture mTexture2;
#Override
public void create() {
mBatch = new SpriteBatch();
mBatch.setShader(new ShaderProgram(Gdx.files.internal("test.vsh"), Gdx.files.internal("test.fsh")));
mTexture1 = new Texture("first.png");
mTexture2 = new Texture("second.png");
Gdx.gl20.glEnable(GL20.GL_DEPTH_TEST);
Gdx.gl20.glDepthFunc(GL20.GL_LESS);
Gdx.gl20.glDepthMask(true);
}
#Override
public void render() {
Gdx.gl20.glClear(GL20.GL_COLOR_BUFFER_BIT | GL20.GL_DEPTH_BUFFER_BIT);
mBatch.begin();
float scale = 4.0f;
float x = Gdx.graphics.getWidth() / 2;
float y = Gdx.graphics.getHeight() / 2;
mBatch.draw(mTexture1, x - mTexture1.getWidth() / 2 * scale, y - mTexture1.getHeight() / 2 * scale,
mTexture1.getWidth() * scale, mTexture1.getHeight() * scale);
mBatch.flush();
mBatch.draw(mTexture2, x - mTexture2.getWidth() / 2 * scale, y - mTexture2.getHeight() / 2 * scale,
mTexture2.getWidth() * scale, mTexture2.getHeight() * scale);
mBatch.end();
int width = Gdx.graphics.getWidth();
int height = Gdx.graphics.getHeight();
FloatBuffer buffer = BufferUtils.newFloatBuffer(width * height);
Gdx.gl20.glReadPixels(0, 0, width, height, GL20.GL_DEPTH_COMPONENT, GL20.GL_FLOAT,
buffer);
for (int i = 0; i < width * height; i++) {
float pixel = buffer.get(i);
if (pixel != 1.0f && pixel != 0.0f) {
// why is this never thrown??
// it means depth buffer wasn't changed.
throw new IllegalStateException("OMG IT WORKS!! " + pixel);
}
}
if (Gdx.gl20.glGetError()!=0) {
throw new Error("OPENGL ERROR: " + Gdx.gl20.glGetError());
}
}
Vertex shader
#ifdef GL_ES
precision mediump float;
#endif
attribute vec3 a_position;
attribute vec4 a_color;
attribute vec2 a_texCoord0;
uniform mat4 u_projTrans;
varying vec4 v_color;
varying vec2 v_texCoord;
void main()
{
gl_Position = u_projTrans * vec4(a_position, 1);
v_color = a_color * 2.0;
v_texCoord = a_texCoord0;
}
Fragment shader
#ifdef GL_ES
precision mediump float;
#endif
uniform sampler2D u_texture;
varying vec4 v_color;
varying vec2 v_texCoord;
void main()
{
vec4 texel = v_color * texture2D(u_texture, v_texCoord);
if (texel.r > texel.g)
{
gl_FragDepth = 0.0;
}
else
{
gl_FragDepth = 0.5;
}
gl_FragColor = texel;
}
Ok, I found the problem.
SpriteBatch.begin() does
glDepthMask(false)
Setting glDepthMask to false prevents OpenGL from writing to depth buffer.
The solution is to call glDepthMask(true) after SpriteBatch.begin()