| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334 |
- <!DOCTYPE html>
- <html>
- <head>
- <title>樱花</title>
- <meta charset="utf-8">
- <style>
- .text-box {
- position: fixed;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- font-size:
- 36px;
- color:black;
- text-shadow: 0 0 5px #ffa7aa;
- }
- </style>
- </head>
- <body>
- <canvas></canvas>
- <div class="text-box">
- <div id="userCount"></div>
- <div id="dayActiveUserCount"></div>
- </div>
- </body>
- <script src="js/sakura.js"></script>
- <script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
- <script src="../src/js/myConfig.js"></script>
- <script>
- // window.requestAPI({
- // url: "/admin/user/getOnlineUserCount",
- // success: (res) => {
- // if (res.code == 0) {
- // document.getElementById("userCount").innerText = `在线玩家:${res.data}人`;
- // }
- // }
- // })
- window.requestAPI({
- url: "/admin/user/getDayActiveUserCount",
- success: (res) => {
- if (res.code == 0) {
- document.getElementById("dayActiveUserCount").innerText = `今日活跃:${res.data}人`;
- }
- }
- })
- </script>
- </html>
- <!-- sakura shader -->
- <script id="sakura_point_vsh" type="x-shader/x_vertex">
- uniform mat4 uProjection;
- uniform mat4 uModelview;
- uniform vec3 uResolution;
- uniform vec3 uOffset;
- uniform vec3 uDOF; //x:focus distance, y:focus radius, z:max radius
- uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start
- attribute vec3 aPosition;
- attribute vec3 aEuler;
- attribute vec2 aMisc; //x:size, y:fade
- varying vec3 pposition;
- varying float psize;
- varying float palpha;
- varying float pdist;
- //varying mat3 rotMat;
- varying vec3 normX;
- varying vec3 normY;
- varying vec3 normZ;
- varying vec3 normal;
- varying float diffuse;
- varying float specular;
- varying float rstop;
- varying float distancefade;
- void main(void) {
- // Projection is based on vertical angle
- vec4 pos = uModelview * vec4(aPosition + uOffset, 1.0);
- gl_Position = uProjection * pos;
- gl_PointSize = aMisc.x * uProjection[1][1] / -pos.z * uResolution.y * 0.5;
- pposition = pos.xyz;
- psize = aMisc.x;
- pdist = length(pos.xyz);
- palpha = smoothstep(0.0, 1.0, (pdist - 0.1) / uFade.z);
- vec3 elrsn = sin(aEuler);
- vec3 elrcs = cos(aEuler);
- mat3 rotx = mat3(
- 1.0, 0.0, 0.0,
- 0.0, elrcs.x, elrsn.x,
- 0.0, -elrsn.x, elrcs.x
- );
- mat3 roty = mat3(
- elrcs.y, 0.0, -elrsn.y,
- 0.0, 1.0, 0.0,
- elrsn.y, 0.0, elrcs.y
- );
- mat3 rotz = mat3(
- elrcs.z, elrsn.z, 0.0,
- -elrsn.z, elrcs.z, 0.0,
- 0.0, 0.0, 1.0
- );
- mat3 rotmat = rotx * roty * rotz;
- normal = rotmat[2];
- mat3 trrotm = mat3(
- rotmat[0][0], rotmat[1][0], rotmat[2][0],
- rotmat[0][1], rotmat[1][1], rotmat[2][1],
- rotmat[0][2], rotmat[1][2], rotmat[2][2]
- );
- normX = trrotm[0];
- normY = trrotm[1];
- normZ = trrotm[2];
- const vec3 lit = vec3(0.6917144638660746, 0.6917144638660746, -0.20751433915982237);
- float tmpdfs = dot(lit, normal);
- if(tmpdfs < 0.0) {
- normal = -normal;
- tmpdfs = dot(lit, normal);
- }
- diffuse = 0.4 + tmpdfs;
- vec3 eyev = normalize(-pos.xyz);
- if(dot(eyev, normal) > 0.0) {
- vec3 hv = normalize(eyev + lit);
- specular = pow(max(dot(hv, normal), 0.0), 20.0);
- }
- else {
- specular = 0.0;
- }
- rstop = clamp((abs(pdist - uDOF.x) - uDOF.y) / uDOF.z, 0.0, 1.0);
- rstop = pow(rstop, 0.5);
- //-0.69315 = ln(0.5)
- distancefade = min(1.0, exp((uFade.x - pdist) * 0.69315 / uFade.y));
- }
- </script>
- <script id="sakura_point_fsh" type="x-shader/x_fragment">
- #ifdef GL_ES
- //precision mediump float;
- precision highp float;
- #endif
- uniform vec3 uDOF; //x:focus distance, y:focus radius, z:max radius
- uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start
- const vec3 fadeCol = vec3(0.08, 0.03, 0.06);
- varying vec3 pposition;
- varying float psize;
- varying float palpha;
- varying float pdist;
- //varying mat3 rotMat;
- varying vec3 normX;
- varying vec3 normY;
- varying vec3 normZ;
- varying vec3 normal;
- varying float diffuse;
- varying float specular;
- varying float rstop;
- varying float distancefade;
- float ellipse(vec2 p, vec2 o, vec2 r) {
- vec2 lp = (p - o) / r;
- return length(lp) - 1.0;
- }
- void main(void) {
- vec3 p = vec3(gl_PointCoord - vec2(0.5, 0.5), 0.0) * 2.0;
- vec3 d = vec3(0.0, 0.0, -1.0);
- float nd = normZ.z; //dot(-normZ, d);
- if(abs(nd) < 0.0001) discard;
- float np = dot(normZ, p);
- vec3 tp = p + d * np / nd;
- vec2 coord = vec2(dot(normX, tp), dot(normY, tp));
- //angle = 15 degree
- const float flwrsn = 0.258819045102521;
- const float flwrcs = 0.965925826289068;
- mat2 flwrm = mat2(flwrcs, -flwrsn, flwrsn, flwrcs);
- vec2 flwrp = vec2(abs(coord.x), coord.y) * flwrm;
- float r;
- if(flwrp.x < 0.0) {
- r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.36, 0.96) * 0.5);
- }
- else {
- r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.58, 0.96) * 0.5);
- }
- if(r > rstop) discard;
- vec3 col = mix(vec3(1.0, 0.8, 0.75), vec3(1.0, 0.9, 0.87), r);
- float grady = mix(0.0, 1.0, pow(coord.y * 0.5 + 0.5, 0.35));
- col *= vec3(1.0, grady, grady);
- col *= mix(0.8, 1.0, pow(abs(coord.x), 0.3));
- col = col * diffuse + specular;
- col = mix(fadeCol, col, distancefade);
- float alpha = (rstop > 0.001)? (0.5 - r / (rstop * 2.0)) : 1.0;
- alpha = smoothstep(0.0, 1.0, alpha) * palpha;
- gl_FragColor = vec4(col * 0.5, alpha);
- }
- </script>
- <!-- effects -->
- <script id="fx_common_vsh" type="x-shader/x_vertex">
- uniform vec3 uResolution;
- attribute vec2 aPosition;
- varying vec2 texCoord;
- varying vec2 screenCoord;
- void main(void) {
- gl_Position = vec4(aPosition, 0.0, 1.0);
- texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);
- screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);
- }
- </script>
- <script id="bg_fsh" type="x-shader/x_fragment">
- #ifdef GL_ES
- //precision mediump float;
- precision highp float;
- #endif
- uniform vec2 uTimes;
- varying vec2 texCoord;
- varying vec2 screenCoord;
- void main(void) {
- vec3 col;
- float c;
- vec2 tmpv = texCoord * vec2(0.8, 1.0) - vec2(0.95, 1.0);
- c = exp(-pow(length(tmpv) * 1.8, 2.0));
- col = mix(vec3(0.02, 0.0, 0.03), vec3(0.96, 0.98, 1.0) * 1.5, c);
- gl_FragColor = vec4(col * 0.5, 1.0);
- }
- </script>
- <script id="fx_brightbuf_fsh" type="x-shader/x_fragment">
- #ifdef GL_ES
- //precision mediump float;
- precision highp float;
- #endif
- uniform sampler2D uSrc;
- uniform vec2 uDelta;
- varying vec2 texCoord;
- varying vec2 screenCoord;
- void main(void) {
- vec4 col = texture2D(uSrc, texCoord);
- gl_FragColor = vec4(col.rgb * 2.0 - vec3(0.5), 1.0);
- }
- </script>
- <script id="fx_dirblur_r4_fsh" type="x-shader/x_fragment">
- #ifdef GL_ES
- //precision mediump float;
- precision highp float;
- #endif
- uniform sampler2D uSrc;
- uniform vec2 uDelta;
- uniform vec4 uBlurDir; //dir(x, y), stride(z, w)
- varying vec2 texCoord;
- varying vec2 screenCoord;
- void main(void) {
- vec4 col = texture2D(uSrc, texCoord);
- col = col + texture2D(uSrc, texCoord + uBlurDir.xy * uDelta);
- col = col + texture2D(uSrc, texCoord - uBlurDir.xy * uDelta);
- col = col + texture2D(uSrc, texCoord + (uBlurDir.xy + uBlurDir.zw) * uDelta);
- col = col + texture2D(uSrc, texCoord - (uBlurDir.xy + uBlurDir.zw) * uDelta);
- gl_FragColor = col / 5.0;
- }
- </script>
- <!-- effect fragment shader template -->
- <script id="fx_common_fsh" type="x-shader/x_fragment">
- #ifdef GL_ES
- //precision mediump float;
- precision highp float;
- #endif
- uniform sampler2D uSrc;
- uniform vec2 uDelta;
- varying vec2 texCoord;
- varying vec2 screenCoord;
- void main(void) {
- gl_FragColor = texture2D(uSrc, texCoord);
- }
- </script>
- <!-- post processing -->
- <script id="pp_final_vsh" type="x-shader/x_vertex">
- uniform vec3 uResolution;
- attribute vec2 aPosition;
- varying vec2 texCoord;
- varying vec2 screenCoord;
- void main(void) {
- gl_Position = vec4(aPosition, 0.0, 1.0);
- texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);
- screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);
- }
- </script>
- <script id="pp_final_fsh" type="x-shader/x_fragment">
- #ifdef GL_ES
- //precision mediump float;
- precision highp float;
- #endif
- uniform sampler2D uSrc;
- uniform sampler2D uBloom;
- uniform vec2 uDelta;
- varying vec2 texCoord;
- varying vec2 screenCoord;
- void main(void) {
- vec4 srccol = texture2D(uSrc, texCoord) * 2.0;
- vec4 bloomcol = texture2D(uBloom, texCoord);
- vec4 col;
- col = srccol + bloomcol * (vec4(1.0) + srccol);
- col *= smoothstep(1.0, 0.0, pow(length((texCoord - vec2(0.5)) * 2.0), 1.2) * 0.5);
- col = pow(col, vec4(0.45454545454545)); //(1.0 / 2.2)
- gl_FragColor = vec4(col.rgb, 1.0);
- gl_FragColor.a = 1.0;
- }
- </script>
|