Playground: Fix `PreviewEditor` (#28223)

* Playground: Fix `PreviewEditor`

* add antialias

playground/editors/PreviewEditor.js

@@ -2,8 +2,9 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 import { ViewHelper } from 'three/addons/helpers/ViewHelper.js';
 import { Element, LabelElement, SelectInput } from 'flow';
 import { BaseNodeEditor } from '../BaseNodeEditor.js';
-import { MeshBasicNodeMaterial, float } from 'three/nodes';
-import { WebGLRenderer, PerspectiveCamera, Scene, Mesh, DoubleSide, SphereGeometry, BoxGeometry, PlaneGeometry, TorusKnotGeometry } from 'three';
+import { MeshBasicNodeMaterial, vec4 } from 'three/nodes';
+import { PerspectiveCamera, Scene, Mesh, DoubleSide, SphereGeometry, BoxGeometry, PlaneGeometry, TorusKnotGeometry } from 'three';
+import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
 import { setInputAestheticsFromType } from '../DataTypeLib.js';
 
 const sceneDict = {};
@@ -57,7 +58,7 @@ export class PreviewEditor extends BaseNodeEditor {
 		super( 'Preview', null, width );
 
 		const material = new MeshBasicNodeMaterial();
-		material.colorNode = float();
+		material.colorNode = vec4( 0, 0, 0, 1 );
 		material.side = DoubleSide;
 		material.transparent = true;
 
@@ -77,7 +78,7 @@ export class PreviewEditor extends BaseNodeEditor {
 
 		const inputElement = setInputAestheticsFromType( new LabelElement( 'Input' ), 'Color' ).onConnect( () => {
 
-			material.colorNode = inputElement.getLinkedObject() || float();
+			material.colorNode = inputElement.getLinkedObject() || vec4( 0, 0, 0, 1 );
 			material.dispose();
 
 		}, true );
@@ -89,9 +90,10 @@ export class PreviewEditor extends BaseNodeEditor {
 
 		previewElement.dom.addEventListener( 'wheel', e => e.stopPropagation() );
 
-		const renderer = new WebGLRenderer( {
+		const renderer = new WebGPURenderer( {
 			canvas,
-			alpha: true
+			alpha: true,
+			antialias: true
 		} );
 
 		renderer.autoClear = false;
@@ -140,7 +142,7 @@ export class PreviewEditor extends BaseNodeEditor {
 
 	}
 
-	update() {
+	async update() {
 
 		const { viewHelper, material, renderer, camera, sceneInput } = this;
 
@@ -159,8 +161,8 @@ export class PreviewEditor extends BaseNodeEditor {
 
 		}
 
-		renderer.clear();
-		renderer.render( scene, camera );
+		await renderer.clearAsync();
+		await renderer.renderAsync( scene, camera );
 
 		viewHelper.render( renderer );