我的预感未来前端趋势应该是 webgl 之类的东西

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 722 天前的主题，其中的信息可能已经有所发展或是发生改变。

要达到最接近原生体验的前端体验，无疑是直接和 GPU 交互构建 UI 的 webgl

比之 flutter 这种再造一门语言和生态，webgl/gpu 现在市面上就有一定的人才和生态储备了，大量游戏程序员和本身原来写 webgl 的都可以无缝转过去

一旦有个大公司或民间项目牵头，出个"精简版"的"游戏引擎"，专门用于网页 /app 的构建，那现在的各种高级 jQuery （ React 、Vue 之流）是不是就该时代的眼泪了

以后写网站都没什么 virtual dom ，css ，html 布局了，开局一个 canvas ，UI 全靠拖

第 1 条附言 · 2023-01-07 18:13:51 +08:00

可能有人会想到 three,babylon 之类的；
但他们是专攻游戏和 3d 软件构建的，我如果只是要做个的网站 /app
他很多特性如模型加载，物理 shader 封装等就显得复杂而多余了

38 条回复 • 2023-01-10 16:16:11 +08:00

googlefans

2023-01-07 16:49:40 +08:00

弄网站的话如果只是纯内容类的产品，都不需要后台数据库直接静态都搞定 https://getpublii.com 省心省事只需要专心做好内容就可以了

angrylid

2023-01-07 16:54:05 +08:00 via Android

呃呃，你这一切猜想的前提是原生是更好的，浏览器要朝原生发展。

但是实际情况是原生软件纷纷往里面塞个浏览器开网页。

MMMMMMMMMMMMMMMM

2023-01-07 16:57:12 +08:00

@googlefans 现在这么艰难的么，连普通交流都要带上推广

MMMMMMMMMMMMMMMM

2023-01-07 17:00:24 +08:00

@angrylid 对，因为原生的生态没有 web 完善的现状所致

webgl 的话，本身也是 web 生态里的，但比较硬核，需要中间有个"桥"来降低一点门槛

secondwtq

2023-01-07 17:04:53 +08:00

Canvas 和 WebGL 是两个东西啊 ... 而且很多事情 SVG 也能做
然后就是上面这些都是实现细节，你这个想法关键是在你的那个“游戏引擎”上
这就要说到 Web 这个东西的特殊性了，就是现在这个局面本质上是 GUI 框架之外的层级对 GUI 框架这一层级长期巴尔干化的现状不满意后果，Web 是个通用的东西。
那你这个“游戏引擎”要怎么做成另一个通用的东西？就算真做成了，历史是一个圈，最多不过是做成另一个 Web 而已。

PTLin

2023-01-07 17:21:49 +08:00

说到底我认为 canvas 和 webgl 只是对 web 功能的一种补充，webgl 也不等于在浏览器使用 opengl ，实际上不少人吐槽过 webgl 的 bug 多，底层像一个黑盒一样，而 canvas 的速度也不如原生的 web 元素一样。并且从调试，开发套件等等各种方面来看都不足以替代现有的成熟的 web 开发技术。
我认为未来的”前端“一定是一种新的东西，而不是在现有浏览器的 Html+CSS+JS DOM canvas gl 各种各样的浏览器接口之上构建起来的东西。

agagega

2023-01-07 17:27:11 +08:00

wasm 都不能用来写界面，还早着呢。楼主说的用 canvas 取代 DOM ，Flipboard 很久以前就干过了： https://www.infoq.cn/article/2015/04/flipboard-web-version

wlsnx

2023-01-07 17:43:14 +08:00

一个 canvas https://www.egui.rs/#demo

MMMMMMMMMMMMMMMM

2023-01-07 17:50:57 +08:00

@secondwtq 我的意思是 canvas 只是个容器，他也可以是任何东西，最后的表现方式和用到的技术取决于 getContext 是('2d')或者('webgl2')
既然 jquery 、react 、vue 可以在现有 web 架构上横空出世，杀一片新战场
那理论上桥一下 webgl 和现有的 js ，精简一下，不就是一个很完美的跨平台 native 体验解决方案了么

@PTLin 我认为差的就是这一套方便的开发套件，工程量确实大，但如果出现了，又该开始卷了

okakuyang

2023-01-07 17:51:45 +08:00

错之又错

antonius

2023-01-07 18:02:22 +08:00

大量游戏程序员写 webgl ？ webgl 用在普通 app 上还行，比如 mapbox 的[mapbox-gl-js]( https://github.com/mapbox/mapbox-gl-js)。在游戏上还是差了不少。不清楚 unity3d ，unreal 研发的产品，但自研引擎的开发团队没有理由抛弃 native ，转而拥抱 web 。

MMMMMMMMMMMMMMMM

2023-01-07 18:06:07 +08:00

@antonius 直接写 webgl 肯定硬核啊，也没多少人能写，需要一个两方都懂的人桥接一下，出一套"引擎"

dw2693734d

2023-01-07 18:08:29 +08:00

未来是 web3

PTLin

2023-01-07 18:09:16 +08:00

@MMMMMMMMMMMMMMMM react ，vue 说到底只是引入了 ui=f(state)的思想，实际上还是 html 和 css ，虚拟 dom 在怎么 virtual 说到底还是落实到 dom 上还是 web api 那一套。使用原有的技术，解决了明显的痛点，加快了开发的速度，所以这两个才能短时间流行起来。
你说的压根就和这种不沾边，在现有的 web 基础上构建起来你说的那种就是纯纯的大坑，flutter web 不就是例子。

secondwtq

2023-01-07 18:20:09 +08:00

@MMMMMMMMMMMMMMMM 其实有现成的，Qt 就能： https://www.qt.io/qt-examples-for-webassembly

问题是人家 Qt 没能做到你要的那个程度啊
我的意思是，specific 的技术和微小的细节被看得太重了。你所担心的，卷来卷去的事情，历史上已经多次发生，以后很可能继续发生。Mac 有 Cocoa 踢掉 Pascal ，现在又要 SwiftUI 和 Cocoa 共存，Gamedev 有 shader 踢掉 fixed pipeline ，然后是底层 API 和高层 API 共存，就连 Qt 也一点点 QtWidgets 换 QML 了，至于微软和 Web 的破事就不用我说了。我不会有“以后不会再发生类似的事情”的想法。
作为一个开发者，什么适合当前的问题就用什么。在这个上下文里，Web 并不特殊，特殊的是它的*生态位*。你所述的使用场景（跨平台）之所以常用 Web 是因为它占据了这个生态位。如果这个位置换人了就再用新的就是。更应该关心的，不仅是作为开发者，更是作为用户，是新的和旧的哪个更屎，屎多少，你的系统里会最后会有多少 XX 引擎。

antonius

2023-01-07 18:31:16 +08:00

web 行业不清楚，游戏业内有基于 OpenGL 的 HTML/CSS GUI 实现。确实方便，比如这个：
[RmlUi]( https://github.com/mikke89/RmlUi) .
Valve 的 Panorama UI 也是游戏内的类似 HTML5 的实现。
https://moddota.com/panorama/introduction-to-panorama-ui-with-typescript

rpman

2023-01-07 18:40:46 +08:00

现在 web 压倒原生是 cpu 性能随便造之后的产物。性能向开发量妥协。
等 gpu 性能随便造了，webGL 的基础就有了。

chiuan

2023-01-07 18:42:54 +08:00

webgl 已经好多年了主要是体验没法有 app 流畅

secondwtq

2023-01-07 18:52:08 +08:00

... 噢对了，如果楼主说的"native"是指移动端的话，那么现有解决方案比 Qt Web 更成熟
楼主的 idea ，再一次地，是 Atwood's Law 的一个体现——类似的事情桌面 GUI 早就做完了，叫做 DirectUI 。

并且 DirectUI 一般并不会直接写 3D API 函数或 Shader ，一般的 DirectUI 的架构是，由一个 Window System Abstraction 提供窗口、事件处理和 3D API Context 等平台相关的，最基本的东西，然后由一个 Vector Graphics Library 提供高层绘图 API ，然后上层的组件调用 Vector Graphics Library 绘图，Vector Graphics Library （可能）会调用 3D API ，也可能直接 CPU 渲染了（我现在打字用的这个 Firefox 就是没法用 GPU 加速的 ... 而我打开上面那个 Qt Web 的 demo 页面会直接告诉我不资瓷，所以依赖于 3D API 是有问题的，而 Vector Graphics Library 可以帮你解决）。

而 Web 浏览器本身就可以看成 DirectUI 的一种实现。比如在 Chromium 系浏览器中，Window System Abstraction 的角色由 Aura 担任，Vector Graphics Library 由 Skia 担任。
要实现所谓的“跨平台 native 体验”，最简单的是干掉 Web ，而不是设法绕过 Web——绕过 Web 其实就相当于在 Web 这个 DirectUI 上再做一层 DirectUI ，让浏览器来当 Window System Abstraction ，这不是画 Python 舔 jio 么。而干掉 Web 的结果就是 Flutter ... 你要 JS 生态的话 React Native 也行，或者 Flutter Web ，Qt Web ... 但是大的 idea 是不变的

所以你看局早就设好了，只是鸡还在炖没开始吃而已 ...

wanguorui123

2023-01-07 18:52:25 +08:00

webgl 做 App 好比脱裤子放屁，重新发明一套 HTML

mxT52CRuqR6o5

2023-01-07 18:58:40 +08:00

首先无障碍就很难做

loading

2023-01-07 19:01:13 +08:00 via Android

ui 全靠拖?
有没有可能以前 Dreamweaver 时代就是拖出来的。

crysislinux

2023-01-07 19:41:45 +08:00 via Android

直接画好做的话，桌面端就不会越来越多 Electron 了。

murmur

2023-01-07 20:35:07 +08:00

为啥要 webgl ，unity 不好么，专业开发游戏、3d

revalue

2023-01-07 21:27:44 +08:00

DOM canvas webgl ，玩法不一样，导致适用范围不一样。你说的就是 webgl 取代 DOM ，开发起来非常不适

youtubbbbb

2023-01-08 01:41:15 +08:00

我的评价是，南辕北辙。就像楼上说的，electron 这么多，说明靠自己画控件去做 ui 是费时费力的，除非一些特殊场景，比如 Google Docs 。
退一步讲，即使是有一套控件库了，你怎么去解决响应式的问题呢。组件一多肯定需要一套语言去描述，怎么去设计这套语言呢？是不是最后又很容易回到 html/css/javascript 的思路上来。