Page 1 of 1

Depth Map

Posted: Fri Feb 08, 2019 5:03 pm
by Ats
Hi. I was thinking of a way to draw the depth map out of a scene in ZGE, but since I'm not on a computer, it's only speculations...
I'd like to obtain something like this:

Image

Maybe a simple GLFog can do the trick?
But I think there should be a way to retrieve the depth buffer in opengl. I'll search that when I'll get home :D

Re: Depth Map

Posted: Sat Feb 09, 2019 12:28 am
by Kjell
Hi Ats,
Ats wrote: Fri Feb 08, 2019 5:03 pmMaybe a simple GLFog can do the trick?
It's possible using GL_FOG, but that fog is calculated per-vertex instead of per-fragment. So if you'd have a large floor ( like in your screenshot ) that consists of only 4 vertices, it won't work properly .. you'd need to tessellate the floor to get acceptable results. Here's a example ( try changing the PlaneMesh X/YCount to 0 ).

Code: Select all

<?xml version="1.0" encoding="iso-8859-1" ?>
<ZApplication Name="App" Caption="ZGameEditor application" CameraPosition="0 8 0" CameraRotation="0.08 0 0" FileVersion="2">
  <OnLoaded>
    <ZExternalLibrary ModuleName="opengl32">
      <Source>
<![CDATA[//

const int GL_FOG = 0x0B60;
const int GL_FOG_END = 0x0B64;
const int GL_FOG_MODE = 0x0B65;
const int GL_FOG_COORD_SRC = 0x8450;

void glEnable(int cap){}
void glFogi(int pname, int param){}]]>
      </Source>
    </ZExternalLibrary>
    <ZExpression>
      <Expression>
<![CDATA[//

glFogi(GL_FOG_MODE, 0x2601);
glFogi(GL_FOG_END, 32);
glFogi(GL_FOG_COORD_SRC, 0x8452);
glEnable(GL_FOG);]]>
      </Expression>
    </ZExpression>
    <SpawnModel Model="Model"/>
  </OnLoaded>
  <OnUpdate>
    <ZExpression>
      <Expression>
<![CDATA[//

App.CameraRotation.Y = App.Time/16;

//

float a = App.CameraRotation.Y*PI*2;

App.CameraPosition.X = -sin(a)*16;
App.CameraPosition.Z =  cos(a)*16;]]>
      </Expression>
    </ZExpression>
  </OnUpdate>
  <Content>
    <Model Name="Model" Rotation="0 0.18 0">
      <OnRender>
        <UseMaterial Material="FogMaterial"/>
        <RenderTransformGroup Scale="32 32 1" Translate="0 -4 0" Rotate="0.75 0 0">
          <Children>
            <RenderMesh Mesh="PlaneMesh"/>
          </Children>
        </RenderTransformGroup>
        <RenderTransformGroup Scale="1 1 4" Translate="3 3 0">
          <Children>
            <RenderMesh Mesh="BoxMesh"/>
          </Children>
        </RenderTransformGroup>
        <RenderTransformGroup Scale="1 1 4" Translate="-3 3 0">
          <Children>
            <RenderMesh Mesh="BoxMesh"/>
          </Children>
        </RenderTransformGroup>
        <RenderTransformGroup Scale="2 1 1" Translate="0 3 3">
          <Children>
            <RenderMesh Mesh="BoxMesh"/>
          </Children>
        </RenderTransformGroup>
        <RenderTransformGroup Scale="2 1 1" Translate="0 3 -3">
          <Children>
            <RenderMesh Mesh="BoxMesh"/>
          </Children>
        </RenderTransformGroup>
        <RenderTransformGroup Scale="1 1 4" Translate="3 -3 0">
          <Children>
            <RenderMesh Mesh="BoxMesh"/>
          </Children>
        </RenderTransformGroup>
        <RenderTransformGroup Scale="1 1 4" Translate="-3 -3 0">
          <Children>
            <RenderMesh Mesh="BoxMesh"/>
          </Children>
        </RenderTransformGroup>
        <RenderTransformGroup Scale="2 1 1" Translate="0 -3 3">
          <Children>
            <RenderMesh Mesh="BoxMesh"/>
          </Children>
        </RenderTransformGroup>
        <RenderTransformGroup Scale="2 1 1" Translate="0 -3 -3">
          <Children>
            <RenderMesh Mesh="BoxMesh"/>
          </Children>
        </RenderTransformGroup>
        <RenderTransformGroup Scale="1 2 1" Translate="3 0 3">
          <Children>
            <RenderMesh Mesh="BoxMesh"/>
          </Children>
        </RenderTransformGroup>
        <RenderTransformGroup Scale="1 2 1" Translate="-3 0 3">
          <Children>
            <RenderMesh Mesh="BoxMesh"/>
          </Children>
        </RenderTransformGroup>
        <RenderTransformGroup Scale="1 2 1" Translate="-3 0 -3">
          <Children>
            <RenderMesh Mesh="BoxMesh"/>
          </Children>
        </RenderTransformGroup>
        <RenderTransformGroup Scale="1 2 1" Translate="3 0 -3">
          <Children>
            <RenderMesh Mesh="BoxMesh"/>
          </Children>
        </RenderTransformGroup>
      </OnRender>
    </Model>
    <Mesh Name="BoxMesh">
      <Producers>
        <MeshBox/>
      </Producers>
    </Mesh>
    <Mesh Name="PlaneMesh">
      <Producers>
        <MeshBox XCount="31" YCount="31" Grid2DOnly="255"/>
      </Producers>
    </Mesh>
    <Material Name="FogMaterial" Shading="1" Light="0"/>
  </Content>
</ZApplication>
You probably want to grab the depth-buffer data using glReadPixels .. or just use a shader :wink:

K

Re: Depth Map

Posted: Sat Feb 09, 2019 9:01 am
by Ats
There's no difference between a 32x32 and a 0x0 floor on my computer. But I already seen the planet's ground blinking in Omeganaut on other computers or Android devices. My ground model have a scale of 500x500 and the ground mesh is only 4 vertices. I think I saw that on my old laptop. I'll try to tessellate on it.

Re: Depth Map

Posted: Sat Feb 09, 2019 10:31 am
by Ats
So I'm currently playing with shaders, because I realized I can't afford to switch textures on each and every model of my scene in order to render the depth map. But since it's my first with shaders, I'm not sure what I'm doing. OpenGL ES seems to lack a bunch of useful functions but I managed to get that by adapting an example I've found:

Code: Select all

<?xml version="1.0" encoding="iso-8859-1" ?>
<ZApplication Name="App" Caption="ZGameEditor application" CameraPosition="-15.7819 8 -2.6327" CameraRotation="0.08 5.2763 0" FileVersion="2">
  <OnLoaded>
    <ZExternalLibrary ModuleName="opengl32">
      <Source>
<![CDATA[//

const int GL_FOG = 0x0B60;
const int GL_FOG_END = 0x0B64;
const int GL_FOG_MODE = 0x0B65;
const int GL_FOG_COORD_SRC = 0x8450;

void glEnable(int cap){}
void glFogi(int pname, int param){}]]>
      </Source>
    </ZExternalLibrary>
    <ZExpression>
      <Expression>
<![CDATA[//

glFogi(GL_FOG_MODE, 0x2601);
glFogi(GL_FOG_END, 32);
glFogi(GL_FOG_COORD_SRC, 0x8452);
glEnable(GL_FOG);]]>
      </Expression>
    </ZExpression>
    <SpawnModel Model="Model"/>
  </OnLoaded>
  <OnUpdate>
    <ZExpression>
      <Expression>
<![CDATA[//

App.CameraRotation.Y = App.Time/16;

//

float a = App.CameraRotation.Y*PI*2;

App.CameraPosition.X = -sin(a)*16;
App.CameraPosition.Z =  cos(a)*16;]]>
      </Expression>
    </ZExpression>
  </OnUpdate>
  <Content>
    <Model Name="Model" Rotation="0 0.18 0">
      <OnRender>
        <UseMaterial Material="FogMaterial"/>
        <RenderTransformGroup Scale="32 32 1" Translate="0 -4 0" Rotate="0.75 0 0">
          <Children>
            <RenderMesh Mesh="PlaneMesh"/>
          </Children>
        </RenderTransformGroup>
        <RenderTransformGroup Scale="1 1 4" Translate="3 3 0">
          <Children>
            <RenderMesh Mesh="BoxMesh"/>
          </Children>
        </RenderTransformGroup>
        <RenderTransformGroup Scale="1 1 4" Translate="-3 3 0">
          <Children>
            <RenderMesh Mesh="BoxMesh"/>
          </Children>
        </RenderTransformGroup>
        <RenderTransformGroup Scale="2 1 1" Translate="0 3 3">
          <Children>
            <RenderMesh Mesh="BoxMesh"/>
          </Children>
        </RenderTransformGroup>
        <RenderTransformGroup Scale="2 1 1" Translate="0 3 -3">
          <Children>
            <RenderMesh Mesh="BoxMesh"/>
          </Children>
        </RenderTransformGroup>
        <RenderTransformGroup Scale="1 1 4" Translate="3 -3 0">
          <Children>
            <RenderMesh Mesh="BoxMesh"/>
          </Children>
        </RenderTransformGroup>
        <RenderTransformGroup Scale="1 1 4" Translate="-3 -3 0">
          <Children>
            <RenderMesh Mesh="BoxMesh"/>
          </Children>
        </RenderTransformGroup>
        <RenderTransformGroup Scale="2 1 1" Translate="0 -3 3">
          <Children>
            <RenderMesh Mesh="BoxMesh"/>
          </Children>
        </RenderTransformGroup>
        <RenderTransformGroup Scale="2 1 1" Translate="0 -3 -3">
          <Children>
            <RenderMesh Mesh="BoxMesh"/>
          </Children>
        </RenderTransformGroup>
        <RenderTransformGroup Scale="1 2 1" Translate="3 0 3">
          <Children>
            <RenderMesh Mesh="BoxMesh"/>
          </Children>
        </RenderTransformGroup>
        <RenderTransformGroup Scale="1 2 1" Translate="-3 0 3">
          <Children>
            <RenderMesh Mesh="BoxMesh"/>
          </Children>
        </RenderTransformGroup>
        <RenderTransformGroup Scale="1 2 1" Translate="-3 0 -3">
          <Children>
            <RenderMesh Mesh="BoxMesh"/>
          </Children>
        </RenderTransformGroup>
        <RenderTransformGroup Scale="1 2 1" Translate="3 0 -3">
          <Children>
            <RenderMesh Mesh="BoxMesh"/>
          </Children>
        </RenderTransformGroup>
      </OnRender>
    </Model>
    <Mesh Name="BoxMesh">
      <Producers>
        <MeshBox/>
      </Producers>
    </Mesh>
    <Mesh Name="PlaneMesh">
      <Producers>
        <MeshBox XCount="32" YCount="32" Grid2DOnly="255"/>
      </Producers>
    </Mesh>
    <Material Name="FogMaterial" Shading="1" Light="0" Shader="DepthMapShader">
      <Textures>
        <MaterialTexture Texture="TextureBitmap" TexCoords="1"/>
      </Textures>
    </Material>
    <Shader Name="DepthMapShader">
      <FragmentShaderSource>
<![CDATA[void main()
{
  float ndcDepth =
    (2.0 * gl_FragCoord.z - gl_DepthRange.near - gl_DepthRange.far) /
    (gl_DepthRange.far - gl_DepthRange.near);
    float clipDepth = ndcDepth / gl_FragCoord.w;
    gl_FragColor = vec4((1 - clipDepth * 0.012));
}]]>
      </FragmentShaderSource>
    </Shader>
    <Bitmap Name="TextureBitmap">
      <Producers>
        <BitmapCells/>
      </Producers>
    </Bitmap>
  </Content>
</ZApplication>
And then again, the shader is applying on the material, so I'll have to switch textures on my models anyway...
In fact, what I'd like to achieve is to render a depth map image of the scene to complete the screenshot function and then play with depthy: http://depthy.me/

Re: Depth Map

Posted: Sat Feb 09, 2019 11:53 am
by Kjell
Ah,

In that case i'd simply use gDEBugger to grab the depth and back / front buffer :wink:

Image

Depthy did a pretty shoddy job with the Pac-Man example though ..

Image

K

Re: Depth Map

Posted: Sun Feb 10, 2019 7:13 pm
by Ats
Hahaha, gDEBugger works, but it's so NOT user-friendly :D

Anyway, since there are no hairy texture to hide the blurry effect between 3D objects and the background, you have to be more subtle with your depth map. By converting the 0-255 range to, let's say, 200-255 (I'm still trying to find the best range for a nice looking effect).

Image

I'm waiting for facebook to accept the upload of images with depth maps without having to have the latest iphone...
(ugly exemple here: https://www.facebook.com/metronomy/post ... 3878316084)

Edit:
Here's the original depth map for Pac-Man compared to the tweaked one for a better effect:
Image
Image

And the result:
Image

Re: Depth Map

Posted: Wed Feb 13, 2019 9:09 pm
by Ats
Here's another proof of concept with some blur in order to fake the focale, quickly made in photoshop:
http://depthy.me/#/ip/tnZ1DaR

I was wondering, is it possible to assign a shader to a material on the fly?
Something like:

Code: Select all

if (PhotoMode) MyMaterial.Shader = DepthShader;