| import glslangModule from 'https://unpkg.com/@webgpu/[email protected]/dist/web-devel/glslang.js'; | |
| import vertexShaderCode from '/shader/vertex.glsl.js'; | |
| import fragmentShaderCode from '/shader/fragment.glsl.js'; | |
| const VERTICES = new Float32Array( [ 0, 0.5, 0, -0.5, -0.5, 0, 0.5, -0.5, 0 ] ); | |
| const INDICES = new Uint16Array( [ 0, 1, 2 ] ); | |
| let main = async () => { | |
| let adapter = await navigator.gpu.requestAdapter(); |
WebGPU 是一个让网页可以使用系统 GPU 来实现计算和绘制复杂图形并呈现在网页内部的 Web API 提案。目标和 WebGL 家族的 API 类似，但 WebGPU 可以访问更多更高级的 GPU 特性。在 WebGL 中，其主要用途是用于绘制图形，但是经过（相当大的努力的）改造才能用于计算，而 WebGPU 则是把 GPU 通用计算作为首要支持。
如下示例场景，未能被 WebGL 2 覆盖，需要使用 WebGPU：
- 绘制物体数量庞大、高度细节化的场景图形（例如 CAD 模型）。WebGPU 的绘制命令的性能消耗比 WebGL 低很多。
- 执行高级算法用于绘制逼真的场景。由于缺乏对通用计算的支持，许多现代渲染技术和优化不能在 WebGL 2 上实现。
也谈前端与设计师的合作
本文是对《现代 Web 开发困局》中“设计/前端协作困境”章节的一些读后感和评论。
在这个章节中，指出了设计和前端由于工具链的原因造成的工作流的割裂和协作上的困难，并且提出了一种解决方案，就是设计和前端共同使用同一种工具进行工作流衔接和资产物料的流转，并使用面向组件的工作方法。
这个观点并不是什么新鲜的观点，全球范围内也有很多大小团队，尤其是研发产品原型工具的公司，都正在或者曾经尝试开发一款新的原型工具，统一这样的工作流。但是结果显而易见，作者作为中国 TOP 大厂的优秀前端，依然没能将这种工作流带入生产环境。
其实这种前端和设计梦寐以求的工作方式早已经在游戏产业得到了实现，它就是每个游戏玩家都知道的虚幻引擎和 Unity 引擎。这两款引擎第一次将游戏生产中的几乎全部工种，包括策划、美术、研发和基于这三大工种衍生出的细分岗位，都统一到虚幻编辑器和 Unity 编辑器中，实现了剧本创意、美术资产、逻辑代码等资产的有效流转和快速迭代。这样带来的好处是，使得游戏开发，尤其是核心玩法的原型开发，可以快速呈现到现实。也就是说，当策划想到了一个绝妙的玩法，为了测试其可玩性（在独立游戏开发中，这是特别重要的一环），以前需要分别去求美术做设计、求程序进行逻辑开发，沟通成本巨大，时间过长，往往等到实现的时候，已经失去了最佳时机；而现在只要在编辑器中就可以统一所有岗位的工作流和美术资产，甚至通过虚幻引擎蓝图系统这种低代码可视化编程工具，策划本人就可以实现游戏逻辑，迅速测试和调整自己的想法。