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

WEBGL

React

欢迎

组件

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

1

lawted

2024 年 3 月 4 日

赞👍

2

rizon

2024 年 3 月 4 日 via iPhone

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

3

leoskey

2024 年 3 月 4 日

效果很赞👍

4

HaroldFinchNYC

2024 年 3 月 4 日

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

5

guguji5

2024 年 3 月 4 日

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

6

ciaochaos

OP

2024 年 3 月 4 日

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

7

LinYa

2024 年 3 月 4 日

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

8

ciaochaos

OP

2024 年 3 月 4 日

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 年 3 月 4 日

什么时候支持 webgpu

10

litor

2024 年 3 月 4 日

赞👍，已 star

11

Steps

2024 年 3 月 4 日

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

12

ciaochaos

OP

2024 年 3 月 4 日

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

13

ciaochaos

OP

2024 年 3 月 4 日

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

14

liarsa

2024 年 3 月 4 日

已点 star

15

rm0gang0rf

2024 年 3 月 4 日

没有 react 的怎么办...

16

ciaochaos

OP

2024 年 3 月 4 日

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

17

LinYa

2024 年 3 月 4 日

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

18

MoTao

2024 年 3 月 4 日

支持支持，谢谢大佬贡献

19

tbc3211

2024 年 3 月 4 日

20

rm0gang0rf

2024 年 3 月 4 日

@ciaochaos 抽吧, react 才几个人

21

vczyh

2024 年 3 月 4 日

@rm0gang0rf 哈哈哈哈

22

rabbbit

2024 年 3 月 4 日

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 年 3 月 4 日

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

24

ciaochaos

OP

2024 年 3 月 4 日

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

25

ciaochaos

OP

2024 年 3 月 4 日

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

26

LiuJiang

2024 年 3 月 4 日

已 star ，谢谢大佬贡献

27

rabbbit

2024 年 3 月 4 日

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

28

ciaochaos

OP

2024 年 3 月 4 日

@rabbbit 嗯嗯

29

alphardex

2024 年 3 月 4 日 via iPhone

1

同喜欢玩 Shader ，资瓷下

30

xieqiqiang00

2024 年 3 月 5 日 via Android

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

31

admol

2024 年 3 月 5 日

和我想的加背景有点不一样，我以为是给某个 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 年 3 月 5 日

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

33

xmtpw

2024 年 3 月 5 日

支持大佬，加星

34

ciaochaos

OP

2024 年 3 月 5 日

@admol 666

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

35

hellofreckles

2024 年 3 月 5 日

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

36

rain0002009

2024 年 3 月 5 日

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

37

7gugu

2024 年 3 月 5 日

感觉 UI 很精致

38

murongxdb

2024 年 3 月 5 日

酷

39

Jack927

2024 年 3 月 5 日

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

40

Cubat

2024 年 3 月 5 日

太强了，很精致

41

drylong

2024 年 3 月 6 日

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

42

xiaojun996

2024 年 3 月 6 日

很酷很精致很帅！

43

abcdecsf

2024 年 3 月 6 日

👍🏻赞

44

q2677855779

2024 年 3 月 6 日

酷炫

45

chengo

2024 年 3 月 6 日

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

46

Leviathann

2024 年 3 月 6 日

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

47

LHRUN

2024 年 3 月 6 日

牛逼已 star

48

ciaochaos

OP

2024 年 3 月 6 日

2

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

49

Leviathann

2024 年 3 月 6 日

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

50

oneWill

2024 年 3 月 7 日

支持，stared

51

oneWill

2024 年 3 月 7 日

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

52

daguozi

2024 年 3 月 8 日

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

53

ciaochaos

OP

2024 年 3 月 8 日

@daguozi wow cool

@oneWill 目前还没有

54

ciaochaos

OP

2024 年 3 月 8 日

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

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