Store Page
Wallpaper Engine
All Discussions Screenshots Artwork Broadcasts Videos Workshop News Guides Reviews

Wallpaper Engine

Store Page
Wallpaper Engine >  Workshop > wesker926's Workshop
655 ratings
初音音频动画网页壁纸 - miku audio animation webpage wallpaper
Description Discussions0 Comments13 Change Notes
   
Award
Favorite
Favorited
Unfavorite
Miscellaneous: Audio responsive
Type: Web
Age Rating: Everyone
Genre: Anime
Resolution: Dynamic resolution
Category: Wallpaper
File Size
Posted
Updated
200.074 MB
18 Jan, 2018 @ 2:45am
19 Jul, 2018 @ 7:25am
3 Change Notes ( view )
Created by
wesker926
Offline
See all 142 collections (some may be hidden)
2,370 Unique Visitors
16,457 Current Subscribers
1,535 Current Favorites

Subscribe to download
初音音频动画网页壁纸 - miku audio animation webpage wallpaper

Description
初音音频动画网页壁纸 - miku audio animation webpage wallpaper

My English is not well, so please use Google Translate.
----------------------------------------------------
2018.01.19

加了点东西，背景上放了些星星。
注：仅支持16:9的屏幕！
----------------------------------------------------
最近换电脑，找新壁纸的时候发现了一张公主殿下的图很漂亮，于是就想把这个做成音频壁纸。

主要想法是抠图-->AE-->透明视频或图序列-->放在web里面。

抠图不用多说，抠出人物图层和变色图层；

AE主要是做了下color图层的循环色变；（不要问我为啥不做头发飘动效果，殿下的头发太难搞了，而且我试了下效果很差，等以后再说吧。）

渲染时候我先是尝试了AVI和MOV带alpha通道的输出格式，结果AVI那个几十G，MOV那个无法播放，折腾半天最后用了rgba的png序列；

为了减小空间和内存占用，仅对color图层进行渲染，通过坐标比例覆盖到背景人物上；

在web里面，加载1张bg图和300张的color图层序列（所以实际上用的时候全在内存里面了，而且不加载完不会出效果，电脑慢的pong友慎用。），通过当前color图层位置，判断hsv的色调值。具体是300图对应360色调，中间有一个变化点，说不太清楚可以看下源码；

然后就是根据音频数据画动画了，这些就不说了。

我的分辨率是3840*2160（4K），所以测试仅在这个分辨率下做了，其他分辨率如果有问题请联系我更改；

我的配置是8700K+1080TI+DDR4_3200_C14，资源占用率不高（没有判断价值），如果你尝试后很卡的话建议不要使用。

在壁纸文件夹里有一个无关资源，里面有AE输出的MP4和原图，我不知道原图作者是谁，所以如果有人知道麻烦告诉我，谢谢。

----------------------------------------------------
话说我刚预定了公主殿下十周年的手办啊！- ( ゜- ゜)つロ
13 Comments
< >
ХирохитоБочароши 22 Dec, 2018 @ 11:47am 
Nice, VERY NICE, Если кратко то - ахуенно
Kagamine 20 Jul, 2018 @ 2:00am 
Thank you so much!!! :happyz: :8bitheart: :8bitheart: :8bitheart:
wesker926  [author] 19 Jul, 2018 @ 7:41am 
@Kagamine:
You can follow the steps below:
(1) Update this web file, I modified the dependency of the color change, from the frame count to the timing, which can prevent the synchronization due to the number of frames;
(2) Open the wallpaper UI, right-click the project, open it in the Explorer, and copy all the files;
(3) Create a new folder, paste the file, then open index.html with a text editor, comment out 293 - 295 lines (write '//' in front of these lines);
(4) Open the wallpaper UI, use "Open from file", select the index.html file.
Sorry, I can't upload another project because the changes are small. If I create a new project, it will mislead the user.
wesker926  [author] 19 Jul, 2018 @ 7:41am 
@Kagamine:
你可以按照下面的步骤来做：
（1）更新一下这个web文件，我修改了颜色变化的依赖，由帧计数变为计时，这样可以防止因为帧数的原因导致不同步；
（2）打开wallpaper UI，右键这个项目，在资源管理器中打开，复制所有文件；
（3）新建一个文件夹，粘贴文件，然后用文本编辑器打开index.html，注释掉293 - 295行（在这些行前面书写'//'）；
（4）打开wallpaper UI，使用“从文件打开”，选择index.html文件。
很抱歉我不能另外上传一个项目，因为改动很小。如果我新建项目会误导使用者。
Kagamine 18 Jul, 2018 @ 2:15pm 
EXACTLY!! Sorry for my poor description... :sadz:
wesker926  [author] 18 Jul, 2018 @ 3:04am 
@Kagamine:
唔，我英语不太好，你的描述也有点简洁，所以我不确定具体所指。或许像是这样？
Emmm, my english is not well, and your description is a bit succinct, so I am not sure what to mean. Maybe like this?

https://steamuserimages-a.akamaihd.net/ugc/924811883701847254/B16C7918808A8BE21AD5665E4F71F92D424A3DAA/
Kagamine 18 Jul, 2018 @ 1:06am 
Can you please make a version without Miku for side monitors too!?!? :lovez:
晚安明天见 26 Mar, 2018 @ 8:13am 
如果 改一下内存占用更小就好了 希望作者改一下
wesker926  [author] 3 Mar, 2018 @ 1:52am 
@刑，应该是颜色调的不对，可惜我没学过绘画设计方面的内容。。。o(╯□╰)o
欧洲附魔金萝卜 2 Mar, 2018 @ 9:40am 
emmm,总感觉这款看起来怪怪的,前后位视差看起来有点别扭