JS写下雨特效，樱花落特效，滑块成功效果
2024-05-24 07:12:11
一、下雨特效
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>下雨特效</title><style>*{margin: 0;padding: 0;}#rainBox{position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: rgb(71, 78, 77);/* 不阻挡其他元素事件触发 */pointer-events: none;}.rain{position: absolute;width: 2px;height: 50px;background: linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.6));}</style>
</head><body><div id="rainBox"></div><script>const box=document.getElementById('rainBox');let boxHeight=box.clientHeight;let boxWidth=box.clientWidth;// 页面大小发生变化时，改变盒子大小window.onresize=function(){boxHeight=box.clientHeight;boxWidth=box.clientWidth;}// 每隔一段时间,添加雨滴setInterval(()=>{const rain=document.createElement('div');rain.classList.add('rain');rain.style.top=0;// 随机刷新雨点位置rain.style.left=Math.random()*boxWidth+'px';// 随机雨点透明度rain.style.opacity=Math.random();box.appendChild(rain);// 每隔一段时间,雨水下落let race=1;const timer=setInterval(()=>{if(parseInt(rain.style.top)>boxHeight){clearInterval(timer);box.removeChild(rain);}race++;rain.style.top=parseInt(rain.style.top)+race+'px'},20)},50)</script>
</body></html>二、滑块成功
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>https://cloud.tencent.com/developer/article/1695880?from=15425</title><script>(function () {var root = (typeof self == 'object' && self.self == self && self) ||(typeof global == 'object' && global.global == global && global) ||this || {};var util = {extend: function (target) {for (var i = 1, len = arguments.length; i < len; i++) {for (var prop in arguments[i]) {if (arguments[i].hasOwnProperty(prop)) {target[prop] = arguments[i][prop]}}}return target},setClassName(selector, className) {selector.className = className;},addClass(selector, className) {selector.classList.add(className);},setInlineStyle(selector, attr, content) {let length = selector.length;for (let i = 0; i < length; i++) {selector[i].style[attr] = content;}},isValidListener: function (listener) {if (typeof listener === 'function') {return true} else if (listener && typeof listener === 'object') {return util.isValidListener(listener.listener)} else {return false}},addCSS: function (cssText) {var style = document.createElement('style'), //创建一个style元素head = document.head || document.getElementsByTagName('head')[0]; //获取head元素style.type = 'text/css'; //这里必须显示设置style元素的type属性为text/css，否则在ie中不起作用if (style.styleSheet) { //IEvar func = function () {try { //防止IE中stylesheet数量超过限制而发生错误style.styleSheet.cssText = cssText;} catch (e) {}}//如果当前styleSheet还不能用，则放到异步中则行if (style.styleSheet.disabled) {setTimeout(func, 10);} else {func();}} else { //w3c//w3c浏览器中只要创建文本节点插入到style元素中就行了var textNode = document.createTextNode(cssText);style.appendChild(textNode);}head.appendChild(style); //把创建的style元素插入到head中},indexOf: function (array, item) {if (array.indexOf) {return array.indexOf(item);} else {var result = -1;for (var i = 0, len = array.length; i < len; i++) {if (array[i] === item) {result = i;break;}}return result;}}}function EventEmitter() {this._events = {}}EventEmitter.prototype.on = function (eventName, listener) {if (!eventName || !listener) return;if (!util.isValidListener(listener)) {throw new TypeError('listener must be a function');}var events = this._events;var listeners = events[eventName] = events[eventName] || [];var listenerIsWrapped = typeof listener === 'object';// 不重复添加事件if (util.indexOf(listeners, listener) === -1) {listeners.push(listenerIsWrapped ? listener : {listener: listener,once: false});}return this;};EventEmitter.prototype.once = function (eventName, listener) {return this.on(eventName, {listener: listener,once: true})};EventEmitter.prototype.off = function (eventName, listener) {var listeners = this._events[eventName];if (!listeners) return;var index;for (var i = 0, len = listeners.length; i < len; i++) {if (listeners[i] && listeners[i].listener === listener) {index = i;break;}}if (typeof index !== 'undefined') {listeners.splice(index, 1, null)}return this;};EventEmitter.prototype.emit = function (eventName, args) {var listeners = this._events[eventName];if (!listeners) return;for (var i = 0; i < listeners.length; i++) {var listener = listeners[i];if (listener) {listener.listener.apply(this, args || []);if (listener.once) {this.off(eventName, listener.listener)}}}return this;};function SliderTools(options) {this.options = util.extend({}, this.constructor.defaultOptions, options)this.init();this.bindEvents();this.diffX = 0;this.flag = false;}SliderTools.VERSION = '1.0.0';SliderTools.defaultOptions = {el: document.body};var proto = SliderTools.prototype = new EventEmitter();proto.constructor = SliderTools;proto.init = function () {this.createSlider();this.getElements();}proto.createSlider = function () {this.options.el.innerHTML = '<div id="slider"><div class="drag_bg"></div><div class="drag_text" onselectstart="return false;" unselectable="on">拖动滑块验证</div><div class="handler handler_bg"></div></div>';util.addCSS('ul, li { list-style: none; } a { text-decoration: none; } .wrap { width: 300px; height: 350px; text-align: center; margin: 150px auto; } .inner { padding: 15px; } .clearfix { overflow: hidden; _zoom: 1; } .none { display: none; } #slider { position: relative; background-color: #e8e8e8; width: 300px; height: 34px; line-height: 34px; text-align: center; } #slider .handler { position: absolute; top: 0px; left: 0px; width: 40px; height: 32px; border: 1px solid #ccc; cursor: move;} .handler_bg { background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==") no-repeat center; } .handler_ok_bg { background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==") no-repeat center; } #slider .drag_bg { background-color: #7ac23c; height: 34px; width: 0px; } #slider .drag_text { position: absolute; top: 0px; width: 300px; -moz-user-select: none; -webkit-user-select: none; user-select: none; -o-user-select: none; -ms-user-select: none; } .unselect { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .slide_ok { color: #fff; }')}proto.getElements = function () {this.slider = document.querySelector('#slider');this.drag_bg = document.querySelector('.drag_bg');this.handler = document.querySelector('.handler');}proto.bindEvents = function () {var self = this;self.handler.onmousedown = function (e) {self.diffX = e.clientX - self.handler.offsetLeft;util.setClassName(self.slider, 'unselect');document.onmousemove = function (e) {let deltaX = e.clientX - self.diffX;if (deltaX >= self.slider.offsetWidth - self.handler.offsetWidth) {deltaX = self.slider.offsetWidth - self.handler.offsetWidth;self.flag = true;} else if (deltaX <= 0) {deltaX = 0;self.flag = false;} else {self.flag = false;}util.setInlineStyle([self.handler], 'left', deltaX + 'px');util.setInlineStyle([self.drag_bg], 'width', deltaX + 'px');}document.onmouseup = function (e) {util.setClassName(self.slider, '')if (self.flag) {util.setClassName(self.slider, 'slide_ok')util.addClass(self.handler, 'handler_ok_bg')self.handler.onmousedown = nullself.emit('complete')} else {util.setInlineStyle([self.handler], 'left', 0 + 'px');util.setInlineStyle([self.drag_bg], 'width', 0 + 'px');}document.onmousemove = null;document.onmouseup = null;}}}if (typeof exports != 'undefined' && !exports.nodeType) {if (typeof module != 'undefined' && !module.nodeType && module.exports) {exports = module.exports = SliderTools;}exports.SliderTools = SliderTools;} else {root.SliderTools = SliderTools;}}());// let slider = new SliderTools();// slider.on('complete', () => {// alert('验证完成');// })</script>
</head><body><div class="slider"></div><script>let slider = new SliderTools({el: document.querySelector('.slider')});slider.on('complete', () => {alert('验证完成');});</script>
</body></html>三、樱花落特效
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title> New Document </title><meta charset="UTF-8"><style>body {padding: 0;margin: 0;overflow: hidden;height: 600px;}canvas {padding: 0;margin: 0;}div.btnbg {position: fixed;left: 0;top: 0;}</style>
</head><body><canvas id="sakura"></canvas><div class="btnbg"></div><!-- 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 radiusuniform vec3 uFade; //x:start distance, y:half distance, z:near fade startattribute vec3 aPosition;attribute vec3 aEuler;attribute vec2 aMisc; //x:size, y:fadevarying 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 anglevec4 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;#endifuniform vec3 uDOF; //x:focus distance, y:focus radius, z:max radiusuniform vec3 uFade; //x:start distance, y:half distance, z:near fade startconst 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 degreeconst 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;#endifuniform 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;#endifuniform 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;#endifuniform 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;#endifuniform 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;#endifuniform 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><script>// Utilitiesvar Vector3 = {};var Matrix44 = {};Vector3.create = function (x, y, z) {return { 'x': x, 'y': y, 'z': z };};Vector3.dot = function (v0, v1) {return v0.x * v1.x + v0.y * v1.y + v0.z * v1.z;};Vector3.cross = function (v, v0, v1) {v.x = v0.y * v1.z - v0.z * v1.y;v.y = v0.z * v1.x - v0.x * v1.z;v.z = v0.x * v1.y - v0.y * v1.x;};Vector3.normalize = function (v) {var l = v.x * v.x + v.y * v.y + v.z * v.z;if (l > 0.00001) {l = 1.0 / Math.sqrt(l);v.x *= l;v.y *= l;v.z *= l;}};Vector3.arrayForm = function (v) {if (v.array) {v.array[0] = v.x;v.array[1] = v.y;v.array[2] = v.z;}else {v.array = new Float32Array([v.x, v.y, v.z]);}return v.array;};Matrix44.createIdentity = function () {return new Float32Array([1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0]);};Matrix44.loadProjection = function (m, aspect, vdeg, near, far) {var h = near * Math.tan(vdeg * Math.PI / 180.0 * 0.5) * 2.0;var w = h * aspect;m[0] = 2.0 * near / w;m[1] = 0.0;m[2] = 0.0;m[3] = 0.0;m[4] = 0.0;m[5] = 2.0 * near / h;m[6] = 0.0;m[7] = 0.0;m[8] = 0.0;m[9] = 0.0;m[10] = -(far + near) / (far - near);m[11] = -1.0;m[12] = 0.0;m[13] = 0.0;m[14] = -2.0 * far * near / (far - near);m[15] = 0.0;};Matrix44.loadLookAt = function (m, vpos, vlook, vup) {var frontv = Vector3.create(vpos.x - vlook.x, vpos.y - vlook.y, vpos.z - vlook.z);Vector3.normalize(frontv);var sidev = Vector3.create(1.0, 0.0, 0.0);Vector3.cross(sidev, vup, frontv);Vector3.normalize(sidev);var topv = Vector3.create(1.0, 0.0, 0.0);Vector3.cross(topv, frontv, sidev);Vector3.normalize(topv);m[0] = sidev.x;m[1] = topv.x;m[2] = frontv.x;m[3] = 0.0;m[4] = sidev.y;m[5] = topv.y;m[6] = frontv.y;m[7] = 0.0;m[8] = sidev.z;m[9] = topv.z;m[10] = frontv.z;m[11] = 0.0;m[12] = -(vpos.x * m[0] + vpos.y * m[4] + vpos.z * m[8]);m[13] = -(vpos.x * m[1] + vpos.y * m[5] + vpos.z * m[9]);m[14] = -(vpos.x * m[2] + vpos.y * m[6] + vpos.z * m[10]);m[15] = 1.0;};//var timeInfo = {'start': 0, 'prev': 0, // Date'delta': 0, 'elapsed': 0 // Number(sec)};//var gl;var renderSpec = {'width': 0,'height': 0,'aspect': 1,'array': new Float32Array(3),'halfWidth': 0,'halfHeight': 0,'halfArray': new Float32Array(3)// and some render targets. see setViewport()};renderSpec.setSize = function (w, h) {renderSpec.width = w;renderSpec.height = h;renderSpec.aspect = renderSpec.width / renderSpec.height;renderSpec.array[0] = renderSpec.width;renderSpec.array[1] = renderSpec.height;renderSpec.array[2] = renderSpec.aspect;renderSpec.halfWidth = Math.floor(w / 2);renderSpec.halfHeight = Math.floor(h / 2);renderSpec.halfArray[0] = renderSpec.halfWidth;renderSpec.halfArray[1] = renderSpec.halfHeight;renderSpec.halfArray[2] = renderSpec.halfWidth / renderSpec.halfHeight;};function deleteRenderTarget(rt) {gl.deleteFramebuffer(rt.frameBuffer);gl.deleteRenderbuffer(rt.renderBuffer);gl.deleteTexture(rt.texture);}function createRenderTarget(w, h) {var ret = {'width': w,'height': h,'sizeArray': new Float32Array([w, h, w / h]),'dtxArray': new Float32Array([1.0 / w, 1.0 / h])};ret.frameBuffer = gl.createFramebuffer();ret.renderBuffer = gl.createRenderbuffer();ret.texture = gl.createTexture();gl.bindTexture(gl.TEXTURE_2D, ret.texture);gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);gl.bindFramebuffer(gl.FRAMEBUFFER, ret.frameBuffer);gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, ret.texture, 0);gl.bindRenderbuffer(gl.RENDERBUFFER, ret.renderBuffer);gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, w, h);gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, ret.renderBuffer);gl.bindTexture(gl.TEXTURE_2D, null);gl.bindRenderbuffer(gl.RENDERBUFFER, null);gl.bindFramebuffer(gl.FRAMEBUFFER, null);return ret;}function compileShader(shtype, shsrc) {var retsh = gl.createShader(shtype);gl.shaderSource(retsh, shsrc);gl.compileShader(retsh);if (!gl.getShaderParameter(retsh, gl.COMPILE_STATUS)) {var errlog = gl.getShaderInfoLog(retsh);gl.deleteShader(retsh);console.error(errlog);return null;}return retsh;}function createShader(vtxsrc, frgsrc, uniformlist, attrlist) {var vsh = compileShader(gl.VERTEX_SHADER, vtxsrc);var fsh = compileShader(gl.FRAGMENT_SHADER, frgsrc);if (vsh == null || fsh == null) {return null;}var prog = gl.createProgram();gl.attachShader(prog, vsh);gl.attachShader(prog, fsh);gl.deleteShader(vsh);gl.deleteShader(fsh);gl.linkProgram(prog);if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {var errlog = gl.getProgramInfoLog(prog);console.error(errlog);return null;}if (uniformlist) {prog.uniforms = {};for (var i = 0; i < uniformlist.length; i++) {prog.uniforms[uniformlist[i]] = gl.getUniformLocation(prog, uniformlist[i]);}}if (attrlist) {prog.attributes = {};for (var i = 0; i < attrlist.length; i++) {var attr = attrlist[i];prog.attributes[attr] = gl.getAttribLocation(prog, attr);}}return prog;}function useShader(prog) {gl.useProgram(prog);for (var attr in prog.attributes) {gl.enableVertexAttribArray(prog.attributes[attr]);;}}function unuseShader(prog) {for (var attr in prog.attributes) {gl.disableVertexAttribArray(prog.attributes[attr]);;}gl.useProgram(null);}/var projection = {'angle': 60,'nearfar': new Float32Array([0.1, 100.0]),'matrix': Matrix44.createIdentity()};var camera = {'position': Vector3.create(0, 0, 100),'lookat': Vector3.create(0, 0, 0),'up': Vector3.create(0, 1, 0),'dof': Vector3.create(10.0, 4.0, 8.0),'matrix': Matrix44.createIdentity()};var pointFlower = {};var meshFlower = {};var sceneStandBy = false;var BlossomParticle = function () {this.velocity = new Array(3);this.rotation = new Array(3);this.position = new Array(3);this.euler = new Array(3);this.size = 1.0;this.alpha = 1.0;this.zkey = 0.0;};BlossomParticle.prototype.setVelocity = function (vx, vy, vz) {this.velocity[0] = vx;this.velocity[1] = vy;this.velocity[2] = vz;};BlossomParticle.prototype.setRotation = function (rx, ry, rz) {this.rotation[0] = rx;this.rotation[1] = ry;this.rotation[2] = rz;};BlossomParticle.prototype.setPosition = function (nx, ny, nz) {this.position[0] = nx;this.position[1] = ny;this.position[2] = nz;};BlossomParticle.prototype.setEulerAngles = function (rx, ry, rz) {this.euler[0] = rx;this.euler[1] = ry;this.euler[2] = rz;};BlossomParticle.prototype.setSize = function (s) {this.size = s;};BlossomParticle.prototype.update = function (dt, et) {this.position[0] += this.velocity[0] * dt;this.position[1] += this.velocity[1] * dt;this.position[2] += this.velocity[2] * dt;this.euler[0] += this.rotation[0] * dt;this.euler[1] += this.rotation[1] * dt;this.euler[2] += this.rotation[2] * dt;};function createPointFlowers() {// get point sizesvar prm = gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE);renderSpec.pointSize = { 'min': prm[0], 'max': prm[1] };var vtxsrc = document.getElementById("sakura_point_vsh").textContent;var frgsrc = document.getElementById("sakura_point_fsh").textContent;pointFlower.program = createShader(vtxsrc, frgsrc,['uProjection', 'uModelview', 'uResolution', 'uOffset', 'uDOF', 'uFade'],['aPosition', 'aEuler', 'aMisc']);useShader(pointFlower.program);pointFlower.offset = new Float32Array([0.0, 0.0, 0.0]);pointFlower.fader = Vector3.create(0.0, 10.0, 0.0);// paramerters: velocity[3], rotate[3]pointFlower.numFlowers = 1600;pointFlower.particles = new Array(pointFlower.numFlowers);// vertex attributes {position[3], euler_xyz[3], size[1]}pointFlower.dataArray = new Float32Array(pointFlower.numFlowers * (3 + 3 + 2));pointFlower.positionArrayOffset = 0;pointFlower.eulerArrayOffset = pointFlower.numFlowers * 3;pointFlower.miscArrayOffset = pointFlower.numFlowers * 6;pointFlower.buffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, pointFlower.buffer);gl.bufferData(gl.ARRAY_BUFFER, pointFlower.dataArray, gl.DYNAMIC_DRAW);gl.bindBuffer(gl.ARRAY_BUFFER, null);unuseShader(pointFlower.program);for (var i = 0; i < pointFlower.numFlowers; i++) {pointFlower.particles[i] = new BlossomParticle();}}function initPointFlowers() {//areapointFlower.area = Vector3.create(20.0, 20.0, 20.0);pointFlower.area.x = pointFlower.area.y * renderSpec.aspect;pointFlower.fader.x = 10.0; //env fade startpointFlower.fader.y = pointFlower.area.z; //env fade halfpointFlower.fader.z = 0.1; //near fade start//particlesvar PI2 = Math.PI * 2.0;var tmpv3 = Vector3.create(0, 0, 0);var tmpv = 0;var symmetryrand = function () { return (Math.random() * 2.0 - 1.0); };for (var i = 0; i < pointFlower.numFlowers; i++) {var tmpprtcl = pointFlower.particles[i];//velocitytmpv3.x = symmetryrand() * 0.3 + 0.8;tmpv3.y = symmetryrand() * 0.2 - 1.0;tmpv3.z = symmetryrand() * 0.3 + 0.5;Vector3.normalize(tmpv3);tmpv = 2.0 + Math.random() * 1.0;tmpprtcl.setVelocity(tmpv3.x * tmpv, tmpv3.y * tmpv, tmpv3.z * tmpv);//rotationtmpprtcl.setRotation(symmetryrand() * PI2 * 0.5,symmetryrand() * PI2 * 0.5,symmetryrand() * PI2 * 0.5);//positiontmpprtcl.setPosition(symmetryrand() * pointFlower.area.x,symmetryrand() * pointFlower.area.y,symmetryrand() * pointFlower.area.z);//eulertmpprtcl.setEulerAngles(Math.random() * Math.PI * 2.0,Math.random() * Math.PI * 2.0,Math.random() * Math.PI * 2.0);//sizetmpprtcl.setSize(0.9 + Math.random() * 0.1);}}function renderPointFlowers() {//updatevar PI2 = Math.PI * 2.0;var limit = [pointFlower.area.x, pointFlower.area.y, pointFlower.area.z];var repeatPos = function (prt, cmp, limit) {if (Math.abs(prt.position[cmp]) - prt.size * 0.5 > limit) {//out of areaif (prt.position[cmp] > 0) {prt.position[cmp] -= limit * 2.0;}else {prt.position[cmp] += limit * 2.0;}}};var repeatEuler = function (prt, cmp) {prt.euler[cmp] = prt.euler[cmp] % PI2;if (prt.euler[cmp] < 0.0) {prt.euler[cmp] += PI2;}};for (var i = 0; i < pointFlower.numFlowers; i++) {var prtcl = pointFlower.particles[i];prtcl.update(timeInfo.delta, timeInfo.elapsed);repeatPos(prtcl, 0, pointFlower.area.x);repeatPos(prtcl, 1, pointFlower.area.y);repeatPos(prtcl, 2, pointFlower.area.z);repeatEuler(prtcl, 0);repeatEuler(prtcl, 1);repeatEuler(prtcl, 2);prtcl.alpha = 1.0;//(pointFlower.area.z - prtcl.position[2]) * 0.5;prtcl.zkey = (camera.matrix[2] * prtcl.position[0]+ camera.matrix[6] * prtcl.position[1]+ camera.matrix[10] * prtcl.position[2]+ camera.matrix[14]);}// sortpointFlower.particles.sort(function (p0, p1) { return p0.zkey - p1.zkey; });// update datavar ipos = pointFlower.positionArrayOffset;var ieuler = pointFlower.eulerArrayOffset;var imisc = pointFlower.miscArrayOffset;for (var i = 0; i < pointFlower.numFlowers; i++) {var prtcl = pointFlower.particles[i];pointFlower.dataArray[ipos] = prtcl.position[0];pointFlower.dataArray[ipos + 1] = prtcl.position[1];pointFlower.dataArray[ipos + 2] = prtcl.position[2];ipos += 3;pointFlower.dataArray[ieuler] = prtcl.euler[0];pointFlower.dataArray[ieuler + 1] = prtcl.euler[1];pointFlower.dataArray[ieuler + 2] = prtcl.euler[2];ieuler += 3;pointFlower.dataArray[imisc] = prtcl.size;pointFlower.dataArray[imisc + 1] = prtcl.alpha;imisc += 2;}//drawgl.enable(gl.BLEND);//gl.disable(gl.DEPTH_TEST);gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);var prog = pointFlower.program;useShader(prog);gl.uniformMatrix4fv(prog.uniforms.uProjection, false, projection.matrix);gl.uniformMatrix4fv(prog.uniforms.uModelview, false, camera.matrix);gl.uniform3fv(prog.uniforms.uResolution, renderSpec.array);gl.uniform3fv(prog.uniforms.uDOF, Vector3.arrayForm(camera.dof));gl.uniform3fv(prog.uniforms.uFade, Vector3.arrayForm(pointFlower.fader));gl.bindBuffer(gl.ARRAY_BUFFER, pointFlower.buffer);gl.bufferData(gl.ARRAY_BUFFER, pointFlower.dataArray, gl.DYNAMIC_DRAW);gl.vertexAttribPointer(prog.attributes.aPosition, 3, gl.FLOAT, false, 0, pointFlower.positionArrayOffset * Float32Array.BYTES_PER_ELEMENT);gl.vertexAttribPointer(prog.attributes.aEuler, 3, gl.FLOAT, false, 0, pointFlower.eulerArrayOffset * Float32Array.BYTES_PER_ELEMENT);gl.vertexAttribPointer(prog.attributes.aMisc, 2, gl.FLOAT, false, 0, pointFlower.miscArrayOffset * Float32Array.BYTES_PER_ELEMENT);// doublerfor (var i = 1; i < 2; i++) {var zpos = i * -2.0;pointFlower.offset[0] = pointFlower.area.x * -1.0;pointFlower.offset[1] = pointFlower.area.y * -1.0;pointFlower.offset[2] = pointFlower.area.z * zpos;gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);pointFlower.offset[0] = pointFlower.area.x * -1.0;pointFlower.offset[1] = pointFlower.area.y * 1.0;pointFlower.offset[2] = pointFlower.area.z * zpos;gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);pointFlower.offset[0] = pointFlower.area.x * 1.0;pointFlower.offset[1] = pointFlower.area.y * -1.0;pointFlower.offset[2] = pointFlower.area.z * zpos;gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);pointFlower.offset[0] = pointFlower.area.x * 1.0;pointFlower.offset[1] = pointFlower.area.y * 1.0;pointFlower.offset[2] = pointFlower.area.z * zpos;gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);}//mainpointFlower.offset[0] = 0.0;pointFlower.offset[1] = 0.0;pointFlower.offset[2] = 0.0;gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);gl.bindBuffer(gl.ARRAY_BUFFER, null);unuseShader(prog);gl.enable(gl.DEPTH_TEST);gl.disable(gl.BLEND);}// effects//common utilfunction createEffectProgram(vtxsrc, frgsrc, exunifs, exattrs) {var ret = {};var unifs = ['uResolution', 'uSrc', 'uDelta'];if (exunifs) {unifs = unifs.concat(exunifs);}var attrs = ['aPosition'];if (exattrs) {attrs = attrs.concat(exattrs);}ret.program = createShader(vtxsrc, frgsrc, unifs, attrs);useShader(ret.program);ret.dataArray = new Float32Array([-1.0, -1.0,1.0, -1.0,-1.0, 1.0,1.0, 1.0]);ret.buffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, ret.buffer);gl.bufferData(gl.ARRAY_BUFFER, ret.dataArray, gl.STATIC_DRAW);gl.bindBuffer(gl.ARRAY_BUFFER, null);unuseShader(ret.program);return ret;}// basic usage// useEffect(prog, srctex({'texture':texid, 'dtxArray':(f32)[dtx, dty]})); //basic initialize// gl.uniform**(...); //additional uniforms// drawEffect()// unuseEffect(prog)// TEXTURE0 makes srcfunction useEffect(fxobj, srctex) {var prog = fxobj.program;useShader(prog);gl.uniform3fv(prog.uniforms.uResolution, renderSpec.array);if (srctex != null) {gl.uniform2fv(prog.uniforms.uDelta, srctex.dtxArray);gl.uniform1i(prog.uniforms.uSrc, 0);gl.activeTexture(gl.TEXTURE0);gl.bindTexture(gl.TEXTURE_2D, srctex.texture);}}function drawEffect(fxobj) {gl.bindBuffer(gl.ARRAY_BUFFER, fxobj.buffer);gl.vertexAttribPointer(fxobj.program.attributes.aPosition, 2, gl.FLOAT, false, 0, 0);gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);}function unuseEffect(fxobj) {unuseShader(fxobj.program);}var effectLib = {};function createEffectLib() {var vtxsrc, frgsrc;//commonvar cmnvtxsrc = document.getElementById("fx_common_vsh").textContent;//backgroundfrgsrc = document.getElementById("bg_fsh").textContent;effectLib.sceneBg = createEffectProgram(cmnvtxsrc, frgsrc, ['uTimes'], null);// make brightpixels bufferfrgsrc = document.getElementById("fx_brightbuf_fsh").textContent;effectLib.mkBrightBuf = createEffectProgram(cmnvtxsrc, frgsrc, null, null);// direction blurfrgsrc = document.getElementById("fx_dirblur_r4_fsh").textContent;effectLib.dirBlur = createEffectProgram(cmnvtxsrc, frgsrc, ['uBlurDir'], null);//final compositevtxsrc = document.getElementById("pp_final_vsh").textContent;frgsrc = document.getElementById("pp_final_fsh").textContent;effectLib.finalComp = createEffectProgram(vtxsrc, frgsrc, ['uBloom'], null);}// backgroundfunction createBackground() {//console.log("create background");}function initBackground() {//console.log("init background");}function renderBackground() {gl.disable(gl.DEPTH_TEST);useEffect(effectLib.sceneBg, null);gl.uniform2f(effectLib.sceneBg.program.uniforms.uTimes, timeInfo.elapsed, timeInfo.delta);drawEffect(effectLib.sceneBg);unuseEffect(effectLib.sceneBg);gl.enable(gl.DEPTH_TEST);}// post processvar postProcess = {};function createPostProcess() {//console.log("create post process");}function initPostProcess() {//console.log("init post process");}function renderPostProcess() {gl.enable(gl.TEXTURE_2D);gl.disable(gl.DEPTH_TEST);var bindRT = function (rt, isclear) {gl.bindFramebuffer(gl.FRAMEBUFFER, rt.frameBuffer);gl.viewport(0, 0, rt.width, rt.height);if (isclear) {gl.clearColor(0, 0, 0, 0);gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);}};//make bright buffbindRT(renderSpec.wHalfRT0, true);useEffect(effectLib.mkBrightBuf, renderSpec.mainRT);drawEffect(effectLib.mkBrightBuf);unuseEffect(effectLib.mkBrightBuf);// make bloomfor (var i = 0; i < 2; i++) {var p = 1.5 + 1 * i;var s = 2.0 + 1 * i;bindRT(renderSpec.wHalfRT1, true);useEffect(effectLib.dirBlur, renderSpec.wHalfRT0);gl.uniform4f(effectLib.dirBlur.program.uniforms.uBlurDir, p, 0.0, s, 0.0);drawEffect(effectLib.dirBlur);unuseEffect(effectLib.dirBlur);bindRT(renderSpec.wHalfRT0, true);useEffect(effectLib.dirBlur, renderSpec.wHalfRT1);gl.uniform4f(effectLib.dirBlur.program.uniforms.uBlurDir, 0.0, p, 0.0, s);drawEffect(effectLib.dirBlur);unuseEffect(effectLib.dirBlur);}//displaygl.bindFramebuffer(gl.FRAMEBUFFER, null);gl.viewport(0, 0, renderSpec.width, renderSpec.height);gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);useEffect(effectLib.finalComp, renderSpec.mainRT);gl.uniform1i(effectLib.finalComp.program.uniforms.uBloom, 1);gl.activeTexture(gl.TEXTURE1);gl.bindTexture(gl.TEXTURE_2D, renderSpec.wHalfRT0.texture);drawEffect(effectLib.finalComp);unuseEffect(effectLib.finalComp);gl.enable(gl.DEPTH_TEST);}/var SceneEnv = {};function createScene() {createEffectLib();createBackground();createPointFlowers();createPostProcess();sceneStandBy = true;}function initScene() {initBackground();initPointFlowers();initPostProcess();//camera.position.z = 17.320508;camera.position.z = pointFlower.area.z + projection.nearfar[0];projection.angle = Math.atan2(pointFlower.area.y, camera.position.z + pointFlower.area.z) * 180.0 / Math.PI * 2.0;Matrix44.loadProjection(projection.matrix, renderSpec.aspect, projection.angle, projection.nearfar[0], projection.nearfar[1]);}function renderScene() {//drawMatrix44.loadLookAt(camera.matrix, camera.position, camera.lookat, camera.up);gl.enable(gl.DEPTH_TEST);//gl.bindFramebuffer(gl.FRAMEBUFFER, null);gl.bindFramebuffer(gl.FRAMEBUFFER, renderSpec.mainRT.frameBuffer);gl.viewport(0, 0, renderSpec.mainRT.width, renderSpec.mainRT.height);gl.clearColor(0.005, 0, 0.05, 0);gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);renderBackground();renderPointFlowers();renderPostProcess();}/function onResize(e) {makeCanvasFullScreen(document.getElementById("sakura"));setViewports();if (sceneStandBy) {initScene();}}function setViewports() {renderSpec.setSize(gl.canvas.width, gl.canvas.height);gl.clearColor(0.2, 0.2, 0.5, 1.0);gl.viewport(0, 0, renderSpec.width, renderSpec.height);var rtfunc = function (rtname, rtw, rth) {var rt = renderSpec[rtname];if (rt) deleteRenderTarget(rt);renderSpec[rtname] = createRenderTarget(rtw, rth);};rtfunc('mainRT', renderSpec.width, renderSpec.height);rtfunc('wFullRT0', renderSpec.width, renderSpec.height);rtfunc('wFullRT1', renderSpec.width, renderSpec.height);rtfunc('wHalfRT0', renderSpec.halfWidth, renderSpec.halfHeight);rtfunc('wHalfRT1', renderSpec.halfWidth, renderSpec.halfHeight);}function render() {renderScene();}var animating = true;function toggleAnimation(elm) {animating ^= true;if (animating) animate();if (elm) {elm.innerHTML = animating ? "Stop" : "Start";}}function stepAnimation() {if (!animating) animate();}function animate() {var curdate = new Date();timeInfo.elapsed = (curdate - timeInfo.start) / 1000.0;timeInfo.delta = (curdate - timeInfo.prev) / 1000.0;timeInfo.prev = curdate;if (animating) requestAnimationFrame(animate);render();}function makeCanvasFullScreen(canvas) {var b = document.body;var d = document.documentElement;fullw = Math.max(b.clientWidth, b.scrollWidth, d.scrollWidth, d.clientWidth);fullh = Math.max(b.clientHeight, b.scrollHeight, d.scrollHeight, d.clientHeight);canvas.width = fullw;canvas.height = fullh;}window.addEventListener('load', function (e) {var canvas = document.getElementById("sakura");try {makeCanvasFullScreen(canvas);gl = canvas.getContext('experimental-webgl');} catch (e) {alert("WebGL not supported." + e);console.error(e);return;}window.addEventListener('resize', onResize);setViewports();createScene();initScene();timeInfo.start = new Date();timeInfo.prev = timeInfo.start;animate();});//set window.requestAnimationFrame(function (w, r) {w['r' + r] = w['r' + r] || w['webkitR' + r] || w['mozR' + r] || w['msR' + r] || w['oR' + r] || function (c) { w.setTimeout(c, 1000 / 60); };})(window, 'equestAnimationFrame');</script>
</body></html>JS写下雨特效，樱花落特效，滑块成功效果相关推荐
- 原生JS写仿淘宝搜索框（代码+效果），可实现3级搜索哦！
闲来无事,用原生JS写了一个淘宝搜索框,用的淘宝的接口,可直接进行商品搜索. 写在前面: 1.记得引用jquery啊! 2.有人私信我说css样式不能用,那是因为复制代码的时候,有空格,只需要自己把c ...
- 原生js写的左侧飞入拼图特效，你是喜欢美女单飞还是双飞？程序员就是可以为所欲为！
目录 先看效果图: 实现思路: 代码: 欢迎指正,整理不易给个三连吧,谢谢拉!! 先看效果图: 单飞: 双飞: 完成后的页面: 实现思路: 1.切图:用 background:url('+url+') ...
- 我在个人站点里添加了樱花飘落特效
樱花飘H5页面动画特效 使用实例 请自行参见我站江浒一只猫特效 实际樱花有四种,自动按季节更替 花瓣效果 春天 夏天 秋天 冬天 使用说明 我已经将js文件上传到了七牛和又拍云,可以公开引用 食用方法 ...
- html樱花飘落特效js
引入 <!--樱花特效在线引入--> <script src="https://files.cnblogs.com/files/quaint/sakuraPlus.js&q ...
- HTML+JS樱花飘落特效+鼠标点击特效
目录: 效果: index.html 代码: <!DOCTYPE html> <html> <head><meta charset="UTF-8&q ...
- js之焦点图轮播特效
js之焦点图轮播特效 一.原理介绍 焦点图在网站很明显的位置,用图片组合播放的形式,类似焦点新闻的意思,只不过加上了图片.据国外的设计机构调查统计,网站焦点图的点击率明显高于纯文字.在很多购物网主页面 ...
- jq制作樱花飘落特效
jq制作樱花飘落特效 今天看到一些网站有樱花飘落,雨滴,流星,孔明灯等在整个页面飘动的特效,经过查询资料自己也做了一个,分享给大家 思路: 1.创建一个樱花的元素即为樱花图片 2.产生的樱花图片不止一 ...
- 纯JS+CSS3制作星星海背景特效
今天刚学的用JS和CSS3制作星星海特效 图片自己用PS简单做的一个星星,png格式 js代码中有必要的步骤注释 主要用到了随机函数,这个很重要,它让界面变得很炫,不是单调的闪烁,星星的变化主要是透明 ...
- JS实现转动随机数抽奖的特效代码
JS实现转动随机数抽奖的特效代码 大家都玩过抽奖游戏,或者梦想抽到大奖吧.可是有没有想过抽奖游戏是怎么实现的呐?今天就给大家分享一款转动随机数抽奖的JS特效代码. 实现代码例如以下 <!Doct ...
最新文章
- 自助用户选择VM Network
- 为什么我从Python转战到Node.js
- 怎样一步一步删除（linux amp; UNIX）环境下 oracle 11g 集群节点
- 利用ida对程序的静态链接库进行处理
- java timer开销_减少Java垃圾收集开销的5条提示
- 阿里与珠海横琴新区达成战略合作，阿里云助力打造横琴智能岛
- 爬虫教程（ 4 ） --- 分布式爬虫 scrapy-redis、集群
- 【转载】给程序员的圣诞大礼★★春夏
- java内存shell_Springboot 内存shell
- spring笔记4-事务管理
- 【恋上数据结构】布隆过滤器（Bloom Filter）原理及实现
- 关于jquery你不得不知的小知识
- android markdown软件,安卓上的Markdown写作软件——Markdrop
- Retrofit+Rxjava服务器IP轮询重试机制实现
- localhost可以访问 ip不能访问_如何解决域名可以访问80端口但访问不了其他端口的问题...
- 小米路由器 linux挂载,Linux下访问小米路由器文件
- 基于单片机的导盲拐杖设计
- 杜绝网络黑手，谁来保障企业数据安全
- golang制作一个斗地主游戏服务器[5]:牌型
- php系统主题,第8章 drupal主题系统