sakura.html 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>樱花</title>
  5. <meta charset="utf-8">
  6. <style>
  7. .text-box {
  8. position: fixed;
  9. left: 50%;
  10. top: 50%;
  11. transform: translate(-50%, -50%);
  12. font-size:
  13. 36px;
  14. color:black;
  15. text-shadow: 0 0 5px #ffa7aa;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <canvas></canvas>
  21. <div class="text-box">
  22. <div id="userCount"></div>
  23. <div id="dayActiveUserCount"></div>
  24. </div>
  25. </body>
  26. <script src="js/sakura.js"></script>
  27. <script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
  28. <script src="../src/js/myConfig.js"></script>
  29. <script>
  30. window.requestAPI({
  31. url: "/admin/user/getOnlineUserCount",
  32. success: (res) => {
  33. if (res.code == 0) {
  34. document.getElementById("userCount").innerText = `在线玩家:${res.data}人`;
  35. }
  36. }
  37. })
  38. window.requestAPI({
  39. url: "/admin/user/getDayActiveUserCount",
  40. success: (res) => {
  41. if (res.code == 0) {
  42. document.getElementById("dayActiveUserCount").innerText = `今日活跃:${res.data}人`;
  43. }
  44. }
  45. })
  46. </script>
  47. </html>
  48. <!-- sakura shader -->
  49. <script id="sakura_point_vsh" type="x-shader/x_vertex">
  50. uniform mat4 uProjection;
  51. uniform mat4 uModelview;
  52. uniform vec3 uResolution;
  53. uniform vec3 uOffset;
  54. uniform vec3 uDOF; //x:focus distance, y:focus radius, z:max radius
  55. uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start
  56. attribute vec3 aPosition;
  57. attribute vec3 aEuler;
  58. attribute vec2 aMisc; //x:size, y:fade
  59. varying vec3 pposition;
  60. varying float psize;
  61. varying float palpha;
  62. varying float pdist;
  63. //varying mat3 rotMat;
  64. varying vec3 normX;
  65. varying vec3 normY;
  66. varying vec3 normZ;
  67. varying vec3 normal;
  68. varying float diffuse;
  69. varying float specular;
  70. varying float rstop;
  71. varying float distancefade;
  72. void main(void) {
  73. // Projection is based on vertical angle
  74. vec4 pos = uModelview * vec4(aPosition + uOffset, 1.0);
  75. gl_Position = uProjection * pos;
  76. gl_PointSize = aMisc.x * uProjection[1][1] / -pos.z * uResolution.y * 0.5;
  77. pposition = pos.xyz;
  78. psize = aMisc.x;
  79. pdist = length(pos.xyz);
  80. palpha = smoothstep(0.0, 1.0, (pdist - 0.1) / uFade.z);
  81. vec3 elrsn = sin(aEuler);
  82. vec3 elrcs = cos(aEuler);
  83. mat3 rotx = mat3(
  84. 1.0, 0.0, 0.0,
  85. 0.0, elrcs.x, elrsn.x,
  86. 0.0, -elrsn.x, elrcs.x
  87. );
  88. mat3 roty = mat3(
  89. elrcs.y, 0.0, -elrsn.y,
  90. 0.0, 1.0, 0.0,
  91. elrsn.y, 0.0, elrcs.y
  92. );
  93. mat3 rotz = mat3(
  94. elrcs.z, elrsn.z, 0.0,
  95. -elrsn.z, elrcs.z, 0.0,
  96. 0.0, 0.0, 1.0
  97. );
  98. mat3 rotmat = rotx * roty * rotz;
  99. normal = rotmat[2];
  100. mat3 trrotm = mat3(
  101. rotmat[0][0], rotmat[1][0], rotmat[2][0],
  102. rotmat[0][1], rotmat[1][1], rotmat[2][1],
  103. rotmat[0][2], rotmat[1][2], rotmat[2][2]
  104. );
  105. normX = trrotm[0];
  106. normY = trrotm[1];
  107. normZ = trrotm[2];
  108. const vec3 lit = vec3(0.6917144638660746, 0.6917144638660746, -0.20751433915982237);
  109. float tmpdfs = dot(lit, normal);
  110. if(tmpdfs < 0.0) {
  111. normal = -normal;
  112. tmpdfs = dot(lit, normal);
  113. }
  114. diffuse = 0.4 + tmpdfs;
  115. vec3 eyev = normalize(-pos.xyz);
  116. if(dot(eyev, normal) > 0.0) {
  117. vec3 hv = normalize(eyev + lit);
  118. specular = pow(max(dot(hv, normal), 0.0), 20.0);
  119. }
  120. else {
  121. specular = 0.0;
  122. }
  123. rstop = clamp((abs(pdist - uDOF.x) - uDOF.y) / uDOF.z, 0.0, 1.0);
  124. rstop = pow(rstop, 0.5);
  125. //-0.69315 = ln(0.5)
  126. distancefade = min(1.0, exp((uFade.x - pdist) * 0.69315 / uFade.y));
  127. }
  128. </script>
  129. <script id="sakura_point_fsh" type="x-shader/x_fragment">
  130. #ifdef GL_ES
  131. //precision mediump float;
  132. precision highp float;
  133. #endif
  134. uniform vec3 uDOF; //x:focus distance, y:focus radius, z:max radius
  135. uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start
  136. const vec3 fadeCol = vec3(0.08, 0.03, 0.06);
  137. varying vec3 pposition;
  138. varying float psize;
  139. varying float palpha;
  140. varying float pdist;
  141. //varying mat3 rotMat;
  142. varying vec3 normX;
  143. varying vec3 normY;
  144. varying vec3 normZ;
  145. varying vec3 normal;
  146. varying float diffuse;
  147. varying float specular;
  148. varying float rstop;
  149. varying float distancefade;
  150. float ellipse(vec2 p, vec2 o, vec2 r) {
  151. vec2 lp = (p - o) / r;
  152. return length(lp) - 1.0;
  153. }
  154. void main(void) {
  155. vec3 p = vec3(gl_PointCoord - vec2(0.5, 0.5), 0.0) * 2.0;
  156. vec3 d = vec3(0.0, 0.0, -1.0);
  157. float nd = normZ.z; //dot(-normZ, d);
  158. if(abs(nd) < 0.0001) discard;
  159. float np = dot(normZ, p);
  160. vec3 tp = p + d * np / nd;
  161. vec2 coord = vec2(dot(normX, tp), dot(normY, tp));
  162. //angle = 15 degree
  163. const float flwrsn = 0.258819045102521;
  164. const float flwrcs = 0.965925826289068;
  165. mat2 flwrm = mat2(flwrcs, -flwrsn, flwrsn, flwrcs);
  166. vec2 flwrp = vec2(abs(coord.x), coord.y) * flwrm;
  167. float r;
  168. if(flwrp.x < 0.0) {
  169. r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.36, 0.96) * 0.5);
  170. }
  171. else {
  172. r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.58, 0.96) * 0.5);
  173. }
  174. if(r > rstop) discard;
  175. vec3 col = mix(vec3(1.0, 0.8, 0.75), vec3(1.0, 0.9, 0.87), r);
  176. float grady = mix(0.0, 1.0, pow(coord.y * 0.5 + 0.5, 0.35));
  177. col *= vec3(1.0, grady, grady);
  178. col *= mix(0.8, 1.0, pow(abs(coord.x), 0.3));
  179. col = col * diffuse + specular;
  180. col = mix(fadeCol, col, distancefade);
  181. float alpha = (rstop > 0.001)? (0.5 - r / (rstop * 2.0)) : 1.0;
  182. alpha = smoothstep(0.0, 1.0, alpha) * palpha;
  183. gl_FragColor = vec4(col * 0.5, alpha);
  184. }
  185. </script>
  186. <!-- effects -->
  187. <script id="fx_common_vsh" type="x-shader/x_vertex">
  188. uniform vec3 uResolution;
  189. attribute vec2 aPosition;
  190. varying vec2 texCoord;
  191. varying vec2 screenCoord;
  192. void main(void) {
  193. gl_Position = vec4(aPosition, 0.0, 1.0);
  194. texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);
  195. screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);
  196. }
  197. </script>
  198. <script id="bg_fsh" type="x-shader/x_fragment">
  199. #ifdef GL_ES
  200. //precision mediump float;
  201. precision highp float;
  202. #endif
  203. uniform vec2 uTimes;
  204. varying vec2 texCoord;
  205. varying vec2 screenCoord;
  206. void main(void) {
  207. vec3 col;
  208. float c;
  209. vec2 tmpv = texCoord * vec2(0.8, 1.0) - vec2(0.95, 1.0);
  210. c = exp(-pow(length(tmpv) * 1.8, 2.0));
  211. col = mix(vec3(0.02, 0.0, 0.03), vec3(0.96, 0.98, 1.0) * 1.5, c);
  212. gl_FragColor = vec4(col * 0.5, 1.0);
  213. }
  214. </script>
  215. <script id="fx_brightbuf_fsh" type="x-shader/x_fragment">
  216. #ifdef GL_ES
  217. //precision mediump float;
  218. precision highp float;
  219. #endif
  220. uniform sampler2D uSrc;
  221. uniform vec2 uDelta;
  222. varying vec2 texCoord;
  223. varying vec2 screenCoord;
  224. void main(void) {
  225. vec4 col = texture2D(uSrc, texCoord);
  226. gl_FragColor = vec4(col.rgb * 2.0 - vec3(0.5), 1.0);
  227. }
  228. </script>
  229. <script id="fx_dirblur_r4_fsh" type="x-shader/x_fragment">
  230. #ifdef GL_ES
  231. //precision mediump float;
  232. precision highp float;
  233. #endif
  234. uniform sampler2D uSrc;
  235. uniform vec2 uDelta;
  236. uniform vec4 uBlurDir; //dir(x, y), stride(z, w)
  237. varying vec2 texCoord;
  238. varying vec2 screenCoord;
  239. void main(void) {
  240. vec4 col = texture2D(uSrc, texCoord);
  241. col = col + texture2D(uSrc, texCoord + uBlurDir.xy * uDelta);
  242. col = col + texture2D(uSrc, texCoord - uBlurDir.xy * uDelta);
  243. col = col + texture2D(uSrc, texCoord + (uBlurDir.xy + uBlurDir.zw) * uDelta);
  244. col = col + texture2D(uSrc, texCoord - (uBlurDir.xy + uBlurDir.zw) * uDelta);
  245. gl_FragColor = col / 5.0;
  246. }
  247. </script>
  248. <!-- effect fragment shader template -->
  249. <script id="fx_common_fsh" type="x-shader/x_fragment">
  250. #ifdef GL_ES
  251. //precision mediump float;
  252. precision highp float;
  253. #endif
  254. uniform sampler2D uSrc;
  255. uniform vec2 uDelta;
  256. varying vec2 texCoord;
  257. varying vec2 screenCoord;
  258. void main(void) {
  259. gl_FragColor = texture2D(uSrc, texCoord);
  260. }
  261. </script>
  262. <!-- post processing -->
  263. <script id="pp_final_vsh" type="x-shader/x_vertex">
  264. uniform vec3 uResolution;
  265. attribute vec2 aPosition;
  266. varying vec2 texCoord;
  267. varying vec2 screenCoord;
  268. void main(void) {
  269. gl_Position = vec4(aPosition, 0.0, 1.0);
  270. texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);
  271. screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);
  272. }
  273. </script>
  274. <script id="pp_final_fsh" type="x-shader/x_fragment">
  275. #ifdef GL_ES
  276. //precision mediump float;
  277. precision highp float;
  278. #endif
  279. uniform sampler2D uSrc;
  280. uniform sampler2D uBloom;
  281. uniform vec2 uDelta;
  282. varying vec2 texCoord;
  283. varying vec2 screenCoord;
  284. void main(void) {
  285. vec4 srccol = texture2D(uSrc, texCoord) * 2.0;
  286. vec4 bloomcol = texture2D(uBloom, texCoord);
  287. vec4 col;
  288. col = srccol + bloomcol * (vec4(1.0) + srccol);
  289. col *= smoothstep(1.0, 0.0, pow(length((texCoord - vec2(0.5)) * 2.0), 1.2) * 0.5);
  290. col = pow(col, vec4(0.45454545454545)); //(1.0 / 2.2)
  291. gl_FragColor = vec4(col.rgb, 1.0);
  292. gl_FragColor.a = 1.0;
  293. }
  294. </script>