0

How do I add a Frustum Clipping Plane to a Camera View Matrix? I'm confused on how to add it to the Camera Matrix so it clips the edges of the orthogonal view. The javascript has been extracted from a bigger application so it doesn't actually run in a sandbox. My apologies. If someone could provide a sandboxed example that I can convert into my code I'd be forever grateful as searching on the net for m4.frustum information returned little results.

var m4 = twgl.m4;
var zoom = 1;
var gridW = 17;
var gridH = 13;
var tilesize = 16;
var webglwidth = this.webgl.canvas.width / zoom;
var webglheight = this.webgl.canvas.height / zoom;

var screenW = gridW -2;
var screenH = gridH -2;

this.orthMatrix2 = m4.ortho(
0, 1, 
0, 1,
0, -1);

var cameraMatrix = m4.rotationY(Math.PI);
cameraMatrix = m4.rotateZ(cameraMatrix, Math.PI);

var clipCameraW = -2;
var clipCameraH = -2;

cameraMatrix = m4.scale(cameraMatrix, [1/screenW, 1/screenH, 1]);

// Some Camera Translation shifting code here removed for readability.

cameraMatrix = m4.scale(cameraMatrix, [screenW, screenH, 1]);

// Here I want to make the Camera Frustum clip the edges so scrolling will be smooth.
//cameraFrustum = m4.frustum(1/this.camera.gridW,(screenW)/this.camera.gridW,
//                         1/this.camera.gridH,(screenH)/this.camera.gridH,0,1); // ?
// cameraMatrix = m4.multiply(cameraMatrix, cameraFrustum); // ?

webgl.viewport(0,0, webgl.canvas.width, webgl.canvas.height);

var viewProjectionMatrix = m4.multiply(this.orthMatrix2, cameraMatrix);

// Final viewProjectionMatrix for webgl's uniformMatrix4fv.
// Call DrawArrays etc.
Langerz
  • 71
  • 1
  • 5
  • Please add twgl as a tag as this concerns that library, thanks. – Langerz Apr 20 '19 at 05:00
  • It's not clear what you mean. Most people use either `ortho` or `perspective` for projection. I've only used `frustum` functions to compute non-center of view projections. For example spreading a view across multiple displays or rendering a super highres render by rendering smaller portions individually. Example code [here](https://github.com/WebGLSamples/WebGLSamples.github.io/blob/c002917b28b3be4eed74b07914e9eeeb94590127/aquarium/aquarium.js#L1677) and [here](https://github.com/mrdoob/three.js/blob/bd0539e805dc23754bc9ca8ca6a77a109a424495/src/cameras/PerspectiveCamera.js#L213) – gman Apr 20 '19 at 08:17
  • There's also [this](http://www.terathon.com/gdc07_lengyel.pdf) if you really want an arbitrary clipping plane but it only handles the front plane. I think if you check for example three.js it does arbitrary plane clipping in the shader. [vertex shader](https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk/clipping_planes_vertex.glsl.js), [fragment shader](https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk/clipping_planes_fragment.glsl.js) – gman Apr 20 '19 at 08:22
  • Also does this answer your question? https://stackoverflow.com/a/51245334/128511 ? The examples use the `frustum` function. – gman Apr 20 '19 at 09:00
  • I think I got it by adjusting the orth function. Many thanks for your help. gman was right there was no need for the frustum function to be called. – Langerz Apr 20 '19 at 09:28

0 Answers0