CODEWITHSUNDEEP
canvasthree.js
ddibiase
ddibiase

Reputation: 1502

Perspective camera and rendering quality

I've written a small app in Three that will display a 2D plot graph. I used sprites (each sprite uses a canvas SpriteMaterial) and the GridHelper to build the elements of the graph. When a user clicks a button the graph pulls out to a full 3D view -- so I've built both the 2D and 3D graph in 3D space.

I'm using a perspective camera and defining it as such:

this.camera = new THREE.PerspectiveCamera(
    70,
    this.width / this.height,
    100,
    1000
);

My graph is 100x100 and is at the vector [0,0,-100]. When I place the camera at [0,0,0] the sprites and the graph render beautifully with no pixelation at all.

However the graph doesn't fit the full rendering area so I'm setting the camera at a position where the z is 100 and hence fits the full graph. This however makes the graph appear pixelated.

I'm wondering how I can get the rendering quality up and fix the distortion of the rendering. I realize this is a natural result of the perspective camera. This is a screenshot with the z at 0:

enter image description here

Image with the z pulled back to see the full graph:

enter image description here

Thanks!

Upvotes: 0

Views: 102

Answers (1)

WacławJasper
WacławJasper

Reputation: 3364

The problem is because your image source size and image display size is too different. Imagine if you have to shrink a 100x100 image into a 16x16 one, which pixels do you keep?

In webgl, there is a TEXTURE_MIN_FILTER does allows you to control how exactly how do you want this shrinking to be done. It looks like THREE.js defaults to using the NEAREST filter which causes this pixelation problem. I dont use THREE so I dont know how to set this in THREE.js. Perhaps look around in the documentation? Its probably there.

Upvotes: 1

Related Questions