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

ciaochaos · 2024-03-03T21:25:18Z

刚开始整，架构还不是很完善，欢迎讨论～～ github.com/latentcat/uvcanvas uvcanvas.com

WEBGL

React

欢迎

组件

74 replies • 2024-03-25 12:20:24 +08:00

lawted

Mar 4, 2024

1

赞👍

rizon

Mar 4, 2024 via iPhone

2

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

leoskey

Mar 4, 2024

3

效果很赞👍

HaroldFinchNYC

Mar 4, 2024

4

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

guguji5

Mar 4, 2024

5

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

ciaochaos

OP

Mar 4, 2024

6

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

LinYa

Mar 4, 2024

7

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

ciaochaos

OP

Mar 4, 2024

3

8

@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

johnnyNg

Mar 4, 2024

9

什么时候支持 webgpu

litor

Mar 4, 2024

10

赞👍，已 star

Steps

Mar 4, 2024

11

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

ciaochaos

OP

Mar 4, 2024

12

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

ciaochaos

OP

Mar 4, 2024

13

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

liarsa

Mar 4, 2024

14

已点 star

rm0gang0rf

Mar 4, 2024

15

没有 react 的怎么办...

ciaochaos

OP

Mar 4, 2024

16

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

LinYa

Mar 4, 2024

17

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

MoTao

Mar 4, 2024

18

支持支持，谢谢大佬贡献

tbc3211

Mar 4, 2024

19

rm0gang0rf

Mar 4, 2024

20

@ciaochaos 抽吧, react 才几个人

vczyh

Mar 4, 2024

21

@rm0gang0rf 哈哈哈哈

rabbbit

Mar 4, 2024

22

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

rabbbit

Mar 4, 2024

23

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

ciaochaos

OP

Mar 4, 2024

24

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

ciaochaos

OP

Mar 4, 2024

25

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

jchencode

Mar 4, 2024

26

已 star ，谢谢大佬贡献

rabbbit

Mar 4, 2024

27

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

ciaochaos

OP

Mar 4, 2024

28

@rabbbit 嗯嗯

alphardex

Mar 4, 2024 via iPhone

1

29

同喜欢玩 Shader ，资瓷下

xieqiqiang00

Mar 5, 2024 via Android

30

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

admol

Mar 5, 2024

31

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

admol

Mar 5, 2024

32

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

xmtpw

Mar 5, 2024

33

支持大佬，加星

ciaochaos

OP

Mar 5, 2024

34

@admol 666

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

hellofreckles

Mar 5, 2024

35

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

rain0002009

Mar 5, 2024

36

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

7gugu

Mar 5, 2024

37

感觉 UI 很精致

murongxdb

PRO

Mar 5, 2024

38

酷

Jack927

Mar 5, 2024

39

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

Cubat

Mar 5, 2024

40

太强了，很精致

drylong

Mar 6, 2024

41

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

xiaojun996

Mar 6, 2024

42

很酷很精致很帅！

abcdecsf

Mar 6, 2024

43

👍🏻赞

q2677855779

Mar 6, 2024

44

酷炫

chengo

Mar 6, 2024

45

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

Leviathann

Mar 6, 2024

46

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

LHRUN

Mar 6, 2024

47

牛逼已 star

ciaochaos

OP

Mar 6, 2024

2

48

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

Leviathann

Mar 6, 2024

49

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

oneWill

Mar 7, 2024

50

支持，stared

oneWill

Mar 7, 2024

51

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

daguozi

Mar 8, 2024

52

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

ciaochaos

OP

Mar 8, 2024

53

@daguozi wow cool

@oneWill 目前还没有

ciaochaos

OP

Mar 8, 2024

54

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

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