|
|
@@ -1,185 +0,0 @@
|
|
|
-<html lang="en">
|
|
|
- <head>
|
|
|
- <title>WebGPU Sandbox</title>
|
|
|
- <meta charset="utf-8">
|
|
|
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
|
- <link type="text/css" rel="stylesheet" href="main.css">
|
|
|
- </head>
|
|
|
- <body>
|
|
|
- <div id="info">
|
|
|
- <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - sandbox<br/>(Chrome Canary with flag: --enable-unsafe-webgpu)
|
|
|
- </div>
|
|
|
-
|
|
|
- <script type="module">
|
|
|
-
|
|
|
- import * as THREE from '../build/three.module.js';
|
|
|
-
|
|
|
- import { DDSLoader } from './jsm/loaders/DDSLoader.js';
|
|
|
-
|
|
|
- import WebGPURenderer from './jsm/renderers/webgpu/WebGPURenderer.js';
|
|
|
- import WebGPU from './jsm/renderers/webgpu/WebGPU.js';
|
|
|
-
|
|
|
- import FloatNode from './jsm/renderers/nodes/inputs/FloatNode.js';
|
|
|
- import Vector3Node from './jsm/renderers/nodes/inputs/Vector3Node.js';
|
|
|
- import OperatorNode from './jsm/renderers/nodes/math/OperatorNode.js';
|
|
|
-
|
|
|
- let camera, scene, renderer;
|
|
|
-
|
|
|
- let box;
|
|
|
-
|
|
|
- init().then( animate ).catch( error );
|
|
|
-
|
|
|
- async function init() {
|
|
|
-
|
|
|
- if ( WebGPU.isAvailable() === false ) {
|
|
|
-
|
|
|
- document.body.appendChild( WebGPU.getErrorMessage() );
|
|
|
-
|
|
|
- throw 'No WebGPU support';
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10 );
|
|
|
- camera.position.z = 4;
|
|
|
-
|
|
|
- scene = new THREE.Scene();
|
|
|
- scene.background = new THREE.Color( 0x222222 );
|
|
|
-
|
|
|
- // textured mesh
|
|
|
-
|
|
|
- const textureLoader = new THREE.TextureLoader();
|
|
|
- const texture = textureLoader.load( './textures/uv_grid_opengl.jpg' );
|
|
|
-
|
|
|
- const geometryBox = new THREE.BoxBufferGeometry();
|
|
|
- const materialBox = new THREE.MeshBasicMaterial( { map: texture } );
|
|
|
-
|
|
|
- //materialBox.color = new OperatorNode( '+', new Vector3Node( new THREE.Vector3( 0, .6, 0 ) ), new Vector3Node( new THREE.Vector3( 0, 0, 1 ) ) );
|
|
|
- materialBox.color = new OperatorNode( '+', new FloatNode( .5 ), new Vector3Node( new THREE.Vector3( 0, 0, 1 ) ) );
|
|
|
- //materialBox.color = new Vector3Node( new THREE.Vector3( 0, 0, 1 ) );
|
|
|
-
|
|
|
- box = new THREE.Mesh( geometryBox, materialBox );
|
|
|
- box.position.set( 0, 1, 0 );
|
|
|
- scene.add( box );
|
|
|
-
|
|
|
- // data texture
|
|
|
-
|
|
|
- const geometryPlane = new THREE.PlaneBufferGeometry();
|
|
|
- const materialPlane = new THREE.MeshBasicMaterial( { map: createDataTexture(), transparent: true, opacity: 0.5 } );
|
|
|
-
|
|
|
- const plane = new THREE.Mesh( geometryPlane, materialPlane );
|
|
|
- plane.position.set( 0, - 1, 0 );
|
|
|
- //scene.add( plane );
|
|
|
-
|
|
|
- // compressed texture
|
|
|
-
|
|
|
- const ddsLoader = new DDSLoader();
|
|
|
- const dxt5Texture = ddsLoader.load( './textures/compressed/explosion_dxt5_mip.dds' );
|
|
|
-
|
|
|
- const materialCompressed = new THREE.MeshBasicMaterial( { map: dxt5Texture, transparent: true } );
|
|
|
-
|
|
|
- const boxCompressed = new THREE.Mesh( geometryBox, materialCompressed );
|
|
|
- boxCompressed.position.set( - 2, 1, 0 );
|
|
|
- //scene.add( boxCompressed );
|
|
|
-
|
|
|
- // points
|
|
|
-
|
|
|
- const points = [];
|
|
|
-
|
|
|
- for ( let i = 0; i < 1000; i ++ ) {
|
|
|
-
|
|
|
- const point = new THREE.Vector3().random().subScalar( 0.5 );
|
|
|
- points.push( point );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- const geometryPoints = new THREE.BufferGeometry().setFromPoints( points );
|
|
|
- const materialPoints = new THREE.PointsMaterial();
|
|
|
-
|
|
|
- const pointCloud = new THREE.Points( geometryPoints, materialPoints );
|
|
|
- pointCloud.position.set( 2, - 1, 0 );
|
|
|
- //scene.add( pointCloud );
|
|
|
-
|
|
|
- // lines
|
|
|
-
|
|
|
- const geometryLine = new THREE.BufferGeometry().setFromPoints( [
|
|
|
- new THREE.Vector3( - 0.5, - 0.5, 0 ),
|
|
|
- new THREE.Vector3( 0.5, - 0.5, 0 ),
|
|
|
- new THREE.Vector3( 0.5, 0.5, 0 ),
|
|
|
- new THREE.Vector3( - 0.5, 0.5, 0 )
|
|
|
- ] );
|
|
|
- const materialLine = new THREE.LineBasicMaterial();
|
|
|
- const line = new THREE.Line( geometryLine, materialLine );
|
|
|
- line.position.set( 2, 1, 0 );
|
|
|
- //scene.add( line );
|
|
|
-
|
|
|
- //
|
|
|
-
|
|
|
- renderer = new WebGPURenderer( { extensions: [ 'texture-compression-bc' ] } );
|
|
|
- renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
- renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
- document.body.appendChild( renderer.domElement );
|
|
|
-
|
|
|
- window.addEventListener( 'resize', onWindowResize, false );
|
|
|
-
|
|
|
- return renderer.init();
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function onWindowResize() {
|
|
|
-
|
|
|
- camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
- camera.updateProjectionMatrix();
|
|
|
-
|
|
|
- renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function animate() {
|
|
|
-
|
|
|
- requestAnimationFrame( animate );
|
|
|
-
|
|
|
- box.rotation.x += 0.01;
|
|
|
- box.rotation.y += 0.02;
|
|
|
-
|
|
|
- renderer.render( scene, camera );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function createDataTexture() {
|
|
|
-
|
|
|
- const color = new THREE.Color( 0xff0000 );
|
|
|
-
|
|
|
- const width = 512;
|
|
|
- const height = 512;
|
|
|
-
|
|
|
- const size = width * height;
|
|
|
- const data = new Uint8Array( 4 * size );
|
|
|
-
|
|
|
- const r = Math.floor( color.r * 255 );
|
|
|
- const g = Math.floor( color.g * 255 );
|
|
|
- const b = Math.floor( color.b * 255 );
|
|
|
-
|
|
|
- for ( let i = 0; i < size; i ++ ) {
|
|
|
-
|
|
|
- const stride = i * 4;
|
|
|
-
|
|
|
- data[ stride ] = r;
|
|
|
- data[ stride + 1 ] = g;
|
|
|
- data[ stride + 2 ] = b;
|
|
|
- data[ stride + 3 ] = 255;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- return new THREE.DataTexture( data, width, height, THREE.RGBAFormat );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function error( error ) {
|
|
|
-
|
|
|
- console.error( error );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- </script>
|
|
|
- </body>
|
|
|
-</html>
|
sunag