diff --git a/src/webgl/p5.Framebuffer.js b/src/webgl/p5.Framebuffer.js index 7111d23541..7642ccf549 100644 --- a/src/webgl/p5.Framebuffer.js +++ b/src/webgl/p5.Framebuffer.js @@ -33,10 +33,8 @@ class FramebufferCamera extends p5.Camera { _computeCameraDefaultSettings() { super._computeCameraDefaultSettings(); this.defaultAspectRatio = this.fbo.width / this.fbo.height; - this.defaultEyeZ = - this.fbo.height / 2.0 / Math.tan(this.defaultCameraFOV / 2.0); - this.defaultCameraNear = this.defaultEyeZ * 0.1; - this.defaultCameraFar = this.defaultEyeZ * 10; + this.defaultCameraFOV = + 2 * Math.atan(this.fbo.height / 2 / this.defaultEyeZ); } } diff --git a/src/webgl/shaders/line.vert b/src/webgl/shaders/line.vert index 406a7012d6..4b6d032a1f 100644 --- a/src/webgl/shaders/line.vert +++ b/src/webgl/shaders/line.vert @@ -170,9 +170,9 @@ void main() { // find where the lines intersect to find the elbow of the join vec2 c = (posp.xy/posp.w + vec2(1.,1.)) * 0.5 * uViewport.zw; vec2 intersection = lineIntersection( - c + (side * normalIn * uStrokeWeight / 2.) * curPerspScale, + c + (side * normalIn * uStrokeWeight / 2.), tangentIn, - c + (side * normalOut * uStrokeWeight / 2.) * curPerspScale, + c + (side * normalOut * uStrokeWeight / 2.), tangentOut ); offset = (intersection - c); @@ -187,9 +187,9 @@ void main() { offset *= maxMag / mag; } } else if (sideEnum == 1.) { - offset = side * normalIn * curPerspScale * uStrokeWeight / 2.; + offset = side * normalIn * uStrokeWeight / 2.; } else if (sideEnum == 3.) { - offset = side * normalOut * curPerspScale * uStrokeWeight / 2.; + offset = side * normalOut * uStrokeWeight / 2.; } } if (uStrokeJoin == STROKE_JOIN_BEVEL) { @@ -208,12 +208,12 @@ void main() { // extends out from the line float tangentOffset = abs(aSide) - 1.; offset = (normal * normalOffset + tangent * tangentOffset) * - uStrokeWeight * 0.5 * curPerspScale; + uStrokeWeight * 0.5; vMaxDist = uStrokeWeight / 2.; } - vPosition = vCenter + offset / curPerspScale; + vPosition = vCenter + offset; - gl_Position.xy = p.xy + offset.xy; + gl_Position.xy = p.xy + offset.xy * curPerspScale; gl_Position.zw = p.zw; vColor = (uUseLineColor ? aVertexColor : uMaterialColor); diff --git a/test/unit/webgl/p5.Camera.js b/test/unit/webgl/p5.Camera.js index b763cd6a2f..e756a0c8c0 100644 --- a/test/unit/webgl/p5.Camera.js +++ b/test/unit/webgl/p5.Camera.js @@ -687,10 +687,10 @@ suite('p5.Camera', function() { test('perspective() with no parameters specified (sets default)', function() { var expectedMatrix = new Float32Array([ - 1.7320507764816284,0,0,0, - 0,-1.7320507764816284,0,0, + 16,0,0,0, + 0,-16,0,0, 0,0,-1.0202020406723022,-1, - 0,0,-17.49546241760254,0 + 0,0,-161.6161651611328,0 ]); myCam.perspective(); @@ -726,10 +726,10 @@ suite('p5.Camera', function() { test('frustum() with no parameters specified (sets default)', function() { var expectedMatrix = new Float32Array([ - 1.7320507764816284, 0, 0, 0, - 0, 1.7320507764816284, 0, 0, - 0, -0, -1.0202020406723022, -1, - 0, 0, -17.49546241760254, 0 + 16,0,0,0, + 0,16,0,0, + 0,-0,-1.0202020406723022,-1, + 0,0,-161.6161651611328,0 ]); myCam.frustum(); diff --git a/test/unit/webgl/p5.Framebuffer.js b/test/unit/webgl/p5.Framebuffer.js index f2dbe0f622..e87e6240e7 100644 --- a/test/unit/webgl/p5.Framebuffer.js +++ b/test/unit/webgl/p5.Framebuffer.js @@ -221,7 +221,7 @@ suite('p5.Framebuffer', function() { myp5.plane(myp5.width, -myp5.height); // Just check the red channel, other channels might vary across browsers - assert.equal(myp5.get(5, 5)[0], 221); + assert.equal(myp5.get(5, 5)[0], 232); }); }); @@ -287,7 +287,11 @@ suite('p5.Framebuffer', function() { suite('the default camera', function() { test('it uses the aspect ratio of the framebuffer', function() { expect(fbo.defaultCamera.aspectRatio).to.equal(5 / 15); - const z = -fbo.height / 2.0 / Math.tan(Math.PI / 3 / 2); + expect(fbo.defaultCamera.cameraFOV).to.be.closeTo( + 2.0 * Math.atan(15 / 2 / 800), + 0.01 + ); + const z = -800; const expectedCameraMatrix = [ 1, 0, 0, 0, 0, 1, 0, 0, @@ -303,8 +307,11 @@ suite('p5.Framebuffer', function() { test('it updates the aspect ratio after resizing', function() { fbo.resize(20, 10); expect(fbo.defaultCamera.aspectRatio).to.equal(2); - - const z = -fbo.height / 2.0 / Math.tan(Math.PI / 3 / 2); + expect(fbo.defaultCamera.cameraFOV).to.be.closeTo( + 2.0 * Math.atan(10 / 2 / 800), + 0.01 + ); + const z = -800; const expectedCameraMatrix = [ 1, 0, 0, 0, 0, 1, 0, 0,