Issue with global clipping planes and custom shader

A little background:

I am creating some 3D charts, one of them being a “surface” in which I take a plane, and move the Y points based on some data. I also allow the user to “zoom” in on a subsection by scaling the plane on any particular axis. My intention is to clip the plane at my original dimensions, hiding parts of the plane. I do the “zooming” in the vertex shader by translating the vertices.

In this attached fiddle, I have a “vanilla” plane (yellow) created with the built-in MeshBasicMaterial. I also have a plane that I created w/ custom shaders (green) in which translate the X verticies x2. Both planes originally are 1000x1000, the green one effectively becomes twice as “wide” on the X after translating the X points. I then have setup a clipping plane on the X, at 250.

What I expect:

For both planes to be clipped at the same place.

What is happening:

The yellow plane is being clipped where I expect, but the green plane is being clipped apparently taking the translations into account?

Question is:

How can I make these global clipping planes absolutely clip where I intend them to, irregardless of the translations in the shader?

Fiddle: Edit fiddle - JSFiddle - Code Playground

This screenshot illustrates better:

Clipping planes discard fragments based on some coordinate condition in world space, since you write your own shader, you can do it yourself without using built-in code snippets. This way you have full control as to whether to include translation or not:

That makes things much more simple! Thank you! I can easily do that for my min/max on each axis now.

1 Like