V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
MMMMMMMMMMMMMMMM
V2EX  ›  程序员

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

  •  1
     
  •   MMMMMMMMMMMMMMMM · 2023-01-07 16:27:02 +08:00 · 5185 次点击
    这是一个创建于 446 天前的主题,其中的信息可能已经有所发展或是发生改变。

    要达到最接近原生体验的前端体验,无疑是直接和 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
        1
    googlefans  
       2023-01-07 16:49:40 +08:00
    弄网站的话 如果只是纯内容类的产品,都不需要后台数据库 直接静态都搞定 https://getpublii.com 省心省事 只需要专心做好内容就可以了
    angrylid
        2
    angrylid  
       2023-01-07 16:54:05 +08:00 via Android
    呃呃,你这一切猜想的前提是原生是更好的,浏览器要朝原生发展。

    但是实际情况是原生软件纷纷往里面塞个浏览器开网页。
    MMMMMMMMMMMMMMMM
        3
    MMMMMMMMMMMMMMMM  
    OP
       2023-01-07 16:57:12 +08:00   ❤️ 1
    @googlefans 现在这么艰难的么,连普通交流都要带上推广
    MMMMMMMMMMMMMMMM
        4
    MMMMMMMMMMMMMMMM  
    OP
       2023-01-07 17:00:24 +08:00
    @angrylid 对,因为原生的生态没有 web 完善的现状所致

    webgl 的话,本身也是 web 生态里的,但比较硬核,需要中间有个"桥"来降低一点门槛
    secondwtq
        5
    secondwtq  
       2023-01-07 17:04:53 +08:00   ❤️ 1
    Canvas 和 WebGL 是两个东西啊 ... 而且很多事情 SVG 也能做
    然后就是上面这些都是实现细节,你这个想法关键是在你的那个“游戏引擎”上
    这就要说到 Web 这个东西的特殊性了,就是现在这个局面本质上是 GUI 框架之外的层级对 GUI 框架这一层级长期巴尔干化的现状不满意后果,Web 是个通用的东西。
    那你这个“游戏引擎”要怎么做成另一个通用的东西?就算真做成了,历史是一个圈,最多不过是做成另一个 Web 而已。
    PTLin
        6
    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
        7
    agagega  
       2023-01-07 17:27:11 +08:00   ❤️ 1
    wasm 都不能用来写界面,还早着呢。楼主说的用 canvas 取代 DOM ,Flipboard 很久以前就干过了: https://www.infoq.cn/article/2015/04/flipboard-web-version
    wlsnx
        8
    wlsnx  
       2023-01-07 17:43:14 +08:00   ❤️ 3
    MMMMMMMMMMMMMMMM
        9
    MMMMMMMMMMMMMMMM  
    OP
       2023-01-07 17:50:57 +08:00
    @secondwtq 我的意思是 canvas 只是个容器,他也可以是任何东西,最后的表现方式和用到的技术取决于 getContext 是('2d')或者('webgl2')
    既然 jquery 、react 、vue 可以在现有 web 架构上横空出世,杀一片新战场
    那理论上桥一下 webgl 和现有的 js ,精简一下,不就是一个很完美的跨平台 native 体验解决方案了么


    @PTLin 我认为差的就是这一套方便的开发套件,工程量确实大,但如果出现了,又该开始卷了
    okakuyang
        10
    okakuyang  
       2023-01-07 17:51:45 +08:00
    错之又错
    antonius
        11
    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
        12
    MMMMMMMMMMMMMMMM  
    OP
       2023-01-07 18:06:07 +08:00
    @antonius 直接写 webgl 肯定硬核啊,也没多少人能写,需要一个两方都懂的人桥接一下,出一套"引擎"
    dw2693734d
        13
    dw2693734d  
       2023-01-07 18:08:29 +08:00
    未来是 web3
    PTLin
        14
    PTLin  
       2023-01-07 18:09:16 +08:00   ❤️ 1
    @MMMMMMMMMMMMMMMM react ,vue 说到底只是引入了 ui=f(state)的思想,实际上还是 html 和 css ,虚拟 dom 在怎么 virtual 说到底还是落实到 dom 上还是 web api 那一套。使用原有的技术,解决了明显的痛点,加快了开发的速度,所以这两个才能短时间流行起来。
    你说的压根就和这种不沾边,在现有的 web 基础上构建起来你说的那种就是纯纯的大坑,flutter web 不就是例子。
    secondwtq
        15
    secondwtq  
       2023-01-07 18:20:09 +08:00   ❤️ 1
    @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
        16
    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
        17
    rpman  
       2023-01-07 18:40:46 +08:00
    现在 web 压倒原生是 cpu 性能随便造之后的产物。性能向开发量妥协。
    等 gpu 性能随便造了,webGL 的基础就有了。
    chiuan
        18
    chiuan  
       2023-01-07 18:42:54 +08:00
    webgl 已经好多年了 主要是体验没法有 app 流畅
    secondwtq
        19
    secondwtq  
       2023-01-07 18:52:08 +08:00   ❤️ 3
    ... 噢对了,如果楼主说的"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
        20
    wanguorui123  
       2023-01-07 18:52:25 +08:00   ❤️ 7
    webgl 做 App 好比脱裤子放屁,重新发明一套 HTML
    mxT52CRuqR6o5
        21
    mxT52CRuqR6o5  
       2023-01-07 18:58:40 +08:00
    首先无障碍就很难做
    loading
        22
    loading  
       2023-01-07 19:01:13 +08:00 via Android
    ui 全靠拖?
    有没有可能以前 Dreamweaver 时代就是拖出来的。
    crysislinux
        23
    crysislinux  
       2023-01-07 19:41:45 +08:00 via Android
    直接画好做的话,桌面端就不会越来越多 Electron 了。
    murmur
        24
    murmur  
       2023-01-07 20:35:07 +08:00
    为啥要 webgl ,unity 不好么,专业开发游戏、3d
    revalue
        25
    revalue  
       2023-01-07 21:27:44 +08:00
    DOM canvas webgl ,玩法不一样,导致适用范围不一样。你说的就是 webgl 取代 DOM ,开发起来非常不适
    youtubbbbb
        26
    youtubbbbb  
       2023-01-08 01:41:15 +08:00
    我的评价是,南辕北辙。就像楼上说的,electron 这么多,说明靠自己画控件去做 ui 是费时费力的,除非一些特殊场景,比如 Google Docs 。
    退一步讲,即使是有一套控件库了,你怎么去解决响应式的问题呢。组件一多肯定需要一套语言去描述,怎么去设计这套语言呢?是不是最后又很容易回到 html/css/javascript 的思路上来。
    dcoder
        27
    dcoder  
       2023-01-08 06:31:23 +08:00
    未来是原生 3D app, 就像 3D game engine 做出来的效果.
    现在这个过度复杂的 HTML/CSS/JS 2D layout 框架... 就是点错了科技树...
    yulon
        28
    yulon  
       2023-01-08 08:04:24 +08:00
    WebXXX 不是用来替代谁的,是用来复用已有的东西的,不然要性能不如原生,要便利不如非原生
    zeal7s
        29
    zeal7s  
       2023-01-08 10:08:25 +08:00
    btw, 现在出了更新的技术,叫 webgpu ,性能比 webgl 更好
    southsala
        30
    southsala  
       2023-01-08 10:54:37 +08:00
    性能和功耗不是问题直接用游戏引擎做客户端不好吗?
    zjsxwc
        31
    zjsxwc  
       2023-01-08 11:19:03 +08:00 via Android
    那为什么不直接用 gpu 渲染 dom 。
    zjsxwc
        32
    zjsxwc  
       2023-01-08 11:19:48 +08:00 via Android
    @zjsxwc 因为已经在用 gpu 渲染 dom 了。
    reiji
        33
    reiji  
       2023-01-08 14:34:40 +08:00
    可以看看飞书文档,就是基于 canvas 的,这种主要还是适合有复杂界面交互 /排版的场景,性能反而不是主要考虑的方向
    luoqeng
        34
    luoqeng  
       2023-01-08 22:02:51 +08:00
    浏览器最重要的排版引起啊,要自己重写个?
    yimity
        35
    yimity  
       2023-01-09 10:21:46 +08:00
    嗯,用 webgl 再实现一套 HTML CSS 解释引擎?
    birdinforest
        36
    birdinforest  
       2023-01-09 13:12:21 +08:00
    我观察到的业界情况是
    Web3D 框架在融入 HTML 标准: https://github.com/pmndrs/react-three-fiber
    开源游戏引擎 Godot 和 Unity 都潜在支持桌面 APP 的开发。
    wangtian2020
        37
    wangtian2020  
       2023-01-09 15:07:04 +08:00
    应用场景还不够大,需要 AI 来降低建模成本
    fighte97
        38
    fighte97  
       2023-01-10 16:16:11 +08:00   ❤️ 1
    我只希望低代码 /无代码早点死
    一张图要一个 panel 打开这个 panel 还要花两三秒
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1774 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 16:34 · PVG 00:34 · LAX 09:34 · JFK 12:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.