Sawtooth on texture

Questions
1

Hi! I’m attaching a photo as a texture and it has a terrible sawtooth effect. How can I get rid of this?

2

Texture mybe was resized by three.js to make power of two
style.css

body {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px;
  margin: 0;
  box-sizing: border-box;
}
#slideshow-canvas {
 //width: 100%;
  //min-width: 500px;
  //max-width: 1024px;
  aspect-ratio: 16 / 9;
width: 480px;
height: 270px;
}

index.js

// Import stylesheets
import './style.css';
import {
  Mesh,
  MeshBasicMaterial,
  NearestFilter,
  OrthographicCamera,
  PlaneGeometry,
  Scene,
  TextureLoader,
  WebGLRenderer,
} from 'three';

const canvas = document.getElementById('slideshow-canvas');

const widht = 480;
const height = 270;
const scene = new Scene();
const camera = new OrthographicCamera(
  widht / -2,
  widht / 2,
  height / 2,
  height / -2,
  -10,
  10
);
const renderer = new WebGLRenderer({
  canvas,
  powerPreference: 'high-performance',
});
renderer.setPixelRatio(window.devicePixelRatio);

camera.position.set(0, 0, 0);

const geometry = new PlaneGeometry(450, 300);
const image = new TextureLoader().load('https://picsum.photos/id/0/900/600');
image.anisotropy = renderer.capabilities.getMaxAnisotropy();
const material = new MeshBasicMaterial({ map: image });
//material.map.minFilter = NearestFilter;
const mesh = new Mesh(geometry, material);
scene.add(mesh);

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});

image

3

Thanks for reply. Unfortunately it is still not the same quality as original image. For my project it is crutial to get high quality of photos. May be here is some other way to display photo as a texture. I’ve just started to work with threejs and webgl in general.

4

Try place photo to size 1024 x 1024 to skip three.js resizing

photo
photo1024×1024 42.5 KB

5

It should support any photos resolution. But I checked your suggestion anyway and result is the same (updated stackblitz)

6

style.css

body {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px;
  margin: 0;
  box-sizing: border-box;
}
#slideshow-canvas {
  //width: 100%;
  //min-width: 500px;
  //max-width: 1024px;
  //aspect-ratio: 16 / 9;
//width: 480px;
//height: 270px;
}

index.js

// Import stylesheets
import './style.css';
import {
  Mesh,
  MeshBasicMaterial,
  NearestFilter,
  LiniarFilter,
  OrthographicCamera,
  PlaneGeometry,
  Scene,
  TextureLoader,
  WebGLRenderer,
} from 'three';

const canvas = document.getElementById('slideshow-canvas');

const widht = 480;
const height = 270;
const scene = new Scene();
const camera = new OrthographicCamera(
  widht / -2,
  widht / 2,
  height / 2,
  height / -2,
  -10,
  10
);
const renderer = new WebGLRenderer({
  canvas,
  powerPreference: 'high-performance',
});
renderer.setSize(widht, height );
renderer.setPixelRatio(window.devicePixelRatio);

camera.position.set(0, 0, 0);

const geometry = new PlaneGeometry(450, 300);
const image = new TextureLoader().load('https://picsum.photos/id/0/900/600');
image.anisotropy = renderer.capabilities.getMaxAnisotropy();
const material = new MeshBasicMaterial({ map: image });
 //material.map.minFilter = LiniarFilter;
const mesh = new Mesh(geometry, material);
scene.add(mesh);

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});

image
image

7

I can’t see anything on StackBlitz, but your texture looks ok here, no sawtooth

8

test here three-js-sawtooth (forked) - StackBlitz

9

Looks like the problem was that I missed renderer.setSize :man_facepalming: Thanks a lot