Skip to content

Commit

Permalink
core: 逐字歌词opacity问题修复
Browse files Browse the repository at this point in the history
  • Loading branch information
Eplor committed Jan 17, 2024
1 parent 9172806 commit b0e7ae6
Show file tree
Hide file tree
Showing 6 changed files with 93 additions and 19 deletions.
6 changes: 3 additions & 3 deletions packages/bncm/src/player/common/background.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,20 +67,20 @@ export const Background: FC = () => {
0.8,
) -
1.0) *
5.0;
2.0;
setLowFreqVolume(curValue);

const increasing = curValue < value;

if (increasing) {
curValue = Math.min(
value,
curValue + (value - curValue) * 0.0008 * delta + 0.001,
curValue + (value - curValue) * 0.001 * delta + 0.001,
);
} else {
curValue = Math.max(
value,
curValue + (value - curValue) * 0.0008 * delta - 0.001,
curValue + (value - curValue) * 0.001 * delta - 0.001,
);
}

Expand Down
2 changes: 1 addition & 1 deletion packages/bncm/src/player/common/fft-context.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ export const AudioFFTContext: FC = () => {
sampleRate: 48000,
fftSize: fftData.length,
outBandsQty: 61,
startFrequency: 100,
startFrequency: 60,
endFrequency: 14000,
aWeight: true,
});
Expand Down
77 changes: 76 additions & 1 deletion packages/core/src/bg-render/shaders/eplor.frag.glsl
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,77 @@
#version 300 es
precision highp float;uniform float IIIlllllllIIIllIl,lIIIlllllIllIl,IIIlllIlIIllll;uniform sampler2D IlllIIlIlllIll;uniform vec2 IIlIlIIlIlIllI;out vec4 lIIlIIIIIlIlIlllIIIIlIIl;mat2 lIIllIIlIIIllIl(float IIIlIIlIIIlllIII){return mat2(cos(IIIlIIlIIIlllIII),-sin(IIIlIIlIIIlllIII),sin(IIIlIIlIIIlllIII),cos(IIIlIIlIIIlllIII));}float IllllIIlIllII(float llIIllIllIIIllI){return fract(sin(llIIllIllIIIllI)*43758.5453);}float llIlIIllllIII(vec2 IIIlIIlIIIlllIII){vec2 IIllIlIIlllI=floor(IIIlIIlIIIlllIII),lIlIllIIIIIlIl=fract(IIIlIIlIIIlllIII);lIlIllIIIIIlIl=lIlIllIIIIIlIl*lIlIllIIIIIlIl*(3.-2.*lIlIllIIIIIlIl);float lIlIlIlIlIlIIl=IIllIlIIlllI.x+IIllIlIIlllI.y*57.;return mix(mix(IllllIIlIllII(lIlIlIlIlIlIIl),IllllIIlIllII(lIlIlIlIlIlIIl+1.),lIlIllIIIIIlIl.x),mix(IllllIIlIllII(lIlIlIlIlIlIIl+57.),IllllIIlIllII(lIlIlIlIlIlIIl+58.),lIlIllIIIIIlIl.x),lIlIllIIIIIlIl.y);}vec2 lllIIIIIIllIlIIIlI(vec2 IlllIIlIIIIlIIII,float lIIIIlllIIIIllIlIlI,vec2 IlIlIIIIlIlllIlIII){float lIIlIllIIIlIl=llIlIIllllIII(IlllIIlIIIIlIIII+sin(.2*lIIIlllllIllIl)*.1+.1)*3.2831;IlllIIlIIIIlIIII+=vec2(0,.5);lIIlIllIIIlIl+=llIlIIllllIII(IlllIIlIIIIlIIII*vec2(1)*3.5-sin(.3*lIIIlllllIllIl)*.1+.1)*2.2831*IIIlllllllIIIllIl;lIIlIllIIIlIl-=lIIIIlllIIIIllIlIlI;return vec2(cos(lIIlIllIIIlIl),sin(lIIlIllIIIlIl));}const mat3 lIIllIIIlllIl=mat3(1.,.02,.002,.02,1.,.008,.002,.02,1.),lIIIlllIIIIll=mat3(1.022,-.02,-.002,-.02,1.028,-.008,-.002,-.02,1.022);vec3 IllllIIIlIlllI(vec3 lIlIIlIlIIIllIll){lIlIIlIlIIIllIll*=lIIllIIIlllIl;lIlIIlIlIIIllIll=pow(lIlIIlIlIIIllIll,vec3(3));lIlIIlIlIIIllIll/=1.+lIlIIlIlIIIllIll;lIlIIlIlIIIllIll=pow(lIlIIlIlIIIllIll,vec3(1./3.));lIlIIlIlIIIllIll*=lIIIlllIIIIll;return clamp(lIlIIlIlIIIllIll,vec3(0),vec3(1));}void main(){vec2 lIIIlIIllIlIIlI=sin(lIIIlllllIllIl*.1)*.3+.1+gl_FragCoord.xy/IIlIlIIlIlIllI.xy,lIIllIIlIIIllI=lIIIlIIllIlIIlI*.8f+vec2(-.8f,-.3f);lIIllIIlIIIllI.x*=IIlIlIIlIlIllI.x/IIlIlIIlIlIllI.y;float lIIlIIlIIlIIIlII=gl_FragCoord.x/max(IIlIlIIlIlIllI.x,IIlIlIIlIlIllI.y),lIIIlIllIllIlIIl=0.f;vec3 lIIIlIlIIIlIlIIl=texture(IlllIIlIlllIll,-lIIIlllllIllIl*.1+lIIllIIlIIIllI*lIIllIIlIIIllIl(lIIIlllllIllIl*.4)).xyz;vec2 lIlIIlIlIIIllIll=lIIllIIlIIIllI;for(int IllIlIIlIIlllllIIIl=0;IllIlIIlIIlllllIIIl<8;IllIlIIlIIlllllIIIl++){vec2 lIllIIlIIlIIIll=lllIIIIIIllIlIIIlI(lIIllIIlIIIllI,lIIlIIlIIlIIIlII,lIIIlIIllIlIIlI);float lIIlIlIIlIIlIllI=float(IllIlIIlIIlllllIIIl)/16.f,lIIllIIlIIIIlIII=4.f*lIIlIlIIlIIlIllI*(1.f-lIIlIlIIlIIlIllI);vec3 llIIlIIIIlIIlIII=lIIllIIlIIIIlIII*texture(IlllIIlIlllIll,lIIIlllllIllIl*.1+lIIllIIlIIIllI*lIIllIIlIIIllIl(lIIIlllllIllIl*.4)+(3.-IIIlllIlIIllll)*.2*(IllIlIIlIIlllllIIIl%2==0?-1.:1.2)).xyz;llIIlIIIIlIIlIII*=mix(vec3(.9),vec3(1),.5-.5*dot(reflect(vec3(lIllIIlIIlIIIll,0),vec3(1,0,0)).xy,vec2(.707)));lIIIlIlIIIlIlIIl+=lIIllIIlIIIIlIII*llIIlIIIIlIIlIII;lIIIlIllIllIlIIl+=lIIllIIlIIIIlIII;lIIllIIlIIIllI+=.05f*lIllIIlIIlIIIll*(sin(lIIIlllllIllIl*2.)*.3+1.2);lIlIIlIlIIIllIll+=.05f*lIllIIlIIlIIIll;}lIIIlIlIIIlIlIIl/=lIIIlIllIllIlIIl;lIIIlIlIIIlIlIIl*=2.8f;lIIIlIlIIIlIlIIl=1.f-exp(-lIIIlIlIIIlIlIIl);lIIIlIlIIIlIlIIl=pow(lIIIlIlIIIlIlIIl,vec3(2));lIIIlIlIIIlIlIIl*=.9f;lIIIlIlIIIlIlIIl=IllllIIIlIlllI(lIIIlIlIIIlIlIIl);lIIlIIIIIlIlIlllIIIIlIIl=vec4(lIIIlIlIIIlIlIIl,1);}
precision highp float;
uniform float IIIlllllllIIIllIl,lIIIlllllIllIl,IIIlllIlIIllll;
uniform sampler2D IlllIIlIlllIll;
uniform vec2 IIlIlIIlIlIllI;
out vec4 lIIlIIIIIlIlIlllIIIIlIIl;
mat2 lIIllIIlIIIllIl(float IIIlIIlIIIlllIII){
return mat2(cos(IIIlIIlIIIlllIII),-sin(IIIlIIlIIIlllIII),
sin(IIIlIIlIIIlllIII),cos(IIIlIIlIIIlllIII));
}
float IllllIIlIllII(float llIIllIllIIIllI)
{
return fract(sin(llIIllIllIIIllI)*43758.5453);
}
float llIlIIllllIII(vec2 IIIlIIlIIIlllIII)
{
vec2 IIllIlIIlllI=floor(IIIlIIlIIIlllIII),lIlIllIIIIIlIl=fract(IIIlIIlIIIlllIII);
lIlIllIIIIIlIl=lIlIllIIIIIlIl*lIlIllIIIIIlIl*(3.-2.*lIlIllIIIIIlIl);
float lIlIlIlIlIlIIl=IIllIlIIlllI.x+IIllIlIIlllI.y*57.;
return mix(mix(IllllIIlIllII(lIlIlIlIlIlIIl),IllllIIlIllII(lIlIlIlIlIlIIl+1.),lIlIllIIIIIlIl.x),mix(IllllIIlIllII(lIlIlIlIlIlIIl+57.),IllllIIlIllII(lIlIlIlIlIlIIl+58.),lIlIllIIIIIlIl.x),lIlIllIIIIIlIl.y);
}
vec2 lllIIIIIIllIlIIIlI(vec2 IlllIIlIIIIlIIII,float lIIIIlllIIIIllIlIlI,vec2 IlIlIIIIlIlllIlIII)
{
float lIIlIllIIIlIl=llIlIIllllIII(IlllIIlIIIIlIIII*1.+sin(.2*lIIIlllllIllIl)*.1+.1)*3.2831;
IlllIIlIIIIlIIII+=vec2(.0,.5);
lIIlIllIIIlIl+=llIlIIllllIII(IlllIIlIIIIlIIII*vec2(1.0,1.)*3.5-sin(.3*lIIIlllllIllIl)*.1+.1)*2.2831*IIIlllllllIIIllIl;
lIIlIllIIIlIl-=lIIIIlllIIIIllIlIlI;
return vec2(cos(lIIlIllIIIlIl),sin(lIIlIllIIIlIl));
}
const mat3 lIIllIIIlllIl=mat3(1.,.02,.002,.02,1.,.008,.002,.02,1.),lIIIlllIIIIll=mat3(1.022,-.02,-.002,-.02,1.028,-.008,-.002,-.02,1.022);
vec3 IllllIIIlIlllI(vec3 lIlIIlIlIIIllIll)
{
lIlIIlIlIIIllIll*=lIIllIIIlllIl;
lIlIIlIlIIIllIll=pow(lIlIIlIlIIIllIll,vec3(3));
lIlIIlIlIIIllIll/=1.+lIlIIlIlIIIllIll;
lIlIIlIlIIIllIll=pow(lIlIIlIlIIIllIll,vec3(1./3.));
lIlIIlIlIIIllIll*=lIIIlllIIIIll;
return clamp(lIlIIlIlIIIllIll,vec3(0),vec3(1));
}
void main()
{
// lIIlIIIIIlIlIlllIIIIlIIl=texture(IlllIIlIlllIll,gl_FragCoord.xy/IIlIlIIlIlIllI.xy);
// return;
vec2 lIIIlIIllIlIIlI=sin(lIIIlllllIllIl*.1)*.3+.1+gl_FragCoord.xy/IIlIlIIlIlIllI.xy,lIIllIIlIIIllI=lIIIlIIllIlIIlI*.8f+vec2(-0.8f,-.3f);
lIIllIIlIIIllI.x*=IIlIlIIlIlIllI.x/IIlIlIIlIlIllI.y;
float lIIlIIlIIlIIIlII=gl_FragCoord.x/max(IIlIlIIlIlIllI.x,IIlIlIIlIlIllI.y),lIIIlIllIllIlIIl=0.f;
vec3 lIIIlIlIIIlIlIIl=texture(IlllIIlIlllIll,-lIIIlllllIllIl*.1+1.*lIIllIIlIIIllI*lIIllIIlIIIllIl(lIIIlllllIllIl*.4)).xyz;
vec2 lIlIIlIlIIIllIll=lIIllIIlIIIllI;
for(int IllIlIIlIIlllllIIIl=0;IllIlIIlIIlllllIIIl<8;IllIlIIlIIlllllIIIl++)
{
vec2 lIllIIlIIlIIIll=lllIIIIIIllIlIIIlI(lIIllIIlIIIllI,lIIlIIlIIlIIIlII,lIIIlIIllIlIIlI);
float lIIlIlIIlIIlIllI=float(IllIlIIlIIlllllIIIl)/16.f,lIIllIIlIIIIlIII=4.f*lIIlIlIIlIIlIllI*(1.f-lIIlIlIIlIIlIllI);
vec3 llIIlIIIIlIIlIII=lIIllIIlIIIIlIII*texture(IlllIIlIlllIll,lIIIlllllIllIl*.1+1.2*lIIllIIlIIIllI*lIIllIIlIIIllIl(lIIIlllllIllIl*.4)+(3.-IIIlllIlIIllll)*.3*(IllIlIIlIIlllllIIIl%2==0?-1.:1.2)).xyz;
// vec3 llIIlIIIIlIIlIII=lIIllIIlIIIIlIII*texture(IlllIIlIlllIll,(IllIlIIlIIlllllIIIl%2==0?lIIllIIlIIIllI-IIIlllIlIIllll*.2:vec2(1.)-lIIllIIlIIIllI*1.2+IIIlllIlIIllll*.2)*rotate2d(lIIIlllllIllIl*.4)).xyz;
llIIlIIIIlIIlIII*=mix(vec3(.8),vec3(1),.5-.5*dot(reflect(vec3(lIllIIlIIlIIIll,0),vec3(1,0,0)).xy,vec2(.707)));
lIIIlIlIIIlIlIIl+=lIIllIIlIIIIlIII*llIIlIIIIlIIlIII;
lIIIlIllIllIlIIl+=lIIllIIlIIIIlIII;
// if (IllIlIIlIIlllllIIIl >= 4) {
// lIIllIIlIIIllI+=.03f*lIllIIlIIlIIIll*(sin(lIIIlllllIllIl*2.)*.9+.5)*3.;
// } else {
// lIIllIIlIIIllI+=.01f*lIllIIlIIlIIIll*(sin(lIIIlllllIllIl*2.)*.5+.9)*3.;
// }
lIIllIIlIIIllI+=.05f*lIllIIlIIlIIIll*(sin(lIIIlllllIllIl*2.)*.4+1.2);
lIlIIlIlIIIllIll+=.05f*lIllIIlIIlIIIll;
}
lIIIlIlIIIlIlIIl/=lIIIlIllIllIlIIl;
vec2 IIlllIIlIllIIlI=lllIIIIIIllIlIIIlI(lIlIIlIlIIIllIll,lIIlIIlIIlIIIlII,lIIIlIIllIlIIlI);
// lIIIlIlIIIlIlIIl*=.95f+.35f*dot(IIlllIIlIllIIlI,vec2(.707f));
// lIIIlIlIIIlIlIIl*=.2f+.8f*pow(2.f*lIIIlIIllIlIIlI.x*(1.f-lIIIlIIllIlIIlI.x),.1f);
lIIIlIlIIIlIlIIl*=2.8f;
lIIIlIlIIIlIlIIl=1.f-exp(-lIIIlIlIIIlIlIIl);
lIIIlIlIIIlIlIIl=pow(lIIIlIlIIIlIlIIl,vec3(2.0));
lIIIlIlIIIlIlIIl*=.9f;
lIIIlIlIIIlIlIIl=IllllIIIlIlllI(lIIIlIlIIIlIlIIl);
// lIIIlIlIIIlIlIIl += (1.0 / 255.0) * gradientNoise(gl_FragCoord.xy) - (0.5 / 255.0);
lIIlIIIIIlIlIlllIIIIlIIl=vec4(lIIIlIlIIIlIlIIl,1);
}
8 changes: 4 additions & 4 deletions packages/core/src/bg-render/shaders/noise.frag.glsl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ precision highp float;

uniform sampler2D src;
uniform float frameTime;
uniform vec2 renderSize;
in vec2 f_v_coord;
out vec4 fragColor;

Expand All @@ -14,7 +15,7 @@ vec3 nrand3(vec2 n) {
return vec3(nrand(n), nrand(n + vec2(0.15f)), nrand(n + vec2(0.3f)));
}

float blur_radius = 0.02f; //Blur radius, tweak it ;)
float blur_radius = 0.01f; //Blur radius, tweak it ;)

/* Gradient noise from Jorge Jimenez's presentation: */
/* http://www.iryoku.com/next-generation-post-processing-in-call-of-duty-advanced-warfare */
Expand All @@ -29,13 +30,12 @@ void main() {
float dither = (1.0 / 255.0) * gradientNoise(gl_FragCoord.xy) - (0.5 / 255.0);

vec4 color = texture(src, tex_coord);

#if 1
int count = 0;
vec3 sampled_color = vec3(0.0f);
for(float i = -2.f; i <= 2.f; i += 1.f) {
for(float j = -2.f; j <= 2.f; j += 1.f) {
vec2 offset = blur_radius * (fract(vec2(0.61803398875f, 0.38196601125f) * 1.f) - 0.5f + vec2(sin(i), cos(j)) / 32.f) + dither * .5;
vec2 offset = blur_radius * (fract(vec2(0.61803398875f, 0.38196601125f) * 1.f) - 0.5f + vec2(sin(i), cos(j)) / 32.f) + dither * .1;
sampled_color += textureLod(src, offset + tex_coord, 3.0f).xyz;
count++;
}
Expand All @@ -48,7 +48,7 @@ void main() {

vec3 deviation = sampled_color - color.rgb;

vec3 blend_factor = vec3(lessThan(deviation, vec3(0.03f)));
vec3 blend_factor = vec3(lessThan(deviation, vec3(0.02f)));

color.rgb = mix(color.rgb, sampled_color, blend_factor);

Expand Down
14 changes: 7 additions & 7 deletions packages/core/src/lyric-player/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -732,11 +732,11 @@ export class LyricPlayer extends EventTarget implements HasElement, Disposable {
? i < (interlude ? interlude[2] + 1 : this.scrollToIndex)
? 0
: hasBuffered
? 1
: 1 / 3
? 1 / 3
: 1 / 3
: hasBuffered
? 1
: 1 / 3;
? 1
: i < this.scrollToIndex || (interlude && i < interlude[2] + 1 || i == this.lyricLinesEl.length - 1) || this.isNonDynamic ? 1 / 3 : /*el.getLine().translatedLyric || el.getLine().romanLyric ? 1 / 3 :*/ 1;
el.setTransform(
this.padding,
curPos,
Expand All @@ -746,9 +746,9 @@ export class LyricPlayer extends EventTarget implements HasElement, Disposable {
? isActive
? 0
: 1 +
(i < this.scrollToIndex
? Math.abs(this.scrollToIndex - i)
: Math.abs(i - Math.max(this.scrollToIndex, latestIndex)))
(i < this.scrollToIndex
? Math.abs(this.scrollToIndex - i)
: Math.abs(i - Math.max(this.scrollToIndex, latestIndex)))
: 0,
force,
delay,
Expand Down
5 changes: 2 additions & 3 deletions packages/core/src/lyric-player/lyric-line.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -479,10 +479,10 @@ export class LyricLineEl extends EventTarget implements HasElement, Disposable {
} else if (du >= 2000 && du < 3000) {
amount = 1.5;
blur = 0.3;
} else if (du >= 3000 && du < 4500) {
} else if (du >= 3000 && du < 4000) {
amount = 2;
blur = 0.4;
} else if (du >= 4500) {
} else if (du >= 4000) {
amount = 3;
blur = 0.4;
}
Expand Down Expand Up @@ -539,7 +539,6 @@ export class LyricLineEl extends EventTarget implements HasElement, Disposable {
}
this.splittedWords.forEach((word, i) => {
const wordEl = word.mainElement;
console.log(word.startTime + " " + this.getLine().startTime);
if (wordEl) {
const wordPaddingInline = parseFloat(
getComputedStyle(wordEl).paddingInline,
Expand Down

0 comments on commit b0e7ae6

Please sign in to comment.