<p>I made a plane in THREEjs using Mesh, PlaneGeometry and ShaderMaterial. It's a very simple/basic form.
I applied a simple phormula to make the plain more steep. Now I'm trying to make the lower surface darker than the higher surface. Here is what I tried.</p>
<p>Vertex shader:</p>
<pre><code>    varying vec3 vColor;
    varying vec3 test;

    void main(void) {
        float amp = 2.5;
        float z = amp * sin(position.x*0.2)  * cos(position.y*0.5); //this makes the surface steeper
        test = vec3(1, 1, -z); //this goes to fragment shader

        gl_Position = projectionMatrix * modelViewMatrix * vec4(position.x, position.y, z, 1.0);
    }
</code></pre>
<p>Fragment shader:</p>
<pre><code>    precision mediump float;
    varying vec3 test;
    void main(void) {   
        vec3 st = gl_FragCoord.xyz/test;
        gl_FragColor = vec4(st.xyz, 1.0);
    }
</code></pre>
<p>Result:</p>
<p><a href="https://i.sstatic.net/OpeCQ.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/OpeCQ.png" alt="Result from this" /></a></p>
<p>This result is not desirable, since the contrast between top and down is too aggressive and I'd like the lower surface less white. What do I have to change to accomplish this?</p>

CC BY-SA 4.0
2022-10-27T20:23:53.903Z
gl_Fragcoord gives you the coordinates with respect to the camera orientation and projection... So it is not the height of the world... When moving the camera, your colors would change... It seems to me, that you want the world coordinates. Am I right? In case I am, you could varying the model vertex position from vertex to fragment shader.
Thomas
CC BY-SA 4.0
2022-11-01T06:50:39.593Z
Yeah, don't understand the gl_FragCoord there. It's supposed to give screen space coordinates afaik. You could just try to divide the color by the steepness?
gallickgunner
<shader><glsl><javascript><three.js>
How to make elevated parts of a steep plane seem darker than the lower surface? [GLSL]
Jonas
# How to make elevated parts of a steep plane seem darker than the lower surface? [GLSL]

(Asked by: username_0 on 2022-10-27)

I made a plane in THREEjs using Mesh, PlaneGeometry and ShaderMaterial. It's a very simple/basic form.
I applied a simple phormula to make the plain more steep. Now I'm trying to make the lower surface darker than the higher surface. Here is what I tried.

Vertex shader:

```
    varying vec3 vColor;
    varying vec3 test;

    void main(void) {
        float amp = 2.5;
        float z = amp * sin(position.x*0.2)  * cos(position.y*0.5); //this makes the surface steeper
        test = vec3(1, 1, -z); //this goes to fragment shader

        gl_Position = projectionMatrix * modelViewMatrix * vec4(position.x, position.y, z, 1.0);
    }

```

Fragment shader:

```
    precision mediump float;
    varying vec3 test;
    void main(void) {   
        vec3 st = gl_FragCoord.xyz/test;
        gl_FragColor = vec4(st.xyz, 1.0);
    }

```

Result:

[![Result from this](https://i.sstatic.net/OpeCQ.png)](https://i.sstatic.net/OpeCQ.png)

This result is not desirable, since the contrast between top and down is too aggressive and I'd like the lower surface less white. What do I have to change to accomplish this?

**Tags:** shader, glsl, javascript, three.js

> **Comments:**
> **username_1**: gl_Fragcoord gives you the coordinates with respect to the camera orientation and projection... So it is not the height of the world... When moving the camera, your colors would change... It seems to me, that you want the world coordinates. Am I right? In case I am, you could varying the model vertex position from vertex to fragment shader.  
> **username_2**: Yeah, don't understand the gl_FragCoord there. It's supposed to give screen space coordinates afaik. You could just try to divide the color by the steepness?  

---

## 0 answers

