开了个 React 组件库，一键给网页添加 WebGL 动态背景，欢迎 PR！

WEBGL

React

欢迎

组件

74 条回复 • 2024-03-25 12:20:24 +08:00

1

lawted

2024-03-04 10:07:16 +08:00

赞👍

2

rizon

2024-03-04 10:43:11 +08:00 via iPhone

支持，佩服这些可以做漂亮 ui 的大佬

3

leoskey

2024-03-04 11:57:14 +08:00

效果很赞👍

4

HaroldFinchNYC

2024-03-04 14:11:23 +08:00

这是我浏览器版本不够的原因么？

5

guguji5

2024-03-04 14:13:25 +08:00

很赞，但是这几个图好像没显示出来

6

ciaochaos

OP

2024-03-04 14:17:22 +08:00

@HaroldFinchNYC @guguji5 你们发现了华点 😀 这几个还只是占位，我现在边开发边部署了，还没有做分支管理

7

LinYa

2024-03-04 14:31:45 +08:00

我想知道，作为初级的前端开发者，实现这些渐变动态背景需要学习哪些知识吗？例如需要找计算机图形学方面的书籍来看吗？

8

ciaochaos

OP

2024-03-04 14:39:25 +08:00

3

@LinYa 如果是想直接上手 WebGL 我推荐这篇： https://www.labri.fr/perso/nrougier/python-opengl/，也可以用 https://github.com/pmndrs/react-three-fiber 快速搭一些前端。图形学的书体系都比较复杂，比较值得参考的是 Real-Time Rendering 和 Physically Based Rendering 这两本，除此之外还可以看看 Unity 的 ShaderLab / Shader Graph / Compute Shader

9

johnnyNg

2024-03-04 14:59:35 +08:00

什么时候支持 webgpu

10

litor

2024-03-04 15:06:09 +08:00

赞👍，已 star

11

Steps

2024-03-04 15:08:25 +08:00

我从 <Serenex /> 之后不支持了

12

ciaochaos

OP

2024-03-04 15:10:08 +08:00

@johnnyNg 等 WGSL 的标准吵完吧哈哈

13

ciaochaos

OP

2024-03-04 15:10:33 +08:00

@Steps 还没做，这是在画大饼呢 🤣

14

liarsa

2024-03-04 15:13:19 +08:00

已点 star

15

rm0gang0rf

2024-03-04 15:43:11 +08:00

没有 react 的怎么办...

16

ciaochaos

OP

2024-03-04 15:50:34 +08:00

@rm0gang0rf 如果发展的好的话，后面我看看能不能抽出一个通用的～

17

LinYa

2024-03-04 16:00:29 +08:00

@ciaochaos #8 好哒 Thanks♪(･ω･)ﾉ

18

MoTao

2024-03-04 16:19:31 +08:00

支持支持，谢谢大佬贡献

19

tbc3211

2024-03-04 16:37:37 +08:00

20

rm0gang0rf

2024-03-04 16:44:10 +08:00

@ciaochaos 抽吧, react 才几个人

21

vczyh

2024-03-04 16:52:11 +08:00

@rm0gang0rf 哈哈哈哈

22

rabbbit

2024-03-04 17:08:21 +08:00

shadertoy 的默认协议为 CC BY-NC-SA 3.0 DEED ，需要署名且禁止商业使用。
这可能会导致一定的协议问题，可以改为由用户上传或分发 Shader 。

https://creativecommons.org/licenses/by-nc-sa/3.0/deed.zh-hans
https://www.shadertoy.com/terms

23

rabbbit

2024-03-04 17:10:56 +08:00

并且 cc3.0 限制不能改变协议

24

ciaochaos

OP

2024-03-04 17:16:18 +08:00

@rabbbit nice 感谢，起步阶段先加了一些 shadertoy ，后续尽可能保持原创并给这几个来自 shadertoy 的打上 non-commercial 的标签

25

ciaochaos

OP

2024-03-04 17:18:48 +08:00

@rabbbit 不能改变协议的协议，就只能要么后续下架，要么留联系方式请作者联系了，哈哈

26

LiuJiang

2024-03-04 17:23:20 +08:00

已 star ，谢谢大佬贡献

27

rabbbit

2024-03-04 17:28:15 +08:00

@ciaochaos
感觉挂个标签让用户自己选择就行，cc3.0 应该不像 GPL 传染吧。

28

ciaochaos

OP

2024-03-04 18:03:22 +08:00

@rabbbit 嗯嗯

29

alphardex

2024-03-04 18:18:45 +08:00 via iPhone

1

同喜欢玩 Shader ，资瓷下

30

xieqiqiang00

2024-03-05 11:24:59 +08:00 via Android

v2 里少有的的真正让人眼前一亮的项目

31

admol

2024-03-05 15:17:31 +08:00

和我想的加背景有点不一样，我以为是给某个 Div 加背景，结果是占位加背景。

<Zenitho /> 好像有 BUG ，我放在我一个 div 里面的，就它宽度会 1680 ，其他都是和外面 Div 一样的宽度

<div class="isLoaded"><canvas style="--gradient-color-1:#ef008f; --gradient-color-2:#6ec3f4; --gradient-color-3:#7038ff; --gradient-color-4:#ffba27;" width="1680" height="600" class="isLoaded"></canvas></div>

32

admol

2024-03-05 15:25:51 +08:00

用上了，感谢
https://sora-text-to-video.com

33

xmtpw

2024-03-05 15:34:17 +08:00

支持大佬，加星

34

ciaochaos

OP

2024-03-05 17:23:34 +08:00

@admol 666

也感谢各位支持！现在这个项目还很不完善哈哈，受宠若惊，后面想加一个 MDX 的幻灯片组件，然后可以一键加上动态背景～欢迎前来交流

35

hellofreckles

2024-03-05 17:37:39 +08:00

逻辑不复杂，完全可以用一套适配层生成 react vue selvet 一系列库

36

rain0002009

2024-03-05 18:42:59 +08:00

字体背景搞成这样的是不是更炫酷一点

37

7gugu

2024-03-05 20:06:00 +08:00

感觉 UI 很精致

38

murongxdb

2024-03-05 20:18:30 +08:00

酷

39

Jack927

2024-03-05 21:14:21 +08:00

希望有 js 原生的版本，或者 web component 的版本，这样就能在任何地方使用了。

40

Cubat

2024-03-05 21:21:07 +08:00

太强了，很精致

41

drylong

2024-03-06 10:35:36 +08:00

very good ！使我领结旋转！
最近在学习可视化又有项目可以学习了
泰裤辣！

42

xiaojun996

2024-03-06 13:31:52 +08:00

很酷很精致很帅！

43

abcdecsf

2024-03-06 13:37:47 +08:00

👍🏻赞

44

q2677855779

2024-03-06 13:38:15 +08:00

酷炫

45

chengo

2024-03-06 16:06:29 +08:00

顺手看了下主页，原来是之前做 SD + QR code 的那位大佬，而且已经商业化了，厉害。

46

Leviathann

2024-03-06 16:10:15 +08:00

这些特效的名字是怎么起的

47

LHRUN

2024-03-06 16:17:51 +08:00

牛逼已 star

48

ciaochaos

OP

2024-03-06 20:52:15 +08:00

2

@Leviathann GPT4：给我一些像宜家家居命名的名字

49

Leviathann

2024-03-06 21:10:53 +08:00

@ciaochaos 听说宜家家居不少是有具体意义的瑞典语单词，只不过都是音译，让人不明觉厉

50

oneWill

2024-03-07 10:19:56 +08:00

支持，stared

51

oneWill

2024-03-07 10:33:33 +08:00

能增加支持自定义背景动态图吗

52

daguozi

2024-03-08 10:35:48 +08:00

已经用上了！谢谢 hard work 很给力！只是有点太鲜艳了我用了 grayscale 直接 filter 了一下下。希望以后有更多的 design ！
www.eletypes.com 我简单地给小网站加了几个 theme 以后慢慢调色。很好用！
谢谢老哥。以前我试着 babylonjs 写过类似的背景组件但是没有结果 performance 的问题。

53

ciaochaos

OP

2024-03-08 10:49:43 +08:00

@daguozi wow cool

@oneWill 目前还没有

54

ciaochaos

OP

2024-03-08 10:53:31 +08:00

更新了一个 Slides 组件！可以把 MDX 转为 React ，并加上动态背景 & 动画组件，欢迎尝试

https://uvcanvas.com/docs/components/slides