江苏龙网

  1. 主页 > 生活百科 > >

WebGPU 是 2023 年 Web 的未来！( 三 )

WebGPU

WebGPU 资源和工具【WebGPU 是 2023 年 Web 的未来！】要构建 WebGPU，需要一些工具和资源来完成开发过程 。可以使用的一些工具和资源如下：

  • WebGPU 示例：WebGPU 示例和演示的集合，展示了如何使用 WebGPU 的各种功能和技术 。可以浏览代码、在线运行示例或将它们下载到本地计算机 。这些示例还包括一个 WebGPU 帮助程序库，可以简化一些常见的任务和操作 。地址：https://austineng.Github.io/webgpu-samples/ 。
  • WebGPU Playground：WebGPU 的在线编辑器和 Playground，可让在浏览器中编写和运行 WebGPU 代码 。还可以与其他人共享代码 。地址：https://webgpu-playground.NETlify.app/ 。
  • WebGPU 文档：WebGPU 的官方文档，解释了 API 的概念、术语和功能 。还可以在 WebGPU 上找到指向其他资源和教程的链接 。地址：https://gpuweb.github.io/gpuweb/ 。
  • WebGPU 着色语言 (WGSL) 规范：WGSL 的官方规范，WebGPU 的着色语言，它定义了 WGSL 的语法、语义和特性 。还可以找到指向 WGSL 的其他资源和工具的链接 。地址：https://gpuweb.github.io/gpuweb/wgsl/ 。
  • WGSL Playground：WGSL 的在线编辑器，可让在浏览器中编写和运行 WGSL 代码 。还可以与其他人共享代码 。地址：https://timjones.io/wgsl-playground/ 。
使用这些工具和资源，可以了解有关 WebGPU 的更多信息并创建自己的示例和应用 。还可以探索其他使用 WebGPU 的示例和项目，例如：
  • Babylon.js：一个功能强大且功能丰富的 Web 3D 引擎，支持将 WebGPU 作为渲染后端 。官网：https://www.babylonjs.com/ 。
const engine = new BABYLON.WebGPUEngine(canvas);await engine.initAsync();const scene = new BABYLON.Scene(engine);const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0), scene);camera.attachControl(canvas, true);const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2}, scene);const material = new BABYLON.StandardMaterial("material", scene);material.diffuseColor = new BABYLON.Color3(1, 0, 0);sphere.material = material;engine.runRenderLoop(() => {scene.render();});
  • Three.js：一个流行的轻量级 Web 3D 库，支持将 WebGPU 作为实验性渲染器 。官网：https://threejs.org/
 const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.z = 5;const renderer = new THREE.WebGPURenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);const geometry = new THREE.BoxGeometry();const material = new THREE.MeshBasicMaterial({color: 0x00ff00});const cube = new THREE.Mesh(geometry, material);scene.add(cube);function animate() {requestAnimationFrame(animate);cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);}animate();
  • Filament：基于物理的实时渲染引擎，适用于 Android、IOS、Windows、Linux、macOS 和 WebGL/WebGPU，支持高质量图形和光照效果 。官网：https://google.github.io/filament/ 。
 const engine = Filament.Engine.create(canvas);const scene = engine.createScene();const camera = engine.createCamera();const view = engine.createView();view.setCamera(camera);view.setScene(scene);const skybox = engine.createSkyFromKtx('venetian_crossroads_2k_ibl.ktx');scene.setSkybox(skybox);const indirectLight = engine.createIblFromKtx('venetian_crossroads_2k_ibl.ktx');scene.setIndirectLight(indirectLight);const material = engine.createMaterial('lit.filamat');const renderable = Filament.EntityManager.get().create();scene.addEntity(renderable);Filament.fetch('DamagedHelmet.glb', (buffer) => {const loader = new Filament.gltfio.AssetLoader(engine);const asset = loader.createAssetFromBinary(buffer);loader.delete();asset.getEntities().forEach((entity) => {scene.addEntity(entity);});});function render() {requestAnimationFrame(render);view.setViewport([0, 0, canvas.width, canvas.height]);renderer.render(view);}render();
  • TensorFlow.js：一个用于机器学习的 JavaScript 库，支持 WebGPU 作为加速计算的后端 。官网：https://www.tensorflow.org/js/ 。
import * as tf from '@tensorflow/tfjs';import '@tensorflow/tfjs-backend-webgpu';await tf.ready();tf.setBackend('webgpu');const a = tf.tensor([1, 2, 3, 4]);const b = tf.tensor([5, 6, 7, 8]);const c = a.add(b);c.print();


推荐阅读


上一篇：最强API调用模型来了！基于LLaMA微调，性能超过GPT-4

下一篇：一文解决所有「语言模型」疑问：能不能训多个epoch？怎么微调效率高？需要多少条数据？