# Sawtooth on texture

**URL:** <https://discourse.threejs.org/t/sawtooth-on-texture/40707>\
**Category:** Questions\
**Tags:** textures\
**Created:** [July 25, 2022, 11:37am UTC](https://discourse.threejs.org/t/sawtooth-on-texture/40707 "2022-07-25T11:37:31Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![ToastedHippie](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/toastedhippie/32/26580_2.png) [@ToastedHippie](https://discourse.threejs.org/u/ToastedHippie)\
**Post date:** [July 25, 2022, 11:37am UTC](https://discourse.threejs.org/t/sawtooth-on-texture/40707/1 "2022-07-25T11:37:31Z")

</div>

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

> **[three-js-sawtooth - StackBlitz](https://stackblitz.com/edit/js-m3sygd?file=index.js,index.html)**
>
> Blank starter project for building ES6 apps.

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 25, 2022, 12:35pm UTC](https://discourse.threejs.org/t/sawtooth-on-texture/40707/2 "2022-07-25T12:35:09Z")

</div>

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

```javascript
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

```javascript
// 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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/7/572c638140fd27daa23c42a08989f84d62fc34c2.jpeg)

---

<div class="post-metadata">

**Author:** ![ToastedHippie](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/toastedhippie/32/26580_2.png) [@ToastedHippie](https://discourse.threejs.org/u/ToastedHippie)\
**Post date:** [July 25, 2022, 2:19pm UTC](https://discourse.threejs.org/t/sawtooth-on-texture/40707/3 "2022-07-25T14:19:07Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 25, 2022, 2:36pm UTC](https://discourse.threejs.org/t/sawtooth-on-texture/40707/4 "2022-07-25T14:36:58Z")

</div>

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

 ![photo](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/3/239142aced40ad0b75060c4fe3d5ffee37a8a505.jpeg)

---

<div class="post-metadata">

**Author:** ![ToastedHippie](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/toastedhippie/32/26580_2.png) [@ToastedHippie](https://discourse.threejs.org/u/ToastedHippie)\
**Post date:** [July 25, 2022, 4:00pm UTC](https://discourse.threejs.org/t/sawtooth-on-texture/40707/5 "2022-07-25T16:00:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 25, 2022, 6:05pm UTC](https://discourse.threejs.org/t/sawtooth-on-texture/40707/6 "2022-07-25T18:05:10Z")

</div>

style.css

```javascript
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

```javascript
// 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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/6/56480317851cc1e0b38a476c7b262b423ee1f2ad.jpeg)  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/9/4998ee0b6a52106857c23b9c3c6b3352b0a3e1be.jpeg)

---

<div class="post-metadata">

**Author:** ![tfoller](https://avatars.discourse-cdn.com/v4/letter/t/3e96dc/32.png) [@tfoller](https://discourse.threejs.org/u/tfoller)\
**Post date:** [July 25, 2022, 6:20pm UTC](https://discourse.threejs.org/t/sawtooth-on-texture/40707/7 "2022-07-25T18:20:41Z")

</div>

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

> **[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/tfoller/1myu3fkz/27/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 25, 2022, 6:28pm UTC](https://discourse.threejs.org/t/sawtooth-on-texture/40707/8 "2022-07-25T18:28:09Z")

</div>

test here [three-js-sawtooth (forked) - StackBlitz](https://stackblitz.com/edit/js-mdccdz?file=index.js,style.css,index.html)

---

<div class="post-metadata">

**Author:** ![ToastedHippie](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/toastedhippie/32/26580_2.png) [@ToastedHippie](https://discourse.threejs.org/u/ToastedHippie)\
**Post date:** [July 26, 2022, 5:39am UTC](https://discourse.threejs.org/t/sawtooth-on-texture/40707/9 "2022-07-26T05:39:35Z")

</div>

Looks like the problem was that I missed renderer.setSize 🤦‍♂️ Thanks a lot