Depth Map

Ats · Post by **Ats** » Fri Feb 08, 2019 5:03 pm

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:

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

Post by **Kjell** » Sat Feb 09, 2019 12:28 am

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

K

Ats · Post by **Ats** » Sat Feb 09, 2019 9:01 am

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.

Ats · Post by **Ats** » Sat Feb 09, 2019 10:31 am

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/

Post by **Kjell** » Sat Feb 09, 2019 11:53 am

Ah,

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

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

K

Ats · Post by **Ats** » Sun Feb 10, 2019 7:13 pm

Hahaha, gDEBugger works, but it's so NOT user-friendly

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).

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:

And the result:

Ats · Post by **Ats** » Wed Feb 13, 2019 9:09 pm

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;

ZGameEditor forum

Depth Map

Depth Map

Re: Depth Map

Re: Depth Map

Re: Depth Map

Re: Depth Map

Re: Depth Map

Re: Depth Map