Manual: Use antialiasing. (#25408)

* Manual: Use antialiasing.

* Manual: More clean up.

manual/en/backgrounds.html

@@ -52,8 +52,9 @@ body {
 drawing anything are transparent.</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function main() {
   const canvas = document.querySelector('#c');
--  const renderer = new THREE.WebGLRenderer({canvas});
+-  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 +  const renderer = new THREE.WebGLRenderer({
++    antialias: true,
 +    canvas,
 +    alpha: true,
 +  });

manual/en/cameras.html

@@ -339,8 +339,9 @@ enough precision to decide which pixels are in front and which pixels are behind
 <p>One solution is to tell three.js use to a different method to compute which
 pixels are in front and which are behind. We can do that by enabling
 <code class="notranslate" translate="no">logarithmicDepthBuffer</code> when we create the <a href="/docs/#api/en/renderers/WebGLRenderer"><code class="notranslate" translate="no">WebGLRenderer</code></a></p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const renderer = new THREE.WebGLRenderer({canvas});
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 +const renderer = new THREE.WebGLRenderer({
++  antialias: true,
 +  canvas,
 +  logarithmicDepthBuffer: true,
 +});

manual/en/fundamentals.html

@@ -135,7 +135,7 @@ import * as THREE from 'three';
 
 +function main() {
 +  const canvas = document.querySelector('#c');
-+  const renderer = new THREE.WebGLRenderer({canvas});
++  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 +  ...
 </script>
 </pre>

manual/en/lights.html

@@ -429,7 +429,7 @@ include the <a href="/docs/#api/en/helpers/RectAreaLightHelper"><code class="not
 <p>and we need to call <code class="notranslate" translate="no">RectAreaLightUniformsLib.init</code></p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 +  RectAreaLightUniformsLib.init();
 </pre>
 <p>If you forget the data the light will still work but it will look funny so
@@ -482,7 +482,7 @@ around 800 lumens. There's also a <a href="/docs/#api/en/lights/PointLight#decay
 be set to <code class="notranslate" translate="no">2</code> for realistic decay.</p>
 <p>Let's test that.</p>
 <p>First we'll turn on physically correct lights</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const renderer = new THREE.WebGLRenderer({canvas});
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 +renderer.physicallyCorrectLights = true;
 </pre>
 <p>Then we'll set the <code class="notranslate" translate="no">power</code> to 800 lumens, the <code class="notranslate" translate="no">decay</code> to 2, and

manual/en/multiple-scenes.html

@@ -536,7 +536,7 @@ just turn on the scissor test at the beginning.</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function main() {
 -  const canvas = document.querySelector('#c');
 +  const canvas = document.createElement('canvas');
-  const renderer = new THREE.WebGLRenderer({canvas, alpha: true});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas, alpha: true});
 +  renderer.setScissorTest(true);
 
   ...

manual/en/offscreencanvas.html

@@ -107,7 +107,7 @@ event data.</p>
 -  const canvas = document.querySelector('#c');
 +function main(data) {
 +  const {canvas} = data;
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   ...
 </pre>
@@ -269,7 +269,7 @@ HTML file and we need to export <code class="notranslate" translate="no">init</c
 -function main(data) {
 +export function init(data) {
   const {canvas} = data;
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 </pre>
 <p>and cut out the just the non three.js relates parts</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">-function size(data) {
@@ -689,7 +689,7 @@ self.onmessage = function(e) {
 export function init(data) {
 -  const {canvas} = data;
 +  const {canvas, inputElement} = data;
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
 +  const controls = new OrbitControls(camera, inputElement);
 +  controls.target.set(0, 0, 0);

manual/en/optimize-lots-of-objects-animated.html

@@ -420,7 +420,7 @@ if we need to call it again and <code class="notranslate" translate="no">false</
 <p>To use it we'll create one </p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 +  const tweenManager = new TweenManger();
 
   ...

manual/en/shadertoy.html

@@ -113,7 +113,7 @@ so let's grab that example but remove the cubes. It's pretty short so here's the
 entire thing</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   renderer.autoClearColor = false;
 
   const camera = new THREE.OrthographicCamera(

manual/en/shadows.html

@@ -233,7 +233,7 @@ appears to also use this kind of shadow for the main character.</p>
 the <a href="/docs/#api/en/lights/PointLight"><code class="notranslate" translate="no">PointLight</code></a>, and the <a href="/docs/#api/en/lights/SpotLight"><code class="notranslate" translate="no">SpotLight</code></a>.</p>
 <p>Let's start with the <a href="/docs/#api/en/lights/DirectionalLight"><code class="notranslate" translate="no">DirectionalLight</code></a> with the helper example from <a href="lights.html">the lights article</a>.</p>
 <p>The first thing we need to do is turn on shadows in the renderer.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const renderer = new THREE.WebGLRenderer({canvas});
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 +renderer.shadowMap.enabled = true;
 </pre>
 <p>Then we also need to tell the light to cast a shadow</p>

manual/en/tips.html

@@ -144,7 +144,7 @@ you create the <a href="/docs/#api/en/renderers/WebGLRenderer"><code class="notr
 clearing the canvas. You also need to tell three.js not to clear
 the canvas as well.</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const canvas = document.querySelector('#c');
--const renderer = new THREE.WebGLRenderer({canvas});
+-const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 +const renderer = new THREE.WebGLRenderer({
 +  canvas,
 +  preserveDrawingBuffer: true,
@@ -234,7 +234,7 @@ canvas has both solutions applied.</p>
 canvas to be transparent pass in <a href="/docs/#api/en/renderers/WebGLRenderer#alpha"><code class="notranslate" translate="no">alpha:true</code></a> when you create
 the <a href="/docs/#api/en/renderers/WebGLRenderer"><code class="notranslate" translate="no">WebGLRenderer</code></a></p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const canvas = document.querySelector('#c');
--const renderer = new THREE.WebGLRenderer({canvas});
+-const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 +const renderer = new THREE.WebGLRenderer({
 +  canvas,
 +  alpha: true,

manual/en/webxr-basics.html

@@ -75,7 +75,7 @@ including three.js</p>
 VR button to our page</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 +  renderer.xr.enabled = true;
 +  document.body.appendChild(VRButton.createButton(renderer));
 </pre>
@@ -294,7 +294,7 @@ site OR pass in a flag in the URL, something like</p>
 <p>in your code you could use that parameter like this</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 -  renderer.xr.enabled = true;
 -  document.body.appendChild(VRButton.createButton(renderer));
 

manual/examples/align-html-elements-to-3d-globe-too-many-labels.html

@@ -77,7 +77,7 @@ import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 60;
   const aspect = 2;  // the canvas default

manual/examples/align-html-elements-to-3d-globe.html

@@ -78,7 +78,7 @@ import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 60;
   const aspect = 2;  // the canvas default

manual/examples/align-html-to-3d-w-hiding.html

@@ -74,7 +74,7 @@ import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/align-html-to-3d-w-sorting.html

@@ -76,7 +76,7 @@ import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/align-html-to-3d.html

@@ -74,7 +74,7 @@ import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/background-css.html

@@ -42,6 +42,7 @@ function main() {
   const renderer = new THREE.WebGLRenderer({
     canvas,
     alpha: true,
+    antialias: true
   });
 
   const fov = 75;

manual/examples/background-cubemap.html

@@ -39,7 +39,7 @@ import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/background-equirectangularmap.html

@@ -39,7 +39,7 @@ import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/background-scene-background-fixed-aspect.html

@@ -37,7 +37,7 @@ import * as THREE from 'three';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   renderer.autoClearColor = false;
 
   const fov = 75;

manual/examples/background-scene-background.html

@@ -37,7 +37,7 @@ import * as THREE from 'three';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   renderer.autoClearColor = false;
 
   const fov = 75;

manual/examples/background-separate-scene-bad-aspect.html

@@ -37,7 +37,7 @@ import * as THREE from 'three';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   renderer.autoClearColor = false;
 
   const fov = 75;

manual/examples/background-separate-scene.html

@@ -37,7 +37,7 @@ import * as THREE from 'three';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   renderer.autoClearColor = false;
 
   const fov = 75;

manual/examples/background-v01.html

@@ -41,7 +41,7 @@ import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   const scene = new THREE.Scene();
 
   const aspect = 2;  // the canvas default

manual/examples/background.html

@@ -41,7 +41,7 @@ import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   const scene = new THREE.Scene();
 
   const aspect = 2;  // the canvas default

manual/examples/billboard-labels-w-sprites-adjust-height.html

@@ -39,7 +39,7 @@ import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/billboard-labels-w-sprites.html

@@ -39,7 +39,7 @@ import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/billboard-trees-no-billboards.html

@@ -39,7 +39,7 @@ import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/billboard-trees-static-billboards.html

@@ -39,7 +39,7 @@ import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/cameras-logarithmic-depth-buffer.html

@@ -43,6 +43,7 @@ function main() {
   const renderer = new THREE.WebGLRenderer({
     canvas,
     logarithmicDepthBuffer: true,
+    antialias: true
   });
   const fov = 45;
   const aspect = 2;  // the canvas default

manual/examples/cameras-orthographic-2-scenes.html

@@ -58,7 +58,7 @@ function main() {
   const canvas = document.querySelector('#c');
   const view1Elem = document.querySelector('#view1');
   const view2Elem = document.querySelector('#view2');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const size = 1;
   const near = 5;

manual/examples/cameras-orthographic-canvas-top-left-origin.html

@@ -49,7 +49,7 @@ import * as THREE from 'three';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const left = 0;
   const right = 300;  // default canvas size

manual/examples/cameras-perspective-2-scenes.html

@@ -58,7 +58,7 @@ function main() {
   const canvas = document.querySelector('#c');
   const view1Elem = document.querySelector('#view1');
   const view2Elem = document.querySelector('#view2');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 45;
   const aspect = 2;  // the canvas default

manual/examples/cameras-perspective.html

@@ -40,7 +40,7 @@ import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 45;
   const aspect = 2;  // the canvas default

manual/examples/cameras-z-fighting.html

@@ -40,7 +40,7 @@ import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   const fov = 45;
   const aspect = 2;  // the canvas default
   const near = 0.00001;

manual/examples/canvas-textured-cube-qix.html

@@ -37,7 +37,7 @@ import * as THREE from 'three';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/canvas-textured-cube.html

@@ -37,7 +37,7 @@ import * as THREE from 'three';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/canvas-textured-labels-one-canvas.html

@@ -39,7 +39,7 @@ import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/canvas-textured-labels-scale-to-fit.html

@@ -39,7 +39,7 @@ import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/canvas-textured-labels.html

@@ -39,7 +39,7 @@ import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/cleanup-loaded-files.html

@@ -107,7 +107,7 @@ class ResourceTracker {
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 75;

manual/examples/cleanup-simple.html

@@ -70,7 +70,7 @@ class ResourceTracker {
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/custom-buffergeometry-cube-indexed.html

@@ -37,7 +37,7 @@ import * as THREE from 'three';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/custom-buffergeometry-cube-typedarrays.html

@@ -37,7 +37,7 @@ import * as THREE from 'three';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/custom-buffergeometry-cube.html

@@ -37,7 +37,7 @@ import * as THREE from 'three';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/custom-buffergeometry-dynamic.html

@@ -37,7 +37,7 @@ import * as THREE from 'three';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/custom-geometry-cube-face-colors.html

@@ -37,7 +37,7 @@ import * as THREE from 'three';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/custom-geometry-cube-face-normals.html

@@ -37,7 +37,7 @@ import * as THREE from 'three';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/custom-geometry-cube-texcoords.html

@@ -37,7 +37,7 @@ import * as THREE from 'three';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/custom-geometry-cube-vertex-colors.html

@@ -37,7 +37,7 @@ import * as THREE from 'three';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/custom-geometry-cube-vertex-normals.html

@@ -37,7 +37,7 @@ import * as THREE from 'three';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/custom-geometry-cube.html

@@ -37,7 +37,7 @@ import * as THREE from 'three';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/custom-geometry-heightmap.html

@@ -39,7 +39,7 @@ import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/debug-js-clearing-logger.html

@@ -64,7 +64,7 @@ class ClearingLogger {
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/debug-js-html-elements.html

@@ -51,7 +51,7 @@ import * as THREE from 'three';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/debug-js-params.html

@@ -113,7 +113,7 @@ if (debug) {
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/debugging-mcve.html

@@ -20,7 +20,7 @@ import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 45;
   const aspect = 2;  // the canvas default

manual/examples/fog-gui.html

@@ -39,7 +39,7 @@ import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   const gui = new GUI();
 
   const fov = 75;

manual/examples/fog.html

@@ -37,7 +37,7 @@ import * as THREE from 'three';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/fundamentals-3-cubes.html

@@ -26,7 +26,7 @@ import * as THREE from 'three';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/fundamentals-with-animation.html

@@ -26,7 +26,7 @@ import * as THREE from 'three';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/fundamentals-with-light.html

@@ -26,7 +26,7 @@ import * as THREE from 'three';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/fundamentals.html

@@ -26,7 +26,7 @@ import * as THREE from 'three';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 75;
   const aspect = 2;  // the canvas default

manual/examples/game-check-animations.html

@@ -94,7 +94,7 @@ import * as SkeletonUtils from 'three/addons/utils/SkeletonUtils.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;

manual/examples/game-conga-line-w-notes.html

@@ -170,7 +170,7 @@ import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;

manual/examples/game-conga-line.html

@@ -170,7 +170,7 @@ import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;

manual/examples/game-just-player.html

@@ -100,7 +100,7 @@ import * as SkeletonUtils from 'three/addons/utils/SkeletonUtils.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;

manual/examples/game-load-models.html

@@ -94,7 +94,7 @@ import * as SkeletonUtils from 'three/addons/utils/SkeletonUtils.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;

manual/examples/game-player-input.html

@@ -140,7 +140,7 @@ import * as SkeletonUtils from 'three/addons/utils/SkeletonUtils.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;

manual/examples/indexed-textures-picking-and-highlighting.html

@@ -77,7 +77,7 @@ import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 60;
   const aspect = 2;  // the canvas default

manual/examples/indexed-textures-picking-debounced.html

@@ -78,7 +78,7 @@ import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 60;
   const aspect = 2;  // the canvas default

manual/examples/indexed-textures-picking.html

@@ -77,7 +77,7 @@ import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 60;
   const aspect = 2;  // the canvas default

manual/examples/indexed-textures-random-colors.html

@@ -77,7 +77,7 @@ import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 60;
   const aspect = 2;  // the canvas default

manual/examples/lights-ambient.html

@@ -40,7 +40,7 @@ import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 45;
   const aspect = 2;  // the canvas default

manual/examples/lights-directional-w-helper.html

@@ -40,7 +40,7 @@ import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 45;
   const aspect = 2;  // the canvas default

manual/examples/lights-directional.html

@@ -40,7 +40,7 @@ import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 45;
   const aspect = 2;  // the canvas default

manual/examples/lights-hemisphere.html

@@ -40,7 +40,7 @@ import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 45;
   const aspect = 2;  // the canvas default

manual/examples/lights-point-physically-correct.html

@@ -40,7 +40,7 @@ import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   renderer.physicallyCorrectLights = true;
 
   const fov = 45;

manual/examples/lights-point.html

@@ -40,7 +40,7 @@ import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 45;
   const aspect = 2;  // the canvas default

manual/examples/lights-rectarea.html

@@ -42,7 +42,7 @@ import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   RectAreaLightUniformsLib.init();
 
   const fov = 45;

manual/examples/lights-spot-w-helper.html

@@ -40,7 +40,7 @@ import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 45;
   const aspect = 2;  // the canvas default

manual/examples/load-gltf-animated-cars.html

@@ -40,7 +40,7 @@ import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;

manual/examples/load-gltf-car-path-fixed.html

@@ -40,7 +40,7 @@ import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;

manual/examples/load-gltf-car-path.html

@@ -40,7 +40,7 @@ import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;

manual/examples/load-gltf-dump-scenegraph-extra.html

@@ -40,7 +40,7 @@ import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;

manual/examples/load-gltf-dump-scenegraph.html

@@ -40,7 +40,7 @@ import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;

manual/examples/load-gltf-rotate-cars-fixed.html

@@ -40,7 +40,7 @@ import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;

manual/examples/load-gltf-rotate-cars.html

@@ -40,7 +40,7 @@ import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;

manual/examples/load-gltf-shadows.html

@@ -41,7 +41,7 @@ import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   renderer.outputEncoding = THREE.sRGBEncoding;
   renderer.shadowMap.enabled = true;
 

manual/examples/load-gltf.html

@@ -40,7 +40,7 @@ import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;

manual/examples/load-obj-auto-camera-xz.html

@@ -40,7 +40,7 @@ import {OBJLoader} from 'three/addons/loaders/OBJLoader.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;

manual/examples/load-obj-auto-camera.html

@@ -40,7 +40,7 @@ import {OBJLoader} from 'three/addons/loaders/OBJLoader.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;

manual/examples/load-obj-materials-fixed.html

@@ -41,7 +41,7 @@ import {MTLLoader} from 'three/addons/loaders/MTLLoader.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;

manual/examples/load-obj-materials-windmill2.html

@@ -41,7 +41,7 @@ import {MTLLoader} from 'three/addons/loaders/MTLLoader.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;

manual/examples/load-obj-materials.html

@@ -41,7 +41,7 @@ import {MTLLoader} from 'three/addons/loaders/MTLLoader.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;

manual/examples/load-obj-no-materials.html

@@ -40,7 +40,7 @@ import {OBJLoader} from 'three/addons/loaders/OBJLoader.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;

manual/examples/load-obj-wat.html

@@ -40,7 +40,7 @@ import {OBJLoader} from 'three/addons/loaders/OBJLoader.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;

manual/examples/lots-of-objects-animated.html

@@ -93,7 +93,7 @@ class TweenManger {
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
   const tweenManager = new TweenManger();
 
   const fov = 60;

manual/examples/lots-of-objects-merged-vertexcolors.html

@@ -40,7 +40,7 @@ import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 60;
   const aspect = 2;  // the canvas default

manual/examples/lots-of-objects-merged.html

@@ -40,7 +40,7 @@ import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');
-  const renderer = new THREE.WebGLRenderer({canvas});
+  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
 
   const fov = 60;
   const aspect = 2;  // the canvas default