├── .gitattributes
├── .gitignore
├── 2d
    ├── demo_meshes
    │   └── index.html
    ├── demo_photoFrames
    │   ├── demo2.html
    │   ├── index.html
    │   └── photoFrames.js
    ├── gui_test
    │   ├── README.html
    │   ├── gui_test1.html
    │   ├── gui_test2.html
    │   ├── gui_test3.html
    │   ├── gui_test4.html
    │   └── index.html
    ├── index.html
    ├── slideshows
    │   ├── Burst
    │   ├── Burst.html
    │   ├── Burst.js
    │   ├── Classic.html
    │   ├── Inspiration.OGG
    │   ├── Inspiration.mp3
    │   ├── Live My Life.OGG
    │   ├── Live My Life.mp3
    │   ├── Memories.html
    │   ├── Party.html
    │   ├── Piano.html
    │   ├── README.html
    │   ├── Shades.html
    │   ├── Slide_maniac.OGG
    │   ├── Slide_maniac.mp3
    │   ├── Sliders.html
    │   ├── Snapshots.html
    │   ├── Vignette.html
    │   ├── Vignette.js
    │   ├── classic.js
    │   ├── happy.OGG
    │   ├── happy.mp3
    │   ├── index.html
    │   ├── memories.jpg
    │   ├── memories.js
    │   ├── photoFrames.html
    │   ├── photoFrames.js
    │   ├── piano.js
    │   ├── piano.mp3
    │   ├── slideshow_filmic.OGG
    │   ├── slideshow_filmic.mp3
    │   ├── slideshow_live.OGG
    │   ├── slideshow_live.mp3
    │   ├── slideshow_love.OGG
    │   ├── slideshow_love.mp3
    │   ├── slideshow_photoframe.OGG
    │   ├── slideshow_photoframe.mp3
    │   ├── slideshow_split.OGG
    │   ├── slideshow_split.mp3
    │   ├── slideshow_wonderful.OGG
    │   ├── slideshow_wonderful.mp3
    │   └── snapshots.js
    ├── wgeFilters.js
    ├── wgeSlideshow.js
    └── wgeSprite.js
├── 3rdparty
    ├── soundmanager2-jsmin.js
    ├── soundmanager2-nodebug-jsmin.js
    ├── soundmanager2-nodebug.js
    └── soundmanager2.js
├── 404.html
├── 404.png
├── CNAME
├── LICENSE.txt
├── README.md
├── WGE 简介.pptx
├── about.html
├── extends
    ├── wgeCommonActions.js
    ├── wgeExtendActions.js
    ├── wgeExtendFunctions.js
    └── wgeFotorSlideshowInterface.js
├── favicon.ico
├── image404.jpg
├── index.html
├── logo.png
├── man
    └── index.html
├── res
    ├── 0.jpg
    ├── 1.jpg
    ├── 10.jpg
    ├── 11.jpg
    ├── 12.jpg
    ├── 13.jpg
    ├── 14.jpg
    ├── 15.jpg
    ├── 16.jpg
    ├── 17.jpg
    ├── 18.jpg
    ├── 19.jpg
    ├── 2.jpg
    ├── 20.jpg
    ├── 21.jpg
    ├── 22.jpg
    ├── 23.jpg
    ├── 24.jpg
    ├── 25.jpg
    ├── 26.jpg
    ├── 27.jpg
    ├── 28.jpg
    ├── 29.jpg
    ├── 3.jpg
    ├── 30.jpg
    ├── 31.jpg
    ├── 32.jpg
    ├── 33.jpg
    ├── 34.jpg
    ├── 35.jpg
    ├── 36.jpg
    ├── 37.jpg
    ├── 38.jpg
    ├── 39.jpg
    ├── 4.jpg
    ├── 40.jpg
    ├── 41.jpg
    ├── 42.jpg
    ├── 43.jpg
    ├── 44.jpg
    ├── 45.jpg
    ├── 46.jpg
    ├── 47.jpg
    ├── 48.jpg
    ├── 49.jpg
    ├── 5.jpg
    ├── 50.jpg
    ├── 51.jpg
    ├── 52.jpg
    ├── 6.jpg
    ├── 7.jpg
    ├── 8.jpg
    ├── 9.jpg
    ├── arc.jpg
    ├── box
    │   ├── a1.jpg
    │   ├── a2.jpg
    │   ├── a3.jpg
    │   ├── a4.jpg
    │   ├── bridge_negx.jpg
    │   ├── bridge_negy.jpg
    │   ├── bridge_negz.jpg
    │   ├── bridge_posx.jpg
    │   ├── bridge_posy.jpg
    │   ├── bridge_posz.jpg
    │   ├── bump.jpg
    │   ├── bump2.jpg
    │   ├── mountain_neg_x.jpg
    │   ├── mountain_neg_y.jpg
    │   ├── mountain_neg_z.jpg
    │   ├── mountain_pos_x.jpg
    │   ├── mountain_pos_y.jpg
    │   ├── mountain_pos_z.jpg
    │   ├── skycubemap_back.jpg
    │   ├── skycubemap_down.jpg
    │   ├── skycubemap_down_cube.jpg
    │   ├── skycubemap_front.jpg
    │   ├── skycubemap_left.jpg
    │   ├── skycubemap_right.jpg
    │   ├── skycubemap_up.jpg
    │   └── skycubemap_up_cube.jpg
    ├── comic0.jpg
    ├── comic1.jpg
    ├── comic10.jpg
    ├── comic11.jpg
    ├── comic12.jpg
    ├── comic13.jpg
    ├── comic14.jpg
    ├── comic15.jpg
    ├── comic16.jpg
    ├── comic2.jpg
    ├── comic3.jpg
    ├── comic4.jpg
    ├── comic5.jpg
    ├── comic6.jpg
    ├── comic7.jpg
    ├── comic8.jpg
    ├── comic9.jpg
    ├── face.jpg
    ├── face2.jpg
    ├── maskFace.jpg
    ├── materials
    │   ├── 0.jpg
    │   ├── 1.jpg
    │   ├── 2.jpg
    │   ├── 3.jpg
    │   ├── 4.jpg
    │   ├── 5.jpg
    │   └── 6.jpg
    ├── png
    │   ├── 0.png
    │   ├── 1.png
    │   ├── 10.png
    │   ├── 11.png
    │   ├── 12.png
    │   ├── 13.png
    │   ├── 2.png
    │   ├── 3.png
    │   ├── 4.png
    │   ├── 5.png
    │   ├── 6.png
    │   ├── 7.png
    │   ├── 8.png
    │   └── 9.png
    ├── snd1.mp3
    ├── test.jpg
    ├── test2.jpg
    └── video
    │   └── 1.mp4
├── screenshots
    ├── 2d_gui_test2.jpg
    ├── cube_map_reflect.jpg
    ├── cube_map_refract.jpg
    ├── teapot_perpixel.jpg
    ├── webgl_gui_test1.jpg
    ├── webgl_gui_test2.jpg
    ├── webgl_gui_test3.jpg
    └── webgl_gui_test4.jpg
├── tools
    ├── code_format.html
    ├── index.html
    └── wge2d.html
├── webgl
    ├── README.html
    ├── demos
    │   ├── README.html
    │   ├── TeapotPerPixel.html
    │   ├── TeapotPerVertex.html
    │   ├── alphaBlendTest.html
    │   ├── bump_mapping_1.html
    │   ├── faceDeform.html
    │   ├── faceDistortion.html
    │   ├── faceDistortion_arc.html
    │   ├── faceDistortion_arc2.html
    │   ├── faceDistortion_facepp.html
    │   ├── index.html
    │   ├── sceneRoamingTest1.html
    │   ├── sceneRoamingTest2.html
    │   ├── skyBox1.html
    │   ├── skyBox2.html
    │   ├── skyBox3.html
    │   ├── skyBox4.html
    │   ├── skyBox5.html
    │   ├── sprite2dtest1.html
    │   ├── sprite2dtest2.html
    │   └── stencilTest.html
    ├── effects
    │   └── 1_wavingflag.html
    ├── index.html
    ├── models
    │   ├── cube.js
    │   ├── mesh2d.js
    │   ├── sphere.js
    │   └── teapot-streams.js
    ├── wgeFilters.js
    ├── wgeLerpBlurUtil.js
    ├── wgeMappingBlendUtil.js
    ├── wgeMappingUtil.js
    ├── wgeScene.js
    ├── wgeSprite2d.fsh.txt
    ├── wgeSprite2d.js
    ├── wgeSprite2d.vsh.txt
    ├── wgeSprite2dExt.fsh.txt
    ├── wgeSprite2dExt.vsh.txt
    ├── wgeSprite2dInterchange.js
    ├── wgeSprite3d.fsh.txt
    ├── wgeSprite3d.js
    ├── wgeSprite3d.vsh.txt
    └── wgeWebGL.js
├── wge.js
├── wgeAlgorithm.js
├── wgeAnimation.js
├── wgeColor.js
├── wgeCore.js
├── wgeFont.js
├── wgeGUI.js
├── wgeNoteList.txt
└── wgeParticleSystem.js


/.gitattributes:
--------------------------------------------------------------------------------
 1 | # Auto detect text files and perform LF normalization
 2 | * text=auto
 3 | 
 4 | # Custom for Visual Studio
 5 | *.cs     diff=csharp
 6 | *.sln    merge=union
 7 | *.csproj merge=union
 8 | *.vbproj merge=union
 9 | *.fsproj merge=union
10 | *.dbproj merge=union
11 | 
12 | # Standard to msysgit
13 | *.doc	 diff=astextplain
14 | *.DOC	 diff=astextplain
15 | *.docx diff=astextplain
16 | *.DOCX diff=astextplain
17 | *.dot  diff=astextplain
18 | *.DOT  diff=astextplain
19 | *.pdf  diff=astextplain
20 | *.PDF	 diff=astextplain
21 | *.rtf	 diff=astextplain
22 | *.RTF	 diff=astextplain
23 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .svn
2 | .git
3 | .idea/


--------------------------------------------------------------------------------
/2d/demo_meshes/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | <meta charset="utf-8">
 4 | <title>js validation test</title>
 5 | <script type="text/javascript" src="../../wgeCore.js"></script>
 6 | <script type="text/javascript" src="../../wgeAlgorithm.js"></script>
 7 | <script type="text/javascript" src="../../wgeGUI.js"></script>
 8 | <script type="text/javascript" src="../../wgeAnimation.js"></script>
 9 | <script type="text/javascript" src="../wgeSprite.js"></script>
10 | 
11 | </head>
12 | <body>
13 | <script type="text/javascript">
14 | 
15 | var MySprite = WGE.Class(WGE.Sprite,
16 | {
17 | 	matrix : null,
18 | 
19 | 	initialize : function(img, w, h)
20 | 	{
21 | 	    WGE.Sprite.initialize.apply(this, arguments);
22 | 		this.initSprite(img, w, h);
23 | 		this.matrix = new WGE.mat2Identity();
24 | 	},
25 | 
26 | 	render : function(ctx)
27 | 	{
28 | 		ctx.save();
29 | 		var m = this.matrix.data;
30 | 		ctx.transform(m[0] * this.scaling.data[0], m[1], m[2] * this.scaling.data[1], m[3], this.pos.data[0], this.pos.data[1]);
31 | 		ctx.drawImage(this.img, -this.hotspot.data[0], -this.hotspot.data[1]);
32 | 		ctx.restore();
33 | 	},
34 | 
35 | 	update : function()
36 | 	{
37 | 		this.matrix.rotate(0.01);
38 | 	}
39 | });
40 | 
41 | var myGUI = WGE.Class(WGE.GUIInterface, 
42 | {
43 | 	context : undefined,
44 | 	x : 0,
45 | 	y : 0,
46 | 	isMouseDown : false,
47 | 
48 | 	sprite : null,
49 | 
50 | 	bindFather : function(fatherObj)
51 | 	{
52 | 		if(WGE.GUIInterface.bindFather.call(this, fatherObj));
53 | 		{
54 | 			this.context = this.canvas.getContext('2d');
55 | 			if(!this.context)
56 | 			{
57 | 				alert('你的浏览器不支持html5啊，坟蛋！换一个好吗？');
58 | 			}
59 | 			return !!this.context;
60 | 		}
61 | 		return false;
62 | 	},
63 | 
64 | 	initSprite : function()
65 | 	{
66 | 		this.sprite = new MySprite(WGE.ID('test0'), -1);
67 | 		this.sprite.setHotspot2Center();
68 | 		this.sprite.moveTo(200, 200);
69 | 	},
70 | 
71 | 	update : function(dt)
72 | 	{
73 | 		this.sprite.update();
74 | 	},
75 | 
76 | 	render : function()
77 | 	{
78 | 		this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
79 | 		this.sprite.render(this.context);
80 | 	}
81 | 	
82 | });
83 | 
84 | window.gui = new myGUI(document.body);
85 | 
86 | //下面两句都是使整个ui大小跟随父元素变化，推荐前者。嫌麻烦或者跟已有代码有冲突（比如body的onresize有别的代码会随时更改）写成后者也没关系。
87 | document.body.setAttribute("onresize", "gui.onresize(event);"); //较好
88 | //gui.forceAutoResize(true); //这一句和上一句功能类似，这种方法可保证正确性
89 | 
90 | document.body.setAttribute("onload"," gui.initSprite(); gui.start();");
91 | 
92 | </script>
93 | 
94 | <div style="display:none"><img src="../../res/png/0.png" id="test0"></div>
95 | </body>
96 | </html>


--------------------------------------------------------------------------------
/2d/demo_photoFrames/demo2.html:
--------------------------------------------------------------------------------
  1 | <head>
  2 | <meta charset="utf-8">
  3 | </head>
  4 | 
  5 | <body>
  6 | <script type="text/javascript" src="../../wgeCore.js"></script>
  7 | <script type="text/javascript" src="../../wgeAlgorithm.js"></script>
  8 | <script type="text/javascript" src="../wgeSprite.js"></script>
  9 | <script type="text/javascript" src="../../wgeAnimation.js"></script>
 10 | <script type="text/javascript" src="../wgeFilters.js"></script>
 11 | <script type="text/javascript" src="../../extends/wgeExtendActions.js"></script>
 12 | <script type="text/javascript" src="../../extends/wgeExtendFunctions.js"></script>
 13 | <script type="text/javascript" src="photoFrames.js"></script>
 14 | 
 15 | <canvas id="photoFrames" width='800' height='600' style="border:groove;background-color:#000">你的浏览器不支持html5，换一个再来！(推荐：Chrome, Firefox, Safari)</canvas><br>
 16 | <input type="button" value="MUTE or not" onclick="var snd = WGE.ID('bgSound'); snd.muted=!snd.muted">
 17 | <input type="button" value="点击查看另一个版本" onclick="window.location='index.html'">
 18 | <br>
 19 | <p>本页面使用html5编写，如果您使用的是IE，请保证IE版本>=9。如果图片过多导致加载失败，请刷新界面</p>
 20 | 
 21 | <script type="text/javascript">
 22 | "use strict";
 23 | var timeline = new WGE.TimeLine(60000);
 24 | var cvs = WGE.ID('photoFrames');
 25 | var ctx = cvs.getContext('2d');
 26 | var totalImages = 24;
 27 | var loadedImages = 0;
 28 | var lastTime = 0;
 29 | 
 30 | ctx.font = "50px Aria";
 31 | 
 32 | ctx.fillStyle = "#0f0";
 33 | 
 34 | if(!window.requestAnimationFrame)
 35 | {
 36 | 	window.requestAnimationFrame = window.mozRequestAnimationFrame ||
 37 | 							window.webkitRequestAnimationFrame ||
 38 | 							window.msRequestAnimationFrame ||
 39 | 							window.oRequestAnimationFrame ||
 40 | 							function(callback) {
 41 | 								setTimeout(callback, 1000 / 60);
 42 | 							};
 43 | }
 44 | 
 45 | function scaleImage(img)
 46 | {
 47 | 	if(!img.width)
 48 | 	{
 49 | 		img.width = 800;
 50 | 		img.height = 600;
 51 | 	}
 52 | 
 53 | 	var c = WGE.CE('canvas');
 54 | 	c.width = img.width * (720.0 / img.height);
 55 | 	c.height = 720;
 56 | 	var t = c.getContext('2d');
 57 | 	t.save();
 58 | 	t.scale(c.width / img.width, c.height / img.height);
 59 | 	t.drawImage(img, 0, 0);
 60 | 	t.restore();
 61 | 	return c;
 62 | }
 63 | 
 64 | function main()
 65 | {
 66 | 	ctx.fillStyle = "#000";
 67 | 	ctx.strokeStyle = "#fff";
 68 | 	ctx.lineWidth = 6;
 69 | 
 70 | 	var imgArray = [];
 71 | 	for(var i = 0; i != totalImages; ++i)
 72 | 	{
 73 | 		var img = scaleImage(WGE.ID("test" + (i + 1)));
 74 | 		imgArray.push(img);
 75 | 	}
 76 | 
 77 | 	var timeStamp = 0, stillTime = 17000, globalZ = 0;
 78 | 	for (var i = 0; i < totalImages; i += 20)
 79 | 	{
 80 | 	    for (var j = 0; j != 4; ++j)
 81 | 	    {
 82 | 	        var scene = FTPhotoFrame.initScene(imgArray, 800, 600, globalZ, timeStamp, stillTime);
 83 | 	        timeline.pushArr(scene);
 84 | 	        globalZ += 10000;
 85 | 	        timeStamp += 15000;
 86 | 	    }
 87 | 	}
 88 | 
 89 | 	timeline.start(0);
 90 | 	lastTime = Date.now();
 91 | 	WGE.ID('bgSound').play();
 92 | 	mainloop();
 93 | }
 94 | 
 95 | function endloop()
 96 | {
 97 | 	ctx.fillRect(0,0, 800, 600);
 98 | 	ctx.globalAlpha += 0.01;
 99 | 	if(ctx.globalAlpha >= 0.99)
100 | 	{
101 | 		ctx.fillStyle = "#fff";
102 | 		ctx.fillText("The End.", 200, cvs.height / 2);
103 | 		ctx.font = "30px Aria";
104 | 		ctx.fillText("By wysaid", 400, 400);
105 | 		WGE.ID('bgSound').pause();
106 | 		return ;
107 | 	}
108 | 	requestAnimationFrame(endloop);
109 | }
110 | 
111 | function mainloop()
112 | {
113 | 	var timeNow = Date.now();
114 |     
115 | 	if(!timeline.update(timeNow - lastTime))
116 | 	{
117 | 	    console.log('PhotoFrames End');
118 | 	    ctx.globalAlpha = 0.001;
119 | 	    ctx.fillStyle = "#000";
120 | 	    requestAnimationFrame(endloop);
121 | 		return ;
122 | 	}
123 | 	lastTime = timeNow;
124 | 	ctx.clearRect(0,0, 800, 600);
125 | 	timeline.render(ctx);
126 | 	requestAnimationFrame(mainloop);
127 | }
128 | 
129 | function loadingDone()
130 | {
131 | 	++loadedImages;
132 | 	if(loadedImages == totalImages)
133 | 	{
134 | 		ctx.clearRect(0,0, 800, 600);
135 | 		ctx.fillText("初始化场景......", 10, cvs.height / 2);
136 | 		setTimeout("main()", 100);
137 | 		return ;
138 | 	}
139 | 
140 | 	var loadedRate = loadedImages / totalImages * 100;
141 | 
142 | 	ctx.clearRect(0,0, 800, 600);
143 | 	ctx.fillText("LoadingImages: " + loadedRate.toFixed(2) + "%", 10, cvs.height / 2);
144 | }
145 | 
146 | </script>
147 | 
148 | 
149 | <div style="display:none">
150 | <img src="../../res/1.jpg" id="test1" onload="loadingDone()">
151 | <img src="../../res/2.jpg" id="test2" onload="loadingDone()">
152 | <img src="../../res/3.jpg" id="test3" onload="loadingDone()">
153 | <img src="../../res/4.jpg" id="test4" onload="loadingDone()">
154 | <img src="../../res/5.jpg" id="test5" onload="loadingDone()">
155 | <img src="../../res/6.jpg" id="test6" onload="loadingDone()">
156 | <img src="../../res/7.jpg" id="test7" onload="loadingDone()">
157 | <img src="../../res/8.jpg" id="test8" onload="loadingDone()">
158 | <img src="../../res/9.jpg" id="test9" onload="loadingDone()">
159 | <img src="../../res/10.jpg" id="test10" onload="loadingDone()">
160 | <img src="../../res/11.jpg" id="test11" onload="loadingDone()">
161 | <img src="../../res/12.jpg" id="test12" onload="loadingDone()">
162 | <img src="../../res/13.jpg" id="test13" onload="loadingDone()">
163 | <img src="../../res/14.jpg" id="test14" onload="loadingDone()">
164 | <img src="../../res/15.jpg" id="test15" onload="loadingDone()">
165 | <img src="../../res/16.jpg" id="test16" onload="loadingDone()">
166 | <img src="../../res/17.jpg" id="test17" onload="loadingDone()">
167 | <img src="../../res/18.jpg" id="test18" onload="loadingDone()">
168 | <img src="../../res/19.jpg" id="test19" onload="loadingDone()">
169 | <img src="../../res/20.jpg" id="test20" onload="loadingDone()">
170 | <img src="../../res/21.jpg" id="test21" onload="loadingDone()">
171 | <img src="../../res/22.jpg" id="test22" onload="loadingDone()">
172 | <img src="../../res/23.jpg" id="test23" onload="loadingDone()">
173 | <img src="../../res/24.jpg" id="test24" onload="loadingDone()">
174 | <audio src="../../res/snd1.mp3" id="bgSound"></audio>
175 | </div>
176 | <div style="display:none;" id="trackingCodes">
177 | 
178 | <script type="text/javascript">
179 |   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
180 |   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
181 |   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
182 |   })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
183 | 
184 |   ga('create', 'UA-41296769-1', 'wysaid.org');
185 |   ga('send', 'pageview');
186 | </script>
187 | <script type="text/javascript">
188 | var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
189 | document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fb1b964c80dff2a1af1bb8b1ee3e9a7d1' type='text/javascript'%3E%3C/script%3E"));
190 | 
191 | document.write(unescape("%3Cscript src='" + _bdhmProtocol + "tajs.qq.com/stats?sId=23413950' type='text/javascript'%3E%3C/script%3E"));
192 |   (function(){if(console && console.log){  var ____tmp = 
193 | "                       ::\n"+
194 | "                      :;J7, :,                        ::;7:\n"+
195 | "                      ,ivYi, ,                       ;LLLFS:\n"+
196 | "                      :iv7Yi                       :7ri;j5PL\n"+
197 | "                     ,:ivYLvr                    ,ivrrirrY2X,\n"+
198 | "                     :;r@Wwz.7r:                :ivu@kexianli.\n"+
199 | "                    :iL7::,:::iiirii:ii;::::,,irvF7rvvLujL7ur\n"+
200 | "                   ri::,:,::i:iiiiiii:i:irrv177JX7rYXqZEkvv17\n"+
201 | "                ;i:, , ::::iirrririi:i:::iiir2XXvii;L8OGJr71i\n"+
202 | "              :,, ,,:   ,::ir@mingyi.irii:i:::j1jri7ZBOS7ivv,\n"+
203 | "                 ,::,    ::rv77iiiriii:iii:i::,rvLq@huhao.Li\n"+
204 | "             ,,      ,, ,:ir7ir::,:::i;ir:::i:i::rSGGYri712:\n"+
205 | "           :::  ,v7r:: ::rrv77:, ,, ,:i7rrii:::::, ir7ri7Lri\n"+
206 | "          ,     2OBBOi,iiir;r::        ,irriiii::,, ,iv7Luur:\n"+
207 | "        ,,     i78MBBi,:,:::,:,  :7FSL: ,iriii:::i::,,:rLqXv::\n"+
208 | "        :      iuMMP: :,:::,:ii;2GY7OBB0viiii:i:iii:i:::iJqL;::\n"+
209 | "       ,     ::::i   ,,,,, ::LuBBu BBBBBErii:i:i:i:i:i:i:r77ii\n"+
210 | "      ,       :       , ,,:::rruBZ1MBBqi, :,,,:::,::::::iiriri:\n"+
211 | "     ,               ,,,,::::i:  @arqiao.       ,:,, ,:::ii;i7:\n"+
212 | "    :,       rjujLYLi   ,,:::::,:::::::::,,   ,:i,:,,,,,::i:iii\n"+
213 | "    ::      BBBBBBBBB0,    ,,::: , ,:::::: ,      ,,,, ,,:::::::\n"+
214 | "    i,  ,  ,8BMMBBBBBBi     ,,:,,     ,,, , ,   , , , :,::ii::i::\n"+
215 | "    :      iZMOMOMBBM2::::::::::,,,,     ,,,,,,:,,,::::i:irr:i:::,\n"+
216 | "    i   ,,:;u0MBMOG1L:::i::::::  ,,,::,   ,,, ::::::i:i:iirii:i:i:\n"+
217 | "    :    ,iuUuuXUkFu7i:iii:i:::, :,:,: ::::::::i:i:::::iirr7iiri::\n"+
218 | "    :     :rk@Yizero.i:::::, ,:ii:::::::i:::::i::,::::iirrriiiri::,\n"+
219 | "     :      5BMBBBBBBSr:,::rv2kuii:::iii::,:i:,, , ,,:,:i@petermu.,\n"+
220 | "          , :r50EZ8MBBBBGOBBBZP7::::i::,:::::,: :,:,::i;rrririiii::\n"+
221 | "              :jujYY7LS0ujJL7r::,::i::,::::::::::::::iirirrrrrrr:ii:\n"+
222 | "           ,:  :@kevensun.:,:,,,::::i:i:::::,,::::::iir;ii;7v77;ii;i,\n"+
223 | "           ,,,     ,,:,::::::i:iiiii:i::::,, ::::iiiir@xingjief.r;7:i,\n"+
224 | "        , , ,,,:,,::::::::iiiiiiiiii:,:,:::::::::iiir;ri7vL77rrirri::\n"+
225 | "         :,, , ::::::::i:::i:::i:i::,,,,,:,::i:i:::iir;@Secbone.ii:::\n";
226 |   console.log(____tmp);
227 |   console.log("呵呵，你这么屌你爸妈知道吗？");
228 | }})();
229 | </script>
230 | 
231 | </div>
232 | 
233 | 
234 | </body>


--------------------------------------------------------------------------------
/2d/demo_photoFrames/index.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 | <meta charset="utf-8">
  4 | </head>
  5 | 
  6 | <body >
  7 | <script type="text/javascript" src="../../wgeCore.js"></script>
  8 | <script type="text/javascript" src="../../wgeAlgorithm.js"></script>
  9 | <script type="text/javascript" src="../wgeSprite.js"></script>
 10 | <script type="text/javascript" src="../../wgeAnimation.js"></script>
 11 | <script type="text/javascript" src="../wgeFilters.js"></script>
 12 | <script type="text/javascript" src="../../extends/wgeExtendActions.js"></script>
 13 | <script type="text/javascript" src="../../extends/wgeExtendFunctions.js"></script>
 14 | <script type="text/javascript" src="photoFrames.js"></script>
 15 | 
 16 | <canvas id="photoFrames" width='800' height='600' style="border:groove;background-color:#000">你的浏览器不支持html5，换一个再来！(推荐：Chrome, Firefox, Safari)</canvas><br>
 17 | <input type="button" value="MUTE or not" onclick="var snd = WGE.ID('bgSound'); snd.muted=!snd.muted">
 18 | <input type="button" value="点击查看另一个版本" onclick="window.location='demo2.html'">
 19 | <br>
 20 | <p>本页面使用html5编写，如果您使用的是IE，请保证IE版本>=9。如果图片过多导致加载失败，请刷新界面</p>
 21 | 
 22 | <script type="text/javascript">
 23 | "use strict";
 24 | var timeline = new WGE.TimeLine(60000);
 25 | var cvs = WGE.ID('photoFrames');
 26 | var ctx = cvs.getContext('2d');
 27 | var totalImages = 17;
 28 | var loadedImages = 0;
 29 | var lastTime = 0;
 30 | 
 31 | ctx.font = "50px Aria";
 32 | 
 33 | ctx.fillStyle = "#0f0";
 34 | 
 35 | if(!window.requestAnimationFrame)
 36 | {
 37 | 	window.requestAnimationFrame = window.mozRequestAnimationFrame ||
 38 | 							window.webkitRequestAnimationFrame ||
 39 | 							window.msRequestAnimationFrame ||
 40 | 							window.oRequestAnimationFrame ||
 41 | 							function(callback) {
 42 | 								setTimeout(callback, 1000 / 60);
 43 | 							};
 44 | }
 45 | 
 46 | function scaleImage(img)
 47 | {
 48 | 	if(!img.width)
 49 | 	{
 50 | 		img.width = 800;
 51 | 		img.height = 600;
 52 | 	}
 53 | 
 54 | 	var c = WGE.CE('canvas');
 55 | 	c.width = img.width * (720.0 / img.height);
 56 | 	c.height = 720;
 57 | 	var t = c.getContext('2d');
 58 | 	t.save();
 59 | 	t.scale(c.width / img.width, c.height / img.height);
 60 | 	t.drawImage(img, 0, 0);
 61 | 	t.restore();
 62 | 	return c;
 63 | }
 64 | 
 65 | function main()
 66 | {
 67 | 	ctx.fillStyle = "#000";
 68 | 	ctx.strokeStyle = "#fff";
 69 | 	ctx.lineWidth = 6;
 70 | 
 71 | 	var imgArray = [];
 72 | 	for(var i = 0; i != totalImages; ++i)
 73 | 	{
 74 | 		var img = scaleImage(WGE.ID("test" + i));
 75 | 		imgArray.push(img);
 76 | 	}
 77 | 
 78 | 	timeline.clear();
 79 | 	var timeStamp = 0, stillTime = 18500, globalZ = 0;
 80 | 	for (var i = 0; i < totalImages; i += 20)
 81 | 	{
 82 | 	    for (var j = 0; j != 4; ++j)
 83 | 	    {
 84 | 	        var scene = FTPhotoFrame.initScene(imgArray, 800, 600, globalZ, timeStamp, stillTime);
 85 | 	        timeline.pushArr(scene);
 86 | 	        globalZ += 10000;
 87 | 	        timeStamp += 17500;
 88 | 	    }
 89 | 	}
 90 | 
 91 | 	timeline.start(0);
 92 | 	lastTime = Date.now();
 93 | 	WGE.ID('bgSound').play();
 94 | 	mainloop();
 95 | }
 96 | 
 97 | function endloop()
 98 | {
 99 | 	ctx.fillRect(0,0, 800, 600);
100 | 	ctx.globalAlpha += 0.01;
101 | 	if(ctx.globalAlpha >= 0.99)
102 | 	{
103 | 		ctx.fillStyle = "#fff";
104 | 		ctx.fillText("The End.", 200, cvs.height / 2);
105 | 		ctx.font = "30px Aria";
106 | 		ctx.fillText("By wysaid", 400, 400);
107 | 		WGE.ID('bgSound').pause();
108 | 		return ;
109 | 	}
110 | 	requestAnimationFrame(endloop);
111 | }
112 | 
113 | function mainloop()
114 | {
115 | 	var timeNow = Date.now();
116 |     
117 | 	if(!timeline.update((timeNow - lastTime) * 1.2))
118 | 	{
119 | 	    console.log('PhotoFrames End');
120 | 	    ctx.globalAlpha = 0.001;
121 | 	    ctx.fillStyle = "#000";
122 | 	    requestAnimationFrame(endloop);
123 | 		return ;
124 | 	}
125 | 	lastTime = timeNow;
126 | 	ctx.clearRect(0,0, 800, 600);
127 | 	timeline.render(ctx);
128 | 	requestAnimationFrame(mainloop);
129 | }
130 | 
131 | function loadingDone()
132 | {
133 | 	++loadedImages;
134 | 	if(loadedImages == totalImages)
135 | 	{
136 | 		ctx.clearRect(0,0, 800, 600);
137 | 		ctx.fillText("初始化场景......", 10, cvs.height / 2);
138 | 		setTimeout("main()", 100);
139 | 		return ;
140 | 	}
141 | 
142 | 	var loadedRate = loadedImages / totalImages * 100;
143 | 
144 | 	ctx.clearRect(0,0, 800, 600);
145 | 	ctx.fillText("LoadingImages: " + loadedRate.toFixed(2) + "%", 10, cvs.height / 2);
146 | }
147 | 
148 | </script>
149 | 
150 | 
151 | <div style="display:none">
152 | <img src="../../res/comic0.jpg" id="test0" onload="loadingDone()">
153 | <img src="../../res/comic1.jpg" id="test1" onload="loadingDone()">
154 | <img src="../../res/comic2.jpg" id="test2" onload="loadingDone()">
155 | <img src="../../res/comic3.jpg" id="test3" onload="loadingDone()">
156 | <img src="../../res/comic4.jpg" id="test4" onload="loadingDone()">
157 | <img src="../../res/comic5.jpg" id="test5" onload="loadingDone()">
158 | <img src="../../res/comic6.jpg" id="test6" onload="loadingDone()">
159 | <img src="../../res/comic7.jpg" id="test7" onload="loadingDone()">
160 | <img src="../../res/comic8.jpg" id="test8" onload="loadingDone()">
161 | <img src="../../res/comic9.jpg" id="test9" onload="loadingDone()">
162 | <img src="../../res/comic10.jpg" id="test10" onload="loadingDone()">
163 | <img src="../../res/comic11.jpg" id="test11" onload="loadingDone()">
164 | <img src="../../res/comic12.jpg" id="test12" onload="loadingDone()">
165 | <img src="../../res/comic13.jpg" id="test13" onload="loadingDone()">
166 | <img src="../../res/comic14.jpg" id="test14" onload="loadingDone()">
167 | <img src="../../res/comic15.jpg" id="test15" onload="loadingDone()">
168 | <img src="../../res/comic16.jpg" id="test16" onload="loadingDone()">
169 | <audio src="../../res/snd1.mp3" id="bgSound"></audio>
170 | </div>
171 | 
172 | <div style="display:none;" id="trackingCodes">
173 | 
174 | <script type="text/javascript">
175 |   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
176 |   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
177 |   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
178 |   })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
179 | 
180 |   ga('create', 'UA-41296769-1', 'wysaid.org');
181 |   ga('send', 'pageview');
182 | </script>
183 | <script type="text/javascript">
184 | var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
185 | document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fb1b964c80dff2a1af1bb8b1ee3e9a7d1' type='text/javascript'%3E%3C/script%3E"));
186 | 
187 | document.write(unescape("%3Cscript src='" + _bdhmProtocol + "tajs.qq.com/stats?sId=23413950' type='text/javascript'%3E%3C/script%3E"));
188 |   (function(){if(console && console.log){  var ____tmp = 
189 | "                       ::\n"+
190 | "                      :;J7, :,                        ::;7:\n"+
191 | "                      ,ivYi, ,                       ;LLLFS:\n"+
192 | "                      :iv7Yi                       :7ri;j5PL\n"+
193 | "                     ,:ivYLvr                    ,ivrrirrY2X,\n"+
194 | "                     :;r#Wwz.7r:                :ivu#kexianli.\n"+
195 | "                    :iL7::,:::iiirii:ii;::::,,irvF7rvvLujL7ur\n"+
196 | "                   ri::,:,::i:iiiiiii:i:irrv177JX7rYXqZEkvv17\n"+
197 | "                ;i:, , ::::iirrririi:i:::iiir2XXvii;L8OGJr71i\n"+
198 | "              :,, ,,:   ,::ir#mingyi.irii:i:::j1jri7ZBOS7ivv,\n"+
199 | "                 ,::,    ::rv77iiiriii:iii:i::,rvLq#huhao.Li\n"+
200 | "             ,,      ,, ,:ir7ir::,:::i;ir:::i:i::rSGGYri712:\n"+
201 | "           :::  ,v7r:: ::rrv77:, ,, ,:i7rrii:::::, ir7ri7Lri\n"+
202 | "          ,     2OBBOi,iiir;r::        ,irriiii::,, ,iv7Luur:\n"+
203 | "        ,,     i78MBBi,:,:::,:,  :7FSL: ,iriii:::i::,,:rLqXv::\n"+
204 | "        :      iuMMP: :,:::,:ii;2GY7OBB0viiii:i:iii:i:::iJqL;::\n"+
205 | "       ,     ::::i   ,,,,, ::LuBBu BBBBBErii:i:i:i:i:i:i:r77ii\n"+
206 | "      ,       :       , ,,:::rruBZ1MBBqi, :,,,:::,::::::iiriri:\n"+
207 | "     ,               ,,,,::::i:  #arqiao.       ,:,, ,:::ii;i7:\n"+
208 | "    :,       rjujLYLi   ,,:::::,:::::::::,,   ,:i,:,,,,,::i:iii\n"+
209 | "    ::      BBBBBBBBB0,    ,,::: , ,:::::: ,      ,,,, ,,:::::::\n"+
210 | "    i,  ,  ,8BMMBBBBBBi     ,,:,,     ,,, , ,   , , , :,::ii::i::\n"+
211 | "    :      iZMOMOMBBM2::::::::::,,,,     ,,,,,,:,,,::::i:irr:i:::,\n"+
212 | "    i   ,,:;u0MBMOG1L:::i::::::  ,,,::,   ,,, ::::::i:i:iirii:i:i:\n"+
213 | "    :    ,iuUuuXUkFu7i:iii:i:::, :,:,: ::::::::i:i:::::iirr7iiri::\n"+
214 | "    :     :rk#Yizero.i:::::, ,:ii:::::::i:::::i::,::::iirrriiiri::,\n"+
215 | "     :      5BMBBBBBBSr:,::rv2kuii:::iii::,:i:,, , ,,:,:i#petermu.,\n"+
216 | "          , :r50EZ8MBBBBGOBBBZP7::::i::,:::::,: :,:,::i;rrririiii::\n"+
217 | "              :jujYY7LS0ujJL7r::,::i::,::::::::::::::iirirrrrrrr:ii:\n"+
218 | "           ,:  :#kevensun.:,:,,,::::i:i:::::,,::::::iir;ii;7v77;ii;i,\n"+
219 | "           ,,,     ,,:,::::::i:iiiii:i::::,, ::::iiiir#xingjief.r;7:i,\n"+
220 | "        , , ,,,:,,::::::::iiiiiiiiii:,:,:::::::::iiir;ri7vL77rrirri::\n"+
221 | "         :,, , ::::::::i:::i:::i:i::,,,,,:,::i:i:::iir;#Secbone.ii:::\n";
222 |   console.log(____tmp);
223 |   console.log("呵呵，你这么屌你爸妈知道吗？");
224 | }})();
225 | </script>
226 | 
227 | </div>
228 | 
229 | </body>
230 | </html>


--------------------------------------------------------------------------------
/2d/gui_test/README.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <meta charset="utf-8" />
 4 |     <title>WGE-Slideshow 简介</title>
 5 | </head>
 6 | <body style="font:bold;font-size:large;">
 7 | <h1>WGE-2d GUI测试</h1>
 8 | <p>简单测试性能、正确性等</p>
 9 | 
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/2d/gui_test/gui_test1.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | <meta charset="utf-8">
 4 | <title>js validation test</title>
 5 | <script type="text/javascript" src="../../wgeCore.js"></script>
 6 | <script type="text/javascript" src="../../wgeAlgorithm.js"></script>
 7 | <script type="text/javascript" src="../../wgeGUI.js"></script>
 8 | <script type="text/javascript" src="../wgeFilters.js"></script>
 9 | <script type="text/javascript" src="../wgeSprite.js"></script>
10 | 
11 | </head>
12 | <body >
13 | <script type="text/javascript">
14 | var myGUI = WGE.Class(WGE.GUIInterface, 
15 | {
16 | 	context : undefined,
17 | 	x : 0,
18 | 	y : 0,
19 | 	isMouseDown : false,
20 | 
21 | 	bindFather : function(fatherObj)
22 | 	{
23 | 		if(WGE.GUIInterface.bindFather.call(this, fatherObj));
24 | 		{
25 | 			this.context = this.canvas.getContext('2d');
26 | 			if(!this.context)
27 | 			{
28 | 				alert('你的浏览器不支持html5啊，坟蛋！换一个好吗？');
29 | 			}
30 | 			return !!this.context;
31 | 		}
32 | 		return false;
33 | 	},
34 | 
35 | 	update : function()
36 | 	{
37 | 		if(!this.isMouseDown)
38 | 		{
39 | 			this.x = Math.random() * this.canvas.width;
40 | 			this.y = Math.random() * this.canvas.height;
41 | 		}
42 | 	},
43 | 
44 | 	render : function()
45 | 	{
46 | 		var ctx = this.context;
47 | 		var cvs = this.canvas;
48 | 		ctx.clearRect(0, 0, cvs.width, cvs.height);
49 | 		this.context.fillStyle = "#f00";
50 | 		ctx.fillRect(this.x, this.y, 100, 100);
51 | 		ctx.fillText("click me!", 10, 10);
52 | 	},
53 | 
54 | 	mouseDownEvent : function(e)
55 | 	{
56 | 		this.isMouseDown = true;
57 | 		this.x = e.offsetX || e.layerX;
58 | 		this.y = e.offsetY || e.layerY;
59 | 	},
60 | 
61 | 	mouseUpEvent : function(e)
62 | 	{
63 | 		this.isMouseDown = false;
64 | 	},
65 | 
66 | 	mouseMoveEvent : function(e)
67 | 	{
68 | 		if(this.isMouseDown)
69 | 		{
70 | 			this.x = e.offsetX || e.layerX;
71 | 			this.y = e.offsetY || e.layerY;
72 | 		}
73 | 	}
74 | });
75 | 
76 | var gui = new myGUI(document.body);
77 | 
78 | //下面两句都是使整个ui大小跟随父元素变化，推荐前者。嫌麻烦或者跟已有代码有冲突（比如body的onresize有别的代码会随时更改）写成后者也没关系。
79 | document.body.setAttribute("onresize", "gui.onresize(event);"); //较好
80 | //gui.forceAutoResize(true); //这一句和上一句功能类似，这种方法可保证正确性
81 | 
82 | gui.start();
83 | </script>
84 | </body>
85 | </html>


--------------------------------------------------------------------------------
/2d/gui_test/gui_test2.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 | <meta charset="utf-8">
  4 | <title>simpleDemo</title>
  5 | <script type="text/javascript" src="../../wgeCore.js"></script>
  6 | <script type="text/javascript" src="../../wgeAlgorithm.js"></script>
  7 | <script type="text/javascript" src="../../wgeGUI.js"></script>
  8 | <script type="text/javascript" src="../wgeSprite.js"></script>
  9 | 
 10 | </head>
 11 | 
 12 | <body>
 13 | 
 14 | <script type="text/javascript">
 15 | "use strict";
 16 | 
 17 | var maxSpriteNum = 2000;
 18 | var runningSpriteNum = 50;
 19 | 
 20 | var MySprite = WGE.Class(WGE.Sprite,
 21 | {
 22 | 	dx : 0,
 23 | 	dy : 0,
 24 | 	drz : 0,
 25 | 
 26 | 	randomize : function()
 27 | 	{
 28 | 		var w = this.img.width, h = this.img.height;
 29 | 
 30 | 		this.pos.data[0] = Math.random() * w;
 31 | 		this.pos.data[1] = Math.random() * h;
 32 | 		this.dx = Math.random() * 0.5 + 0.01;
 33 | 		this.dy = Math.random() * 0.5 + 0.01;
 34 | 		this.drz = Math.random() * 0.005 + 0.001;
 35 | 	},
 36 | 
 37 | 	update : function(dt, boundingX, boundingY)
 38 | 	{
 39 | 		var d = this.pos.data;
 40 | 		d[0] += this.dx * dt;
 41 | 		d[1] += this.dy * dt;
 42 | 		this.rotate(this.drz * dt);
 43 | 
 44 | 		if(d[0] < 0)
 45 | 		{
 46 | 			d[0] = 0;
 47 | 			this.dx = -this.dx;
 48 | 		}
 49 | 		else if(d[0] > boundingX)
 50 | 		{
 51 | 			d[0] = boundingX;
 52 | 			this.dx = -this.dx;
 53 | 		}
 54 | 
 55 | 		if(d[1] < 0)
 56 | 		{
 57 | 			d[1] = 0;
 58 | 			this.dy = -this.dy;
 59 | 		}
 60 | 		else if(d[1] > boundingY)
 61 | 		{
 62 | 			d[1] = boundingY;
 63 | 			this.dy = -this.dy;
 64 | 		}
 65 | 
 66 | 	}
 67 | 
 68 | });
 69 | 
 70 | var MyGUI = WGE.Class(WGE.GUIInterface, 
 71 | {
 72 | 	context : undefined,
 73 | 	isMouseDown : false,
 74 | 	sprites : null,
 75 | 	deltaTime : 10,
 76 | 	x : 0,
 77 | 	y : 0,
 78 | 
 79 | 	bindFather : function(fatherObj)
 80 | 	{
 81 | 		if(WGE.GUIInterface.bindFather.call(this, fatherObj));
 82 | 		{
 83 | 			var context = this.canvas.getContext('2d');
 84 | 			if(!context)
 85 | 			{
 86 | 				alert('你的浏览器不支持html5啊，坟蛋！换一个好吗？');
 87 | 			}
 88 | 			this.context = context;
 89 | 			context.globalCompositeOperation = 'lighter';
 90 | 			return !!this.context;
 91 | 		}
 92 | 		return false;
 93 | 	},
 94 | 
 95 | 	initSprites : function()
 96 | 	{
 97 | 		var sprites = [];
 98 | 		var textures = [];
 99 | 		var context = this.context;
100 | 		this.sprites = sprites;
101 | 		for(var i = 0; i != 14; ++i)
102 | 		{
103 | 			var img = WGE.ID('test' + i);
104 | 			textures.push(img);
105 | 		}
106 | 
107 | 		for(var i = 0; i != maxSpriteNum; ++i)
108 | 		{
109 | 			var sprite = new MySprite(textures[parseInt(Math.random() * textures.length)], -1);
110 | 			sprite.setHotspot2Center();
111 | 			sprite.alpha = 1.0 / maxSpriteNum + Math.random() * 0.2 + 0.1;
112 | 			sprite.randomize();
113 | 			sprites.push(sprite);
114 | 		}
115 | 		sprites[0].alpha = 1.0;
116 | 	},
117 | 
118 | 	spritesAlphaPlus : function(value)
119 | 	{
120 | 		var sprites = this.sprites;
121 | 		for(var i = 0; i < runningSpriteNum; ++i)
122 | 		{
123 | 			sprites[i].alpha = Math.max(Math.min(sprites[i].alpha + value, 1.0), 0.001);
124 | 		}
125 | 	},
126 | 
127 | 	update : function(dt)
128 | 	{
129 | 		this.deltaTime = dt;
130 | 		var w = this.canvas.width, h = this.canvas.height;
131 | 		var sprites = this.sprites;
132 | 		for(var i = 1; i < runningSpriteNum; ++i)
133 | 		{
134 | 			sprites[i].update(dt, w, h);
135 | 		}
136 | 
137 | 		sprites[0].moveTo(this.x, this.y);
138 | 		sprites[0].rotate(sprites[0].drz * dt);
139 | 	},
140 | 
141 | 	render : function()
142 | 	{
143 | 		var sprites = this.sprites;
144 | 		var ctx = this.context;
145 | 		ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
146 | 		for(var i = 1; i < runningSpriteNum; ++i)
147 | 		{
148 | 			sprites[i].render(ctx);
149 | 		}
150 | 		sprites[0].render(this.context);
151 | 	},
152 | 
153 | 	mouseMoveEvent : function(e, x, y)
154 | 	{
155 | 		this.x = x;
156 | 		this.y = y;
157 | 	},
158 | 
159 | 	resizeEvent : function()
160 | 	{
161 | 
162 | 	}
163 | });
164 | 
165 | var div = WGE.CE('div');
166 | document.body.appendChild(div);
167 | div.setAttribute('style', "width: 100%; height:100%;background-color:#000");
168 | var gui = new MyGUI(div);
169 | 
170 | function updateSpritesAndFPS()
171 | {
172 | 	WGE.ID('totalSprites').innerHTML = "Total Sprites: " + runningSpriteNum + "<br>" + "FPS " + (1000/gui.deltaTime).toFixed(1);
173 | }
174 | 
175 | document.body.setAttribute("onresize", "gui.onresize(event);");
176 | document.body.setAttribute("onload", "gui.initSprites();gui.start();setInterval(updateSpritesAndFPS, 1000);");
177 | 
178 | </script>
179 | 
180 | <div style="position:absolute;left:10px;top:10px;width:170px;height:auto;">
181 | <div style="width:100%;height:45px;background-color:#f00" id="totalSprites">
182 |  Initializing...
183 | </div>
184 | <script type="text/javascript">
185 | function setBlend(mode)
186 | {
187 | 	gui.context.globalCompositeOperation = mode;
188 | }
189 | 
190 | </script>
191 | <input type="button" value="Sprite +10" style="width:100px" onclick="runningSpriteNum+=10; if(runningSpriteNum > maxSpriteNum) runningSpriteNum = maxSpriteNum;"><br>
192 | <input type="button" value="Sprite -10" style="width:100px" onclick="runningSpriteNum-=10; if(runningSpriteNum < 1) runningSpriteNum = 1;"><br>
193 | <input type="button" value="Sprite +100" style="width:100px" onclick="runningSpriteNum += 100; if (runningSpriteNum > maxSpriteNum) runningSpriteNum = maxSpriteNum;"><br>
194 | <input type="button" value="Sprite -100" style="width:100px" onclick="runningSpriteNum -= 100; if (runningSpriteNum < 1) runningSpriteNum = 1;"><br>
195 | <input type="button" value="source-over" style="width:100px" onclick="setBlend('source-over');"><br>
196 | <input type="button" value="lighter" style="width:100px" onclick="setBlend('lighter');"><br>
197 | <input type="button" value="copy" style="width:100px" onclick="setBlend('copy');"><br>
198 | <input type="button" value="source-over" style="width:100px" onclick="setBlend('source-over');"><br>
199 | <input type="button" value="source-in" style="width:100px" onclick="setBlend('source-in');"><br>
200 | <input type="button" value="source-atop" style="width:100px" onclick="setBlend('source-atop');"><br>
201 | <input type="button" value="source-out" style="width:100px" onclick="setBlend('source-out');"><br>
202 | <input type="button" value="destination-over" style="width:100px" onclick="setBlend('destination-over');"><br>
203 | <input type="button" value="destination-in" style="width:100px" onclick="setBlend('destination-in');"><br>
204 | <input type="button" value="destination-out" style="width:100px" onclick="setBlend('destination-out');"><br>
205 | <input type="button" value="destination-atop" style="width:100px" onclick="setBlend('destination-atop');"><br><br>
206 | <input type="button" value="sprite alpha+" style="width:100px" onclick="gui.spritesAlphaPlus(0.05);"><br>
207 | <input type="button" value="sprite alpha-" style="width:100px" onclick="gui.spritesAlphaPlus(-0.05);">
208 | 
209 | </div>
210 | 
211 | <div style="display:none">
212 | <img src="../../res/png/0.png" id="test0">
213 | <img src="../../res/png/1.png" id="test1">
214 | <img src="../../res/png/2.png" id="test2">
215 | <img src="../../res/png/3.png" id="test3">
216 | <img src="../../res/png/4.png" id="test4">
217 | <img src="../../res/png/5.png" id="test5">
218 | <img src="../../res/png/6.png" id="test6">
219 | <img src="../../res/png/7.png" id="test7">
220 | <img src="../../res/png/8.png" id="test8">
221 | <img src="../../res/png/9.png" id="test9">
222 | <img src="../../res/png/10.png" id="test10">
223 | <img src="../../res/png/11.png" id="test11">
224 | <img src="../../res/png/12.png" id="test12">
225 | <img src="../../res/png/13.png" id="test13">
226 | </div>
227 | </body>
228 | </html>
229 | 


--------------------------------------------------------------------------------
/2d/gui_test/index.html:
--------------------------------------------------------------------------------
 1 | <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 2 | <head>
 3 | <meta charset="utf-8" />
 4 | <title>WGE - 2d GUI tests</title>
 5 | <script type="text/javascript">
 6 | var gFrameHeight = "100%";
 7 | var demoNames = 
 8 | [
 9 | 'gui_test1', 'gui_test2', 'gui_test3', "gui_test4"
10 | ];
11 | 
12 | function bodyResize()
13 | {
14 |     var frame = document.getElementById("itemView");
15 |     var father = document.getElementById("__father");
16 |     frame.setAttribute("style", "position:absolute;background-color:#d0d0d0;border:groove;top:0px;left:220px;width:" + (father.clientWidth - 230) + "px;height:" + father.clientHeight + "px;");
17 | }
18 | </script>
19 | </head>
20 | <body onload="bodyResize()" onresize="bodyResize()">
21 | <div id="__father" style="width:100%; height:100%; position:relative;">
22 | 
23 | <div style="width:200px;border:groove;" id="demoView">
24 | <h1>WGE GUITest</h1>
25 | <p>(copyright <a href ="http://slideshow.fotor.com/" target="_blank">fotor.com</a>)</p>
26 | <script type="text/javascript">
27 |     var demoView = document.getElementById("demoView");
28 |     for(var i = 0; i < demoNames.length; ++i)
29 |     {
30 |         var item = document.createElement("p");
31 |         var text = "<h2><a href = './" + demoNames[i] + ".html' target='demos'>" + demoNames[i] + "</a></h2>";
32 |         item.setAttribute("style", "margin:10px;text-align:center;background-color: #abcdef; margin 10px;");
33 |         item.innerHTML = text;
34 |         demoView.appendChild(item);
35 |     }
36 | </script>
37 | </div>
38 | <div style="top:0px;left:0px;position:absolute; width:900px;height:95%; border:groove;margin:20px auto auto 300px; background-color:#d0d0d0" id="itemView">
39 | <iframe src="README.html" style="border:none;width:100%;height:100%;" name="demos">
40 | Your browser is too old. Please use another one instead.
41 | </iframe>
42 | </div>
43 | 
44 | </div>
45 | </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/2d/index.html:
--------------------------------------------------------------------------------
1 | <script type="text/javascript">
2 | window.location = "../index.html";
3 | </script>


--------------------------------------------------------------------------------
/2d/slideshows/Burst:
--------------------------------------------------------------------------------
1 | //这里统一时间线，音乐等，继承公共类SlideshowInterface
2 | WGE.Burst(WGE.SlideshowInterface,
3 | {
4 | 	
5 | 
6 | });


--------------------------------------------------------------------------------
/2d/slideshows/Burst.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | <meta charset="utf-8">
 4 | <title>Burst</title>
 5 | <script type="text/javascript" src="../../3rdparty/soundmanager2.js"></script>
 6 | <script type="text/javascript" src="../../wgeCore.js"></script>
 7 | <script type="text/javascript" src="../../wgeAlgorithm.js"></script>
 8 | <script type="text/javascript" src="../../wgeGUI.js"></script>
 9 | <script type="text/javascript" src="../wgeFilters.js"></script>
10 | <script type="text/javascript" src="../wgeSprite.js"></script>
11 | <script type="text/javascript" src="../wgeSlideshow.js"></script>
12 | <script type="text/javascript" src="../../wgeAnimation.js"></script>
13 | <script type="text/javascript" src="../../extends/wgeExtendActions.js"></script>
14 | <script type="text/javascript" src="../../extends/wgeExtendFunctions.js"></script>
15 | <script type="text/javascript" src="Burst.js"></script>
16 | </head>
17 | <body >
18 | <script type="text/javascript">
19 | 
20 | var timeline = new WGE.TimeLine(60000);
21 | var div = WGE.CE("div");
22 | div.setAttribute("style", "width:" + WGE.SlideshowSettings.width + "px;height:" + WGE.SlideshowSettings.height + "px;");
23 | div.id = "demoContent";
24 | document.body.appendChild(div);
25 | 
26 | //加载所需资源图片。
27 | var imageArr = [];
28 | 
29 | for (var i = 0; i != 17; ++i)
30 |     imageArr.push("../../res/comic" + i + ".jpg");
31 | 
32 | var len = imageArr.length;
33 | 
34 | 
35 | var burstSlideShow = new WGE.Burst(
36 | 		div, 
37 | 		imageArr, 
38 | 		//加载完所有图片回调
39 | 		loadAllDown,
40 | 		//加载完一张图片回调
41 | 		function(img, n)
42 | 		{
43 | 			burstSlideShow.context.font = "32px Aria";
44 | 			burstSlideShow.context.clearRect(0, 0, burstSlideShow.canvas.width, burstSlideShow.canvas.height);
45 | 			burstSlideShow.context.fillText("加载图片: 第" + n + "张，共" + len + "张", 10, burstSlideShow.canvas.height / 2);
46 | 		}
47 | 	);
48 | 
49 | 
50 | 
51 | 
52 | function loadAllDown(imgArr)
53 | {
54 | 	//
55 | 	burstSlideShow.context.font = "50px Aria";
56 | 	burstSlideShow.context.fillStyle = "#0f0";
57 | 	burstSlideShow.context.clearRect(0, 0, burstSlideShow.canvas.width, burstSlideShow.canvas.height);
58 | 	burstSlideShow.context.fillText("图片加载完毕，初始场景...", 10, burstSlideShow.canvas.height / 2);
59 | 	burstSlideShow.initTimeline();
60 | 	burstSlideShow.play();
61 | 
62 | }
63 | 
64 | 
65 | 
66 | 
67 | </script>
68 | </body>
69 | </html>


--------------------------------------------------------------------------------
/2d/slideshows/Burst.js:
--------------------------------------------------------------------------------
 1 | //这里统一时间线，音乐等，继承公共类SlideshowInterface
 2 | 
 3 | 
 4 | var mySprite = WGE.Class(WGE.Sprite, WGE.AnimationWithChildrenInterface2d,
 5 | {
 6 | 	initialize : function(startTime, endTime, img, w, h)
 7 | 	{
 8 | 		this.setAttrib(startTime, endTime);
 9 | 		this.timeActions = [];
10 | 		if(img)
11 | 		{
12 | 			WGE.Sprite.initialize.call(this, img, w, h);
13 | 		}
14 | 	}
15 | });
16 | 
17 | 
18 | WGE.Burst = WGE.Class(WGE.SlideshowInterface,
19 | {
20 | 	initTimeline : function(config)
21 | 	{
22 | 		this.timeline = new WGE.TimeLine(50000);
23 | 		var sprite = new mySprite(0, 5000, this.srcImages[0], -1);
24 | 		sprite.moveTo(500, 300);
25 | 		sprite.setHotspotWithRatio(0.5, 0.5);
26 | 
27 | 		var action = new WGE.Actions.UniformScaleAction([0, 5000], [1.8, 1.8], [1.0, 1.0], 1);
28 | 		sprite.push(action);
29 | 
30 | 		this.timeline.push(sprite);
31 | 		this.timeline.start(0);
32 | 	},
33 | 	audioFileName : "Slide_maniac.mp3",
34 | 
35 | });


--------------------------------------------------------------------------------
/2d/slideshows/Classic.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | <meta charset="utf-8">
 4 | <title>Slideshow Classic</title>
 5 | <script type="text/javascript" src="../../3rdparty/soundmanager2-nodebug-jsmin.js"></script>
 6 | <script type="text/javascript" src="../../wgeCore.js"></script>
 7 | <script type="text/javascript" src="../../wgeAlgorithm.js"></script>
 8 | <script type="text/javascript" src="../../wgeGUI.js"></script>
 9 | <script type="text/javascript" src="../../wgeAnimation.js"></script>
10 | <script type="text/javascript" src="../../extends/wgeExtendActions.js"></script>
11 | <script type="text/javascript" src="../../extends/wgeExtendFunctions.js"></script>
12 | <script type="text/javascript" src="../wgeFilters.js"></script>
13 | <script type="text/javascript" src="../wgeSprite.js"></script>
14 | <script type="text/javascript" src="../wgeSlideshow.js"></script>
15 | <script type="text/javascript" src="classic.js"></script>
16 | </head>
17 | <body >
18 | <script type="text/javascript">
19 | "use strict";
20 | var div = WGE.CE("div");
21 | div.setAttribute("style", "width:" + WGE.SlideshowSettings.width + "px;height:" + WGE.SlideshowSettings.height + "px;border:groove;background-color:#000");
22 | div.id = "demoContent";
23 | document.body.appendChild(div);
24 | 
25 | //加载所需资源图片。
26 | var imageArr = [];
27 | 
28 | for(var i = 0; i != 17; ++i)
29 | 	imageArr.push("../../res/comic" + i + ".jpg");
30 | 
31 | var len = imageArr.length;
32 | 
33 | 
34 | var slideshow = new WGE.Classic(div, imageArr, finishLoadAll, finishLoadOne);
35 | 
36 | // 加载完全部
37 | function finishLoadAll(imgArr, slideshowThis)
38 | {
39 | 	slideshowThis.context.clearRect(0, 0, slideshowThis.canvas.width, slideshowThis.canvas.height);
40 | 	slideshowThis.context.fillStyle = "#0f0";
41 | 	slideshowThis.context.fillText("图片加载完毕，初始场景...", 10, slideshowThis.canvas.height / 2);
42 | 	slideshowThis.play();
43 | }
44 | 
45 | //加载完单张
46 | function finishLoadOne(img, n, slideshowThis)
47 | {	
48 | 	slideshowThis.context.clearRect(0, 0, slideshowThis.canvas.width, slideshowThis.canvas.height);
49 | 	slideshowThis.context.fillStyle = "#0f0";
50 | 	slideshowThis.context.fillText("加载图片: 第" + n + "张，共" + len + "张", 10, slideshowThis.canvas.height / 2);
51 | }
52 | 
53 | slideshow.context.font = "32px Aria";
54 | slideshow.context.fillText("初始化中", 10, slideshow.canvas.height / 2);
55 | 
56 | 
57 | </script>
58 | </body>
59 | </html>


--------------------------------------------------------------------------------
/2d/slideshows/Inspiration.OGG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/2d/slideshows/Inspiration.OGG


--------------------------------------------------------------------------------
/2d/slideshows/Inspiration.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/2d/slideshows/Inspiration.mp3


--------------------------------------------------------------------------------
/2d/slideshows/Live My Life.OGG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/2d/slideshows/Live My Life.OGG


--------------------------------------------------------------------------------
/2d/slideshows/Live My Life.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/2d/slideshows/Live My Life.mp3


--------------------------------------------------------------------------------
/2d/slideshows/Memories.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | <meta charset="utf-8">
 4 | <title>Slideshow Memories</title>
 5 | <script type="text/javascript" src="../../3rdparty/soundmanager2-nodebug-jsmin.js"></script>
 6 | <script type="text/javascript" src="../../wgeCore.js"></script>
 7 | <script type="text/javascript" src="../../wgeAlgorithm.js"></script>
 8 | <script type="text/javascript" src="../../wgeGUI.js"></script>
 9 | <script type="text/javascript" src="../../wgeAnimation.js"></script>
10 | <script type="text/javascript" src="../../extends/wgeExtendActions.js"></script>
11 | <script type="text/javascript" src="../../extends/wgeExtendFunctions.js"></script>
12 | <script type="text/javascript" src="../wgeFilters.js"></script>
13 | <script type="text/javascript" src="../wgeSprite.js"></script>
14 | <script type="text/javascript" src="../wgeSlideshow.js"></script>
15 | <script type="text/javascript" src="memories.js"></script>
16 | </head>
17 | <body >
18 | <script type="text/javascript">
19 | "use strict";
20 | var div = WGE.CE("div");
21 | div.setAttribute("style", "width:" + WGE.SlideshowSettings.width + "px;height:" + WGE.SlideshowSettings.height + "px;border:groove;background-color:#000");
22 | div.id = "demoContent";
23 | document.body.appendChild(div);
24 | 
25 | //加载所需资源图片。
26 | var imageArr = [];
27 | 
28 | for (var i = 0; i != 17; ++i)
29 |     imageArr.push("../../res/comic" + i + ".jpg");
30 | 
31 | var len = imageArr.length;
32 | 
33 | 
34 | var slideshow = new WGE.Memories(div, imageArr, finishLoadAll, finishLoadOne);
35 | 
36 | // 加载完全部
37 | function finishLoadAll(imgArr, slideshowThis)
38 | {
39 | 	slideshowThis.context.clearRect(0, 0, slideshowThis.canvas.width, slideshowThis.canvas.height);
40 | 	slideshowThis.context.fillStyle = "#0f0";
41 | 	slideshowThis.context.fillText("图片加载完毕，初始场景...", 10, slideshowThis.canvas.height / 2);
42 | 	slideshowThis.play();
43 | }
44 | 
45 | //加载完单张
46 | function finishLoadOne(img, n, slideshowThis)
47 | {	
48 | 	slideshowThis.context.clearRect(0, 0, slideshowThis.canvas.width, slideshowThis.canvas.height);
49 | 	slideshowThis.context.fillStyle = "#0f0";
50 | 	slideshowThis.context.fillText("加载图片: 第" + n + "张，共" + len + "张", 10, slideshowThis.canvas.height / 2);
51 | }
52 | 
53 | slideshow.context.font = "32px Aria";
54 | slideshow.context.fillText("初始化中", 10, slideshow.canvas.height / 2);
55 | 
56 | 
57 | </script>
58 | </body>
59 | </html>


--------------------------------------------------------------------------------
/2d/slideshows/Party.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <meta charset="utf-8" />
 4 |     <title>WGE-Slideshow Party</title>
 5 | </head>
 6 | <body style="font:bold;font-size:large;">
 7 |     
 8 | 	Party
 9 | 
10 | </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/2d/slideshows/Piano.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | <meta charset="utf-8">
 4 | <title>Slideshow Piano</title>
 5 | <script type="text/javascript" src="../../3rdparty/soundmanager2-nodebug-jsmin.js"></script>
 6 | <script type="text/javascript" src="../../wgeCore.js"></script>
 7 | <script type="text/javascript" src="../../wgeAlgorithm.js"></script>
 8 | <script type="text/javascript" src="../../wgeGUI.js"></script>
 9 | <script type="text/javascript" src="../../wgeAnimation.js"></script>
10 | <script type="text/javascript" src="../../extends/wgeExtendActions.js"></script>
11 | <script type="text/javascript" src="../../extends/wgeExtendFunctions.js"></script>
12 | <script type="text/javascript" src="../wgeFilters.js"></script>
13 | <script type="text/javascript" src="../wgeSprite.js"></script>
14 | <script type="text/javascript" src="../wgeSlideshow.js"></script>
15 | <script type="text/javascript" src="piano.js"></script>
16 | </head>
17 | <body >
18 | <script type="text/javascript">
19 | "use strict";
20 | var div = WGE.CE("div");
21 | div.setAttribute("style", "width:" + WGE.SlideshowSettings.width + "px;height:" + WGE.SlideshowSettings.height + "px;border:groove;background-color:#000");
22 | div.id = "demoContent";
23 | document.body.appendChild(div);
24 | 
25 | //加载所需资源图片。
26 | var imageArr = [];
27 | 
28 | for (var i = 0; i != 17; ++i)
29 |     imageArr.push("../../res/comic" + i + ".jpg");
30 | 
31 | var len = imageArr.length;
32 | 
33 | 
34 | var slideshow = new WGE.Piano(div, imageArr, finishLoadAll, finishLoadOne);
35 | 
36 | // 加载完全部
37 | function finishLoadAll(imgArr, slideshowThis)
38 | {
39 | 	slideshowThis.context.clearRect(0, 0, slideshowThis.canvas.width, slideshowThis.canvas.height);
40 | 	slideshowThis.context.fillStyle = "#0f0";
41 | 	slideshowThis.context.fillText("图片加载完毕，初始场景...", 10, slideshowThis.canvas.height / 2);
42 | 	slideshowThis.play();
43 | }
44 | 
45 | //加载完单张
46 | function finishLoadOne(img, n, slideshowThis)
47 | {	
48 | 	slideshowThis.context.clearRect(0, 0, slideshowThis.canvas.width, slideshowThis.canvas.height);
49 | 	slideshowThis.context.fillStyle = "#0f0";
50 | 	slideshowThis.context.fillText("加载图片: 第" + n + "张，共" + len + "张", 10, slideshowThis.canvas.height / 2);
51 | }
52 | 
53 | slideshow.context.font = "32px Aria";
54 | slideshow.context.fillText("初始化中", 10, slideshow.canvas.height / 2);
55 | 
56 | 
57 | </script>
58 | </body>
59 | </html>


--------------------------------------------------------------------------------
/2d/slideshows/README.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <meta charset="utf-8" />
 4 |     <title>WGE-Slideshow 简介</title>
 5 | </head>
 6 | <body style="font:bold;font-size:large;">
 7 | <h1>WGE-Slideshow 简介</h1>
 8 | <p>使用HTML5实现的平面图片展示效果。官方网址：slideshow.fotor.com</p>
 9 | 
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/2d/slideshows/Shades.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <meta charset="utf-8" />
 4 |     <title>WGE-Slideshow Shades</title>
 5 | </head>
 6 | <body style="font:bold;font-size:large;">
 7 |     
 8 |     Shades
 9 | 
10 | </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/2d/slideshows/Slide_maniac.OGG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/2d/slideshows/Slide_maniac.OGG


--------------------------------------------------------------------------------
/2d/slideshows/Slide_maniac.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/2d/slideshows/Slide_maniac.mp3


--------------------------------------------------------------------------------
/2d/slideshows/Sliders.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <meta charset="utf-8" />
 4 |     <title>WGE-Slideshow Sliders</title>
 5 | </head>
 6 | <body style="font:bold;font-size:large;">
 7 |     
 8 |     Sliders
 9 | 
10 | </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/2d/slideshows/Snapshots.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | <meta charset="utf-8">
 4 | <title>Slideshow Snapshots</title>
 5 | <script type="text/javascript" src="../../3rdparty/soundmanager2-nodebug-jsmin.js"></script>
 6 | <script type="text/javascript" src="../../wgeCore.js"></script>
 7 | <script type="text/javascript" src="../../wgeAlgorithm.js"></script>
 8 | <script type="text/javascript" src="../../wgeGUI.js"></script>
 9 | <script type="text/javascript" src="../../wgeAnimation.js"></script>
10 | <script type="text/javascript" src="../../extends/wgeExtendActions.js"></script>
11 | <script type="text/javascript" src="../../extends/wgeExtendFunctions.js"></script>
12 | <script type="text/javascript" src="../wgeFilters.js"></script>
13 | <script type="text/javascript" src="../wgeSprite.js"></script>
14 | <script type="text/javascript" src="../wgeSlideshow.js"></script>
15 | <script type="text/javascript" src="snapshots.js"></script>
16 | </head>
17 | <body >
18 | <script type="text/javascript">
19 | 
20 | var div = WGE.CE("div");
21 | div.setAttribute("style", "width:" + WGE.SlideshowSettings.width + "px;height:" + WGE.SlideshowSettings.height + "px;border:groove;background-color:#000");
22 | div.id = "demoContent";
23 | document.body.appendChild(div);
24 | 
25 | //加载所需资源图片。
26 | var imageArr = [];
27 | 
28 | for (var i = 0; i != 17; ++i)
29 |     imageArr.push("../../res/comic" + i + ".jpg");
30 | 
31 | var len = imageArr.length;
32 | 
33 | 
34 | var slideshow = new WGE.Snapshots(div, imageArr, finishLoadAll, finishLoadOne);
35 | 
36 | // 加载完全部
37 | function finishLoadAll(imgArr, slideshowThis)
38 | {
39 | 	slideshowThis.context.clearRect(0, 0, slideshowThis.canvas.width, slideshowThis.canvas.height);
40 | 	slideshowThis.context.fillStyle = "#0f0";
41 | 	slideshowThis.context.fillText("图片加载完毕，初始场景...", 10, slideshowThis.canvas.height / 2);
42 | 	slideshowThis.play();
43 | }
44 | 
45 | //加载完单张
46 | function finishLoadOne(img, n, slideshowThis)
47 | {
48 | 	slideshow.context.clearRect(0, 0, slideshow.canvas.width, slideshow.canvas.height);
49 | 	slideshowThis.context.fillStyle = "#0f0";
50 | 	slideshow.context.fillText("加载图片: 第" + n + "张，共" + len + "张", 10, slideshow.canvas.height / 2);
51 | }
52 | 
53 | slideshow.context.font = "32px Aria";
54 | slideshow.context.fillText("初始化中", 10, slideshow.canvas.height / 2);
55 | 
56 | 
57 | </script>
58 | </body>
59 | </html>


--------------------------------------------------------------------------------
/2d/slideshows/Vignette.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | <meta charset="utf-8">
 4 | <title>Vignette SlideShow</title>
 5 | <script type="text/javascript" src="../../3rdparty/soundmanager2-nodebug-jsmin.js"></script>
 6 | <script type="text/javascript" src="../../wgeCore.js"></script>
 7 | <script type="text/javascript" src="../../wgeAlgorithm.js"></script>
 8 | <script type="text/javascript" src="../../wgeGUI.js"></script>
 9 | <script type="text/javascript" src="../wgeFilters.js"></script>
10 | <script type="text/javascript" src="../wgeSprite.js"></script>
11 | <script type="text/javascript" src="../wgeSlideshow.js"></script>
12 | <script type="text/javascript" src="../../wgeAnimation.js"></script>
13 | <script type="text/javascript" src="../../extends/wgeExtendActions.js"></script>
14 | <script type="text/javascript" src="../../extends/wgeExtendFunctions.js"></script>
15 | <script type="text/javascript" src="Vignette.js"></script>
16 | </head>
17 | <body >
18 | <script type="text/javascript">
19 | 
20 | 
21 | var div = WGE.CE("div");
22 | div.setAttribute("style", "width:" + WGE.SlideshowSettings.width + "px;height:" + WGE.SlideshowSettings.height + "px; border: solid");
23 | div.id = "demoContent";
24 | document.body.appendChild(div);
25 | 
26 | //加载所需资源图片。
27 | var imageArr = [];
28 | 
29 | for (var i = 0; i != 17; ++i)
30 |     imageArr.push("../../res/comic" + i + ".jpg");
31 | 
32 | var len = imageArr.length;
33 | 
34 | 
35 | var vignetteSlideShow = new WGE.Vignette(
36 | 		div, 
37 | 		imageArr, 
38 | 		//加载完所有图片回调
39 | 		loadAllDown,
40 | 		//加载完一张图片回调
41 | 		function(img, n)
42 | 		{
43 | 			vignetteSlideShow.context.font = "32px Aria";
44 | 			vignetteSlideShow.context.clearRect(0, 0, vignetteSlideShow.canvas.width, vignetteSlideShow.canvas.height);
45 | 			vignetteSlideShow.context.fillText("加载图片: 第" + n + "张，共" + len + "张", 10, vignetteSlideShow.canvas.height / 2);
46 | 		},
47 | 		1,
48 | 		1+WGE.bounceRange.range*2/WGE.SlideshowSettings.height
49 | 	);
50 | 
51 | 
52 | 
53 | 
54 | function loadAllDown(imgArr)
55 | {
56 | 	//
57 | 	vignetteSlideShow.context.font = "50px Aria";
58 | 	vignetteSlideShow.context.fillStyle = "#0f0";
59 | 	vignetteSlideShow.context.clearRect(0, 0, vignetteSlideShow.canvas.width, vignetteSlideShow.canvas.height);
60 | 	vignetteSlideShow.context.fillText("图片加载完毕，初始场景...", 10, vignetteSlideShow.canvas.height / 2);
61 | 	vignetteSlideShow.play();
62 | 
63 | }
64 | 
65 | 
66 | 
67 | 
68 | </script>
69 | </body>
70 | </html>


--------------------------------------------------------------------------------
/2d/slideshows/classic.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | /*
  3 | * snapshots.js
  4 | *
  5 | *  Created on: 2014-8-29
  6 | *      Author: Wang Yang
  7 | *        Blog: http://blog.wysaid.org
  8 | */
  9 | 
 10 | var snapshotsConfig = 
 11 | {
 12 | 	"parserName" : "defaultParser", //设置解析器，默认defaultParser可不填写
 13 | 	"loopTime" : 15000, // 完成单次循环所需总时间
 14 | 	"loopImageNum" : 15,    // 一次循环所需图片数
 15 | 	"audioFileName" : ["happy.mp3", "happy.ogg"],  // 音乐文件名
 16 | 	"musicDuration" : 60000, //音乐文件总时长
 17 | 
 18 | 	//场景, 由 AnimationSprite构成
 19 | 	"sceneArr" : 
 20 | 	[
 21 | 		//第一个
 22 | 		{
 23 | 			//类名
 24 | 			"imageindex" : 0, //当前sprite绑定的图片
 25 | 			//初始化参数，参数为数组，一般是两个数
 26 | 			"initArgs" : 
 27 | 			[
 28 | 				0, 6800
 29 | 			],
 30 | 
 31 | 			"spriteConfig" :
 32 | 			{
 33 | 				//"name" : "initSprite", //默认为"initSprite"
 34 | 				"filter" : null,
 35 | 				"filterArgs" : [],
 36 | 				//宽高不填写则按默认配置缩放。
 37 | 				"width" : null,
 38 | 				"height" : null,
 39 | 			},
 40 | 
 41 | 			//接下来要执行的操作
 42 | 			"execFunc" :
 43 | 			[
 44 | 				{
 45 | 					"name" : "setHotspotWithRatio",
 46 | 					"arg" : [0.5, 0.1],
 47 | 				},
 48 | 				{
 49 | 					"name" : "moveTo",
 50 | 					"arg" : [0.5, 0.1],
 51 | 					"relativeResolution" : true,
 52 | 					"relativeWidth" : 0,
 53 | 					"relativeHeight" : 1
 54 | 				}
 55 | 			],
 56 | 
 57 | 			"actions" :
 58 | 			[
 59 | 				{
 60 | 					"name" : "UniformScaleAction",
 61 | 					"arg" : [[0, 6000], [1.3, 1.3], [1, 1]],
 62 | 				}
 63 | 			],
 64 | 
 65 | 			"childNodes" : 
 66 | 			[
 67 | 				
 68 | 			]
 69 | 		}
 70 | 	],
 71 | };
 72 | 
 73 | WGE.Classic = WGE.Class(WGE.SlideshowInterface,
 74 | {
 75 | 	config : 1,
 76 | 	audioFileName : ["Inspiration.mp3", "Inspiration.ogg"],  // 音乐文件名
 77 | 
 78 | 	loopTime : 5000,
 79 | 	loopImageNum : 1,
 80 | 	_syncTime : undefined,
 81 | 	// _imageRatioX : 1.2,
 82 | 	// _imageRatioY : 1.2,
 83 | 
 84 | 	initialize : function()
 85 | 	{
 86 | 		WGE.SlideshowInterface.initialize.apply(this, arguments);
 87 | 	},
 88 | 
 89 | 	initTimeline : function(config)
 90 | 	{
 91 | 		var totalTime = Math.ceil(this.srcImages.length / this.loopImageNum) * this.loopTime;
 92 | 		this.timeline = new WGE.TimeLine(totalTime);
 93 | 
 94 | 		var t = 0;
 95 | 		var zIndex = 0;
 96 | 
 97 | 		for(var i in this.srcImages)
 98 | 		{
 99 | 			var img = this.srcImages[i];
100 | 
101 | 			var sprite = new WGE.SlideshowAnimationSprite(t, t + 6000, img, -1);
102 | 			var hotX = Math.random(), hotY = Math.random() * 0.5;
103 | 
104 | 			sprite.moveTo(WGE.SlideshowSettings.width * hotX, WGE.SlideshowSettings.height * hotY);
105 | 			sprite.setHotspotWithRatio(hotX, hotY);
106 | 			sprite.zIndex = zIndex;
107 | 			var scaling = Math.random() * 0.5 + 1.2;
108 | 			var scaleAction;
109 | 			if(Math.random() < 0.5)
110 | 				scaleAction = new WGE.Actions.UniformScaleAction([0, 5500], [scaling, scaling], [1, 1])
111 | 			else
112 | 				scaleAction = new WGE.Actions.UniformScaleAction([0, 5500], [1, 1], [scaling, scaling]);
113 | 			var alphaAction = new WGE.Actions.UniformAlphaAction([0, 1000], 0, 1);
114 | 			sprite.pushArr([scaleAction, alphaAction]);
115 | 			this.timeline.push(sprite);
116 | 			zIndex += 100;
117 | 			t += 5000;
118 | 		}
119 | 
120 | 		if(this.audio)
121 | 		{
122 | 			return ;
123 | 		}
124 | 		var audioFileNames;
125 | 		if(this.audioFileName instanceof Array)
126 | 		{
127 | 			audioFileNames = [];
128 | 			for(var i in this.audioFileName)
129 | 				audioFileNames.push(WGE.SlideshowSettings.assetsDir + this.audioFileName[i]);
130 | 		}
131 | 		else audioFileNames = WGE.SlideshowSettings.assetsDir + this.audioFileName;
132 | 		this._initAudio(audioFileNames);
133 | 	}
134 | });
135 | 
136 | 


--------------------------------------------------------------------------------
/2d/slideshows/happy.OGG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/2d/slideshows/happy.OGG


--------------------------------------------------------------------------------
/2d/slideshows/happy.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/2d/slideshows/happy.mp3


--------------------------------------------------------------------------------
/2d/slideshows/index.html:
--------------------------------------------------------------------------------
 1 | <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 2 | <head>
 3 | <meta charset="utf-8" />
 4 | <title>WGE - Slideshow demos</title>
 5 | <script type="text/javascript">
 6 | var gFrameHeight = "100%";
 7 | var demoNames = 
 8 | [
 9 | 'Party', 'Shades', 'Classic',
10 | 'Burst', 'Piano', 'photoFrames', 'Vignette',
11 | 'Sliders', 'Snapshots', 'Memories'
12 | ];
13 | 
14 | function bodyResize()
15 | {
16 |     var frame = document.getElementById("itemView");
17 |     var father = document.getElementById("__father");
18 |     frame.setAttribute("style", "position:absolute;background-color:#d0d0d0;border:groove;top:0px;left:220px;width:" + (father.clientWidth - 230) + "px;height:" + father.clientHeight + "px;");
19 | }
20 | </script>
21 | </head>
22 | <body onload="bodyResize()" onresize="bodyResize()">
23 | <div id="__father" style="width:100%; height:100%; position:relative;">
24 | 
25 | <div style="width:200px;border:groove;" id="demoView">
26 | <h1>WGE Slideshows</h1>
27 | <p>(copyright <a href ="http://slideshow.fotor.com/" target="_blank">fotor.com</a>)</p>
28 | <script type="text/javascript">
29 |     var demoView = document.getElementById("demoView");
30 |     for(var i = 0; i < demoNames.length; ++i)
31 |     {
32 |         var item = document.createElement("p");
33 |         var text = "<h2><a href = './" + demoNames[i] + ".html' target='demos'>" + demoNames[i] + "</a></h2>";
34 |         item.setAttribute("style", "margin:10px;text-align:center;background-color: #abcdef; margin 10px;");
35 |         item.innerHTML = text;
36 |         demoView.appendChild(item);
37 |     }
38 | </script>
39 | </div>
40 | <div style="top:0px;left:0px;position:absolute; width:900px;height:95%; border:groove;margin:20px auto auto 300px; background-color:#d0d0d0" id="itemView">
41 | <iframe src="README.html" style="border:none;width:100%;height:100%;" name="demos">
42 | Your browser is too old. Please use another one instead.
43 | </iframe>
44 | </div>
45 | 
46 | </div>
47 | </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/2d/slideshows/memories.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/2d/slideshows/memories.jpg


--------------------------------------------------------------------------------
/2d/slideshows/photoFrames.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 | <meta charset="utf-8">
  4 | </head>
  5 | 
  6 | <body >
  7 | <script type="text/javascript" src="../../wgeCore.js"></script>
  8 | <script type="text/javascript" src="../../wgeAlgorithm.js"></script>
  9 | <script type="text/javascript" src="../wgeSprite.js"></script>
 10 | <script type="text/javascript" src="../../wgeAnimation.js"></script>
 11 | <script type="text/javascript" src="../wgeFilters.js"></script>
 12 | <script type="text/javascript" src="../../extends/wgeExtendActions.js"></script>
 13 | <script type="text/javascript" src="../../extends/wgeExtendFunctions.js"></script>
 14 | <script type="text/javascript" src="photoFrames.js"></script>
 15 | 
 16 | <canvas id="photoFrames" width='800' height='600' style="border:groove;background-color:#000">你的浏览器不支持html5，换一个再来！(推荐：Chrome, Firefox, Safari)</canvas><br>
 17 | <input type="button" value="MUTE or not" onclick="var snd = WGE.ID('bgSound'); snd.muted=!snd.muted">
 18 | <input type="button" value="点击查看另一个版本" onclick="window.location='demo2.html'">
 19 | <br>
 20 | <p>本页面使用html5编写，如果您使用的是IE，请保证IE版本>=9。如果图片过多导致加载失败，请刷新界面</p>
 21 | 
 22 | <script type="text/javascript">
 23 | "use strict";
 24 | var timeline = new WGE.TimeLine(60000);
 25 | var cvs = WGE.ID('photoFrames');
 26 | var ctx = cvs.getContext('2d');
 27 | var totalImages = 17;
 28 | var loadedImages = 0;
 29 | var lastTime = 0;
 30 | 
 31 | ctx.font = "50px Aria";
 32 | 
 33 | ctx.fillStyle = "#0f0";
 34 | 
 35 | if(!window.requestAnimationFrame)
 36 | {
 37 | 	window.requestAnimationFrame = window.mozRequestAnimationFrame ||
 38 | 							window.webkitRequestAnimationFrame ||
 39 | 							window.msRequestAnimationFrame ||
 40 | 							window.oRequestAnimationFrame ||
 41 | 							function(callback) {
 42 | 								setTimeout(callback, 1000 / 60);
 43 | 							};
 44 | }
 45 | 
 46 | function scaleImage(img)
 47 | {
 48 | 	if(!img.width)
 49 | 	{
 50 | 		img.width = 800;
 51 | 		img.height = 600;
 52 | 	}
 53 | 
 54 | 	var c = WGE.CE('canvas');
 55 | 	c.width = img.width * (720.0 / img.height);
 56 | 	c.height = 720;
 57 | 	var t = c.getContext('2d');
 58 | 	t.save();
 59 | 	t.scale(c.width / img.width, c.height / img.height);
 60 | 	t.drawImage(img, 0, 0);
 61 | 	t.restore();
 62 | 	return c;
 63 | }
 64 | 
 65 | function main()
 66 | {
 67 | 	ctx.fillStyle = "#000";
 68 | 	ctx.strokeStyle = "#fff";
 69 | 	ctx.lineWidth = 6;
 70 | 
 71 | 	var imgArray = [];
 72 | 	for(var i = 0; i != totalImages; ++i)
 73 | 	{
 74 | 		var img = scaleImage(WGE.ID("test" + i));
 75 | 		imgArray.push(img);
 76 | 	}
 77 | 
 78 | 	timeline.clear();
 79 | 	var timeStamp = 0, stillTime = 17000, globalZ = 0;
 80 | 	for (var i = 0; i < totalImages; i += 20)
 81 | 	{
 82 | 	    for (var j = 0; j != 4; ++j)
 83 | 	    {
 84 | 	        var scene = FTPhotoFrame.initScene(imgArray, 800, 600, globalZ, timeStamp, stillTime);
 85 | 	        timeline.pushArr(scene);
 86 | 	        globalZ += 10000;
 87 | 	        timeStamp += 15000;
 88 | 	    }
 89 | 	}
 90 | 
 91 | 	timeline.start(0);
 92 | 	lastTime = Date.now();
 93 | 	WGE.ID('bgSound').play();
 94 | 	mainloop();
 95 | }
 96 | 
 97 | function endloop()
 98 | {
 99 | 	ctx.fillRect(0,0, 800, 600);
100 | 	ctx.globalAlpha += 0.01;
101 | 	if(ctx.globalAlpha >= 0.99)
102 | 	{
103 | 		ctx.fillStyle = "#fff";
104 | 		ctx.fillText("The End.", 200, cvs.height / 2);
105 | 		ctx.font = "30px Aria";
106 | 		ctx.fillText("By wysaid", 400, 400);
107 | 		WGE.ID('bgSound').pause();
108 | 		return ;
109 | 	}
110 | 	requestAnimationFrame(endloop);
111 | }
112 | 
113 | function mainloop()
114 | {
115 | 	var timeNow = Date.now();
116 |     
117 | 	if(!timeline.update(timeNow - lastTime))
118 | 	{
119 | 	    console.log('PhotoFrames End');
120 | 	    ctx.globalAlpha = 0.001;
121 | 	    ctx.fillStyle = "#000";
122 | 	    requestAnimationFrame(endloop);
123 | 		return ;
124 | 	}
125 | 	lastTime = timeNow;
126 | 	ctx.clearRect(0,0, 800, 600);
127 | 	timeline.render(ctx);
128 | 	requestAnimationFrame(mainloop);
129 | }
130 | 
131 | function loadingDone()
132 | {
133 | 	++loadedImages;
134 | 	if(loadedImages == totalImages)
135 | 	{
136 | 		ctx.clearRect(0,0, 800, 600);
137 | 		ctx.fillText("初始化场景......", 10, cvs.height / 2);
138 | 		setTimeout("main()", 100);
139 | 		return ;
140 | 	}
141 | 
142 | 	var loadedRate = loadedImages / totalImages * 100;
143 | 
144 | 	ctx.clearRect(0,0, 800, 600);
145 | 	ctx.fillText("LoadingImages: " + loadedRate.toFixed(2) + "%", 10, cvs.height / 2);
146 | }
147 | 
148 | </script>
149 | 
150 | 
151 | <div style="display:none">
152 | <img src="../../res/comic0.jpg" id="test0" onload="loadingDone()">
153 | <img src="../../res/comic1.jpg" id="test1" onload="loadingDone()">
154 | <img src="../../res/comic2.jpg" id="test2" onload="loadingDone()">
155 | <img src="../../res/comic3.jpg" id="test3" onload="loadingDone()">
156 | <img src="../../res/comic4.jpg" id="test4" onload="loadingDone()">
157 | <img src="../../res/comic5.jpg" id="test5" onload="loadingDone()">
158 | <img src="../../res/comic6.jpg" id="test6" onload="loadingDone()">
159 | <img src="../../res/comic7.jpg" id="test7" onload="loadingDone()">
160 | <img src="../../res/comic8.jpg" id="test8" onload="loadingDone()">
161 | <img src="../../res/comic9.jpg" id="test9" onload="loadingDone()">
162 | <img src="../../res/comic10.jpg" id="test10" onload="loadingDone()">
163 | <img src="../../res/comic11.jpg" id="test11" onload="loadingDone()">
164 | <img src="../../res/comic12.jpg" id="test12" onload="loadingDone()">
165 | <img src="../../res/comic13.jpg" id="test13" onload="loadingDone()">
166 | <img src="../../res/comic14.jpg" id="test14" onload="loadingDone()">
167 | <img src="../../res/comic15.jpg" id="test15" onload="loadingDone()">
168 | <img src="../../res/comic16.jpg" id="test16" onload="loadingDone()">
169 | <audio src="../../res/snd1.mp3" id="bgSound"></audio>
170 | </div>
171 | 
172 | <div style="display:none;" id="trackingCodes">
173 | 
174 | <script type="text/javascript">
175 |   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
176 |   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
177 |   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
178 |   })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
179 | 
180 |   ga('create', 'UA-41296769-1', 'wysaid.org');
181 |   ga('send', 'pageview');
182 | </script>
183 | <script type="text/javascript">
184 | var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
185 | document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fb1b964c80dff2a1af1bb8b1ee3e9a7d1' type='text/javascript'%3E%3C/script%3E"));
186 | 
187 | document.write(unescape("%3Cscript src='" + _bdhmProtocol + "tajs.qq.com/stats?sId=23413950' type='text/javascript'%3E%3C/script%3E"));
188 |   (function(){if(console && console.log){  var ____tmp = 
189 | "                       ::\n"+
190 | "                      :;J7, :,                        ::;7:\n"+
191 | "                      ,ivYi, ,                       ;LLLFS:\n"+
192 | "                      :iv7Yi                       :7ri;j5PL\n"+
193 | "                     ,:ivYLvr                    ,ivrrirrY2X,\n"+
194 | "                     :;r#Wwz.7r:                :ivu#kexianli.\n"+
195 | "                    :iL7::,:::iiirii:ii;::::,,irvF7rvvLujL7ur\n"+
196 | "                   ri::,:,::i:iiiiiii:i:irrv177JX7rYXqZEkvv17\n"+
197 | "                ;i:, , ::::iirrririi:i:::iiir2XXvii;L8OGJr71i\n"+
198 | "              :,, ,,:   ,::ir#mingyi.irii:i:::j1jri7ZBOS7ivv,\n"+
199 | "                 ,::,    ::rv77iiiriii:iii:i::,rvLq#huhao.Li\n"+
200 | "             ,,      ,, ,:ir7ir::,:::i;ir:::i:i::rSGGYri712:\n"+
201 | "           :::  ,v7r:: ::rrv77:, ,, ,:i7rrii:::::, ir7ri7Lri\n"+
202 | "          ,     2OBBOi,iiir;r::        ,irriiii::,, ,iv7Luur:\n"+
203 | "        ,,     i78MBBi,:,:::,:,  :7FSL: ,iriii:::i::,,:rLqXv::\n"+
204 | "        :      iuMMP: :,:::,:ii;2GY7OBB0viiii:i:iii:i:::iJqL;::\n"+
205 | "       ,     ::::i   ,,,,, ::LuBBu BBBBBErii:i:i:i:i:i:i:r77ii\n"+
206 | "      ,       :       , ,,:::rruBZ1MBBqi, :,,,:::,::::::iiriri:\n"+
207 | "     ,               ,,,,::::i:  #arqiao.       ,:,, ,:::ii;i7:\n"+
208 | "    :,       rjujLYLi   ,,:::::,:::::::::,,   ,:i,:,,,,,::i:iii\n"+
209 | "    ::      BBBBBBBBB0,    ,,::: , ,:::::: ,      ,,,, ,,:::::::\n"+
210 | "    i,  ,  ,8BMMBBBBBBi     ,,:,,     ,,, , ,   , , , :,::ii::i::\n"+
211 | "    :      iZMOMOMBBM2::::::::::,,,,     ,,,,,,:,,,::::i:irr:i:::,\n"+
212 | "    i   ,,:;u0MBMOG1L:::i::::::  ,,,::,   ,,, ::::::i:i:iirii:i:i:\n"+
213 | "    :    ,iuUuuXUkFu7i:iii:i:::, :,:,: ::::::::i:i:::::iirr7iiri::\n"+
214 | "    :     :rk#Yizero.i:::::, ,:ii:::::::i:::::i::,::::iirrriiiri::,\n"+
215 | "     :      5BMBBBBBBSr:,::rv2kuii:::iii::,:i:,, , ,,:,:i#petermu.,\n"+
216 | "          , :r50EZ8MBBBBGOBBBZP7::::i::,:::::,: :,:,::i;rrririiii::\n"+
217 | "              :jujYY7LS0ujJL7r::,::i::,::::::::::::::iirirrrrrrr:ii:\n"+
218 | "           ,:  :#kevensun.:,:,,,::::i:i:::::,,::::::iir;ii;7v77;ii;i,\n"+
219 | "           ,,,     ,,:,::::::i:iiiii:i::::,, ::::iiiir#xingjief.r;7:i,\n"+
220 | "        , , ,,,:,,::::::::iiiiiiiiii:,:,:::::::::iiir;ri7vL77rrirri::\n"+
221 | "         :,, , ::::::::i:::i:::i:i::,,,,,:,::i:i:::iir;#Secbone.ii:::\n";
222 |   console.log(____tmp);
223 |   console.log("呵呵，你这么屌你爸妈知道吗？");
224 | }})();
225 | </script>
226 | 
227 | </div>
228 | 
229 | </body>
230 | </html>


--------------------------------------------------------------------------------
/2d/slideshows/piano.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/2d/slideshows/piano.mp3


--------------------------------------------------------------------------------
/2d/slideshows/slideshow_filmic.OGG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/2d/slideshows/slideshow_filmic.OGG


--------------------------------------------------------------------------------
/2d/slideshows/slideshow_filmic.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/2d/slideshows/slideshow_filmic.mp3


--------------------------------------------------------------------------------
/2d/slideshows/slideshow_live.OGG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/2d/slideshows/slideshow_live.OGG


--------------------------------------------------------------------------------
/2d/slideshows/slideshow_live.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/2d/slideshows/slideshow_live.mp3


--------------------------------------------------------------------------------
/2d/slideshows/slideshow_love.OGG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/2d/slideshows/slideshow_love.OGG


--------------------------------------------------------------------------------
/2d/slideshows/slideshow_love.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/2d/slideshows/slideshow_love.mp3


--------------------------------------------------------------------------------
/2d/slideshows/slideshow_photoframe.OGG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/2d/slideshows/slideshow_photoframe.OGG


--------------------------------------------------------------------------------
/2d/slideshows/slideshow_photoframe.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/2d/slideshows/slideshow_photoframe.mp3


--------------------------------------------------------------------------------
/2d/slideshows/slideshow_split.OGG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/2d/slideshows/slideshow_split.OGG


--------------------------------------------------------------------------------
/2d/slideshows/slideshow_split.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/2d/slideshows/slideshow_split.mp3


--------------------------------------------------------------------------------
/2d/slideshows/slideshow_wonderful.OGG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/2d/slideshows/slideshow_wonderful.OGG


--------------------------------------------------------------------------------
/2d/slideshows/slideshow_wonderful.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/2d/slideshows/slideshow_wonderful.mp3


--------------------------------------------------------------------------------
/2d/slideshows/snapshots.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | /*
  3 | * snapshots.js
  4 | *
  5 | *  Created on: 2014-7-29
  6 | *      Author: Wang Yang
  7 | *        Blog: http://blog.wysaid.org
  8 | */
  9 | 
 10 | var snapshotsConfig = 
 11 | {
 12 | 	"parserName" : "defaultParser", //设置解析器，默认defaultParser可不填写
 13 | 	"loopTime" : 15000, // 完成单次循环所需总时间
 14 | 	"loopImageNum" : 15,    // 一次循环所需图片数
 15 | 	"audioFileName" : ["happy.mp3", "happy.ogg"],  // 音乐文件名
 16 | 	"musicDuration" : 60000, //音乐文件总时长
 17 | 
 18 | 	//场景, 由 AnimationSprite构成
 19 | 	"sceneArr" : 
 20 | 	[
 21 | 		//第一个
 22 | 		{
 23 | 			//类名
 24 | 			"imageindex" : 0, //当前sprite绑定的图片
 25 | 			//初始化参数，参数为数组，一般是两个数
 26 | 			"initArgs" : 
 27 | 			[
 28 | 				0, 6800
 29 | 			],
 30 | 
 31 | 			"spriteConfig" :
 32 | 			{
 33 | 				//"name" : "initSprite", //默认为"initSprite"
 34 | 				"filter" : null,
 35 | 				"filterArgs" : [],
 36 | 				//宽高不填写则按默认配置缩放。
 37 | 				"width" : null,
 38 | 				"height" : null,
 39 | 			},
 40 | 
 41 | 			//接下来要执行的操作
 42 | 			"execFunc" :
 43 | 			[
 44 | 				{
 45 | 					"name" : "setHotspotWithRatio",
 46 | 					"arg" : [0.5, 0.1],
 47 | 				},
 48 | 				{
 49 | 					"name" : "moveTo",
 50 | 					"arg" : [0.5, 0.1],
 51 | 					"relativeResolution" : true,
 52 | 					"relativeWidth" : 0,
 53 | 					"relativeHeight" : 1
 54 | 				}
 55 | 			],
 56 | 
 57 | 			"actions" :
 58 | 			[
 59 | 				{
 60 | 					"name" : "UniformScaleAction",
 61 | 					"arg" : [[0, 6000], [1.3, 1.3], [1, 1]],
 62 | 				}
 63 | 			],
 64 | 
 65 | 			"childNodes" : 
 66 | 			[
 67 | 				
 68 | 			]
 69 | 		}
 70 | 	],
 71 | };
 72 | 
 73 | WGE.Snapshots = WGE.Class(WGE.SlideshowInterface,
 74 | {
 75 | 	config : 1,
 76 | 	audioFileName : ["happy.mp3", "happy.ogg"],  // 音乐文件名
 77 | 
 78 | 	loopTime : 5000,
 79 | 	loopImageNum : 1,
 80 | 	blurredImgs : null,
 81 | 	boundingBoxes : null,
 82 | 
 83 | 	_filter : null,
 84 | 	_syncTime : 2000,
 85 | 
 86 | 	_queue : null,
 87 | 
 88 | 	_timerID : null,
 89 | 	_finishCallback : null,
 90 | 	_eachCallback : null,
 91 | 	_loadingFinish : false,
 92 | 
 93 | 	initialize : function()
 94 | 	{
 95 | 		this.blurredImgs = [];
 96 | 		this.boundingBoxes = [];
 97 | 		this._filter = new WGE.Filter.Monochrome();
 98 | 		WGE.SlideshowInterface.initialize.apply(this, arguments);
 99 | 	},
100 | 
101 | 	_genBlurredImages : function(imgArr)
102 | 	{
103 | 		var blurredImgs = [];
104 | 
105 | 		for(var i in imgArr)
106 | 		{
107 | 			blurredImgs.push(this._genBlurredImage(imgArr[i]));
108 | 		}
109 | 		return blurredImgs;
110 | 	},
111 | 
112 | 	_genBlurredImage : function(img)
113 | 	{
114 | 		var cvs;		
115 | 		var dw = 1024 / 8, dh = 768 / 8;
116 | 		var dstData;
117 | 		cvs = WGE.CE('canvas');
118 | 		cvs.width = dw * 2 + 20;
119 | 		cvs.height = dh * 2 + 20;
120 | 
121 | 		var ctx = cvs.getContext('2d');
122 | 
123 | 		if(img.getContext)
124 | 		{
125 | 			dstData = WGE.Filter.StackBlur.stackBlurCanvasRGB(img, img.width / 2 - dw - 20, img.height / 2 - dh - 20, cvs.width, cvs.height, 10);
126 | 		}
127 | 		else
128 | 		{
129 | 			ctx.drawImage(img, img.width / 2 - dw - 20, img.height / 2 - dh - 20, cvs.width, cvs.height, 0, 0, cvs.width, cvs.height);
130 | 			dstData = WGE.Filter.StackBlur.stackBlurCanvasRGB(cvs, img.width / 2 - dw - 20, img.height / 2 - dh - 20, cvs.width, cvs.height, 10);
131 | 		}
132 | 		
133 | 		ctx.putImageData(dstData, 0, 0);		
134 | 		return cvs;
135 | 	},
136 | 
137 | 	_genBoundingBoxes : function(imgArr)
138 | 	{
139 | 		var boundingBoxArr = [];
140 | 
141 | 		for(var i in imgArr)
142 | 		{
143 | 			boundingBoxArr.push(this._genBoundingBox(imgArr[i]));
144 | 		}
145 | 		return boundingBoxArr;
146 | 	},
147 | 
148 | 	_genBoundingBox : function(img)
149 | 	{
150 | 		var cvs = WGE.CE('canvas');
151 | 		cvs.width = img.width + 40;
152 | 		cvs.height = img.height + 40;
153 | 		var ctx = cvs.getContext('2d');
154 | 		ctx.save();
155 | 		ctx.fillStyle = "#fff";
156 | 		ctx.shadowColor = "rgba(0, 0, 0, 0.8)";
157 | 		ctx.shadowBlur = 10;
158 | 		ctx.fillRect(10, 10, cvs.width - 20, cvs.height - 20);
159 | 		ctx.restore();
160 | 		ctx.drawImage(img, 20, 20);
161 | 		return cvs;
162 | 	},
163 | 
164 | 	initTimeline : function(config)
165 | 	{
166 | 		var totalTime = Math.ceil(this.boundingBoxes.length / this.loopImageNum) * this.loopTime;
167 | 		this.timeline = new WGE.TimeLine(totalTime);
168 | 
169 | 		var t = 0;
170 | 		var zIndex = 0;
171 | 
172 | 		for(var i in this.boundingBoxes)
173 | 		{
174 | 			var rand = Math.random();
175 | 			var img = this.boundingBoxes[i];
176 | 
177 | 			var sprite = new WGE.SlideshowAnimationSprite(t, t + 6000, img, -1);
178 | 			sprite.setHotspot2Center();
179 | 			sprite.moveTo(WGE.SlideshowSettings.width / 2, WGE.SlideshowSettings.height / 2);
180 | 			sprite.zIndex = zIndex;
181 | 			var scaleAction = new WGE.Actions.UniformScaleAction([0, 6000], [0.95, 0.95], [0.7, 0.7])
182 | 			var alphaAction = new WGE.Actions.UniformAlphaAction([0, 1000], 0, 1);
183 | 			var rot1 = (Math.random() / 10 + 0.02) * (Math.random() > 0.5 ? 1 : -1);
184 | 			var rotateAction = new WGE.Actions.UniformRotateAction([0, 3000], 0, rot1);
185 | 			sprite.pushArr([scaleAction, alphaAction, rotateAction]);
186 | 
187 | 			var img2 = this.blurredImgs[i];
188 | 
189 | 			var sprite2 = new WGE.SlideshowAnimationSprite(t, t + 6000, img2, -1);
190 | 			sprite2.setHotspot2Center();
191 | 			sprite2.moveTo(WGE.SlideshowSettings.width / 2, WGE.SlideshowSettings.height / 2);
192 | 			var alphaAction2 = new WGE.Actions.UniformAlphaAction([0, 1000], 0, 1);
193 | 			sprite2.push(alphaAction2);
194 | 			sprite2.scaleTo(WGE.SlideshowSettings.width / (img2.width - 40), WGE.SlideshowSettings.height / (img2.height - 40));
195 | 			sprite2.zIndex = zIndex - 1;
196 | 			this.timeline.pushArr([sprite, sprite2]);
197 | 			zIndex += 100;
198 | 			t += 5000;
199 | 		}
200 | 
201 | 		if(this.audio)
202 | 		{
203 | 			return ;
204 | 		}
205 | 		var audioFileNames;
206 | 		if(this.audioFileName instanceof Array)
207 | 		{
208 | 			audioFileNames = [];
209 | 			for(var i in this.audioFileName)
210 | 				audioFileNames.push(WGE.SlideshowSettings.assetsDir + this.audioFileName[i]);
211 | 		}
212 | 		else audioFileNames = WGE.SlideshowSettings.assetsDir + this.audioFileName;
213 | 		this._initAudio(audioFileNames);
214 | 	},
215 | 
216 | 	_dealLoadingImage : function(img, index, n)
217 | 	{
218 | 		if(!this._queue)
219 | 			this._queue = [];
220 | 		this._queue.push({IMAGE : img, INDEX : index, TOTAL : n});
221 | 
222 | 		if(!this._timerID)
223 | 			this._timerID = setTimeout(this._processingQueue.bind(this), 20);		
224 | 	},
225 | 
226 | 	_loadImages : function(imgURLs, finishCallback, eachCallback)
227 | 	{
228 | 		var self = this;
229 | 		this._finishCallback = finishCallback;
230 | 		this._eachCallback = eachCallback;
231 | 		WGE.loadImages(imgURLs, function(imgArr) {
232 | 			if(typeof self._dealFinishLoadingImage == 'function')
233 | 				self._dealFinishLoadingImage(imgArr);
234 | 			else
235 | 				self.srcImages = WGE.slideshowFitImages(imgArr, self._imageRatioX, self._imageRatioY);
236 | 
237 | 		}, function(img, n, imageIndex) {
238 | 			if(typeof self._dealLoadingImage == 'function')
239 | 				self._dealLoadingImage(img, imageIndex, n);
240 | 		});
241 | 	},
242 | 
243 | 	_processingQueue : function()
244 | 	{
245 | 		if(!(this._queue instanceof Array && this._queue.length > 0))
246 | 		{
247 | 			this._queue = null;
248 | 			this._timerID = null;
249 | 			if(this._loadingFinish)
250 | 			{
251 | 				if(this.config)
252 | 					this.initTimeline(this.config);
253 | 				if(this._finishCallback)
254 | 					this._finishCallback(this.srcImages, this);
255 | 				this.config = null;
256 | 			}
257 | 			return ;
258 | 		}
259 | 		var obj = this._queue.shift();
260 | 		this._processingImage(obj);
261 | 		this._timerID = setTimeout(this._processingQueue.bind(this), 20);
262 | 	},
263 | 
264 | 	_dealFinishLoadingImage : function(imgArr)
265 | 	{
266 | 		this._loadingFinish = true;
267 | 		if(!this._timerID)
268 | 		{
269 | 			if(this.config)
270 | 				this.initTimeline(this.config);
271 | 			if(this.finishCallback)
272 | 				this.finishCallback(this.srcImages || imgArr, this);
273 | 			this.config = null;
274 | 		}
275 | 	},
276 | 
277 | 	_processingImage : function(obj)
278 | 	{
279 | 		var index = obj.INDEX;
280 | 		var img = obj.IMAGE;
281 | 		var fitImg = WGE.slideshowFitImage(img);
282 | 		this.blurredImgs[index] = this._genBlurredImage(fitImg);
283 | 		this.boundingBoxes[index] = this._genBoundingBox(fitImg);
284 | 		this._eachCallback(img, obj.TOTAL, this);
285 | 	}
286 | });
287 | 
288 | 


--------------------------------------------------------------------------------
/404.html:
--------------------------------------------------------------------------------
1 | <script>
2 | function reLocation()
3 | {
4 | 	window.location = "index.html"
5 | }
6 | setTimeout("reLocation()", 3000);
7 | document.write("404 page not found. 3秒后自动寻找该目录下的首页. <br><a href='http://wge.wysaid.org/'>Click here to go to点击此处回到项目主页</a>");
8 | </script>


--------------------------------------------------------------------------------
/404.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/404.png


--------------------------------------------------------------------------------
/CNAME:
--------------------------------------------------------------------------------
1 | wge.wysaid.org
2 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
1 | Copyright (c) 2014 fotor.com


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # **Web Graphics Engine 正在编写中** #
 2 | 
 3 | 在线查看： <a href="http://wge.wysaid.org/" target="_blank">wge.wysaid.org</a>
 4 | 
 5 | ## 2d Version ##
 6 | 
 7 | <img src= "https://raw.githubusercontent.com/wysaid/wge/gh-pages/screenshots/2d_gui_test2.jpg">
 8 | 
 9 | ## WebGL Version ##
10 | ### [WebGL Sprite Test 1](http://wge.wysaid.org/webgl/simple_demos/sprite2dtest1.html) ###
11 | <img src= "https://raw.githubusercontent.com/wysaid/wge/gh-pages/screenshots/webgl_gui_test1.jpg">
12 | 
13 | ### [WebGL Sprite Test 2](http://wge.wysaid.org/webgl/simple_demos/sprite2dtest2.html) ###
14 | <img src= "https://raw.githubusercontent.com/wysaid/wge/gh-pages/screenshots/webgl_gui_test2.jpg">
15 | 
16 | ### [WebGL Scene Roaming Test](http://wge.wysaid.org/webgl/simple_demos/sceneRoamingTest2.html) ###
17 | <img src= "https://raw.githubusercontent.com/wysaid/wge/gh-pages/screenshots/webgl_gui_test4.jpg">
18 | 
19 | ### [WebGL Cube Map Test 1](http://wge.wysaid.org/webgl/simple_demos/skyBox2.html) ###
20 | <img src= "https://raw.githubusercontent.com/wysaid/wge/gh-pages/screenshots/cube_map_reflect.jpg">
21 | 
22 | ### [WebGL Cube Map Test 2](http://wge.wysaid.org/webgl/simple_demos/skyBox5.html) ###
23 | <img src= "https://raw.githubusercontent.com/wysaid/wge/gh-pages/screenshots/cube_map_refract.jpg">


--------------------------------------------------------------------------------
/WGE 简介.pptx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/WGE 简介.pptx


--------------------------------------------------------------------------------
/about.html:
--------------------------------------------------------------------------------
 1 | <meta charset="utf-8">
 2 | <style type="text/css">
 3 | #wge_about {
 4 | 	border: none;
 5 | }
 6 | 
 7 | #wge_about div {
 8 | 	border: none;
 9 | }
10 | 
11 | #wge_about b {
12 | 	color: #00f;
13 | 	font: 20px arial, 宋体;
14 | 	margin: 5px;
15 | }
16 | 
17 | </style>
18 | 
19 | <center><h1>WGE 简介</h1></center><hr>
20 | <div id="wge_about">
21 | 
22 | <h2>WGE 主要目录结构及其文件简介:</h2>
23 | <div style="margin:10px 15px">
24 | <p><h3>公共文件:</h3>
25 | <b>wgeCore.js</b> WGE核心组件，提供了一些公用功能，必须引用，若要分开引用，则需要把它放在第一位。<br>
26 | <b>wgeAlgorithm.js</b>
27 | WGE核心组件， 提供了所有矩阵向量运算。必须引用。<br>
28 | <b>wgeAnimation.js</b>
29 | WGE扩展组件，提供了动画，时间轴，动作等功能的接口。如果未使用，则不需要引用。(<b>例:<a href="./2d/demo_photoFrames/index.html" target="_blank">photoframe</a></b>)<br>
30 | <b>wgeGUI.js</b>
31 | WGE扩展组件(不是必须)，提供了独立的UI控制，封装了一些界面操作，比如鼠标、键盘事件等，同时对窗口事件如全局resize事件进行了处理，使得canvas能够适应分辨率。 WGE的所有demo均使用此组件完成操作。所以就算你不使用，也请稍微了解一下其运行过程<br>
32 | <b>wgeParticleSystem.js</b>
33 | WGE扩展组件，提供了粒子系统接口（暂未实现），如未使用，则不需要引用。<br>
34 | <b>wgeFont.js</b>
35 | WGE扩展组件，主要提供webgl版的字体渲染接口（暂未实现）。
36 | </p>
37 | <p><h3>canvas-2d版:</h3>
38 | <b>wgeSprite.js</b>
39 | 提供sprite渲染，支持基于自定义重心点的旋转、缩放、平移等，支持伪3d旋转。<br>
40 | <b>wgeFilters.js</b>
41 | 提供2d版的滤镜操作，CPU滤镜性能较低，不建议大量、频繁地使用。<br>
42 | <b>wgeSlideshow.js</b>
43 | 提供slideshow的功能接口，为所有的slideshow提供统一的对外接口。
44 | </p>
45 | <p><h3>canvas-webgl版:</h3>
46 | <b>wgeWebGL.js</b>
47 | webgl版的核心组件，对WebGL的功能进行了轻量的封装以减少代码量，webgl版必须引用。<br>
48 | <b>wgeSprite2d.js</b>
49 | webgl版的平面sprite，兼容2d版的sprite所有操作（同时兼容2d版的坐标系，默认使用屏幕坐标系），并支持更多的功能，如绕任意点，任意轴旋转。shader代码可自行定制，如加入光照，混合等。<br>
50 | <b>wgeSprite3d.js</b>
51 | webgl版的3d sprite，默认支持直接导入模型的position，面索引以及纹理坐标等，直接简单绘制模型。提供绕重心点的旋转缩放平移，同时支持绕任意点，任意轴旋转等。shader代码可自行定制，如加入光照、环境贴图顶。<br>
52 | <b>wgeScene.js</b>
53 | 为webgl版提供了较全面的场景漫游，支持类似于网游的场景漫游操作，可于wgeGUI一起使用，提供方便操作的场景漫游。详情请查看webgl版的 <a target="_blank" href="./webgl/simple_demos/gui_test5.html">gui_test5</a><br>
54 | <b>wgeFilter.js</b>
55 | 与2d版功能、名字相同，分属于webgl目录下，提供GPU加速的图像后处理操作，由于GPU性能有限，对于某些耗时的滤镜(如大半径模糊操作) 依然不建议每一帧大量使用。
56 | </p>
57 | </div>
58 | <h2>WGE Animation基本概念</h2>
59 | <div style="margin:10px 15px">
60 | <h3><font color="red">时间轴->动画精灵(动画接口+带render方法的精灵)->精灵动作</font></h3>
61 | <p><b>时间轴(TimeLine)</b>WGE Animation使用时间轴驱动方式完成动画场景。<br>
62 | 每一个单独的动画都必须有一个时间轴，时间轴提供进度管理，更新，以及进度跳转等功能。
63 | 由时间轴管理动画精灵，动画精灵自身需要提供精灵需要出现的起始时间、结束时间，update方法和render方法以供时间轴使用<br>
64 | </p>
65 | <p><b>动画精灵(AnimationSprite)</b>动画精灵为包含动画接口的精灵，通常由一个普通精灵和动画接口多重继承而来。动画精灵一般直接交由时间轴总体控制。
66 | </p>
67 | <p><b>动画接口(AnimationInterface2d)</b>动画接口主要提供对于多个动作的管理，提供了外部向动画精灵添加动作以及动作的管理。同时也管理了精灵的时间属性，包括出现时间，结束时间等。
68 | </p>
69 | <p><b>精灵(sprite)</b>普通精灵提供与时间轴无关的公共渲染方法以及一些自身属性，如重心设置、旋转、平移、缩放等。动画精灵继承这些方法，当精灵被绑定到一个动作上时，由该动作来设定这些属性。
70 | </p>
71 | <p><b>精灵动作(spriteAction)</b>精灵动作提供了单个动作，这个动作包含属性包括：相对于sprite出现时间的开始时间、结束时间、重复次数等。具体行为可自己设定。公共文件仅提供简单的旋转平移缩放以及渐进渐出等。具体可参见: <a href="./2d/gui_test/gui_test3.html" target="_blank">gui_test3</a>
72 | </p>
73 | </div>
74 | </div>


--------------------------------------------------------------------------------
/extends/wgeCommonActions.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | /*
 3 | * wgeCommonActions.js
 4 | *
 5 | *  Created on: 2014-8-22
 6 | *
 7 | */
 8 | 
 9 | 
10 | /*
11 | 	简介: 公用action 列表库，列举并提供所有的可能被公用的action 操作
12 | 	      需要与wgeAnimation结合使用。
13 | 	      在添加每个actions的前面请务必注释并写上添加者名字，以方便后续使用
14 | */
15 | 
16 | 


--------------------------------------------------------------------------------
/extends/wgeExtendFunctions.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | /*
 3 | * wgeCommonFunctions.js
 4 | *
 5 | *  Created on: 2014-8-25
 6 | *
 7 | */
 8 | 
 9 | /*
10 | 	简介： 公用的扩展方法库， 列举一些可能被重用的方法。
11 | 	       如果你觉得全部写到一个文件里面不方便，也可以自己新添加一个文件。
12 | 
13 | 	特别注意: 如果该方法涉及到某个特定环境下(比如必须要context-2d支持), 请务必标注出来。
14 | */
15 | 
16 | // 将本文件内所有方法添加至 WGE.ExtendFunc 类名下，防止命名冲突
17 | 
18 | WGE.ExtendFunc = {};
19 | 
20 | (function()
21 | {
22 | 
23 | var F = WGE.ExtendFunc;
24 | 
25 | 
26 | //注: clipZone和fillZone选择其中一个使用即可。
27 | //    Zone2d 仅支持context-2d
28 | //功能: 提供一系列点，围成一个区域，然后对传入的context进行裁剪/填充
29 | //      具体效果参考 PhotoFrame(Piano)
30 | F.Zone2d = WGE.Class(
31 | {
32 | 	clipArray : undefined,
33 | 
34 | 	initialize : function(arr)
35 | 	{
36 | 		if(arr instanceof Array)
37 | 		{
38 | 			this.clipArray = arr;
39 | 		}
40 | 		else
41 | 		{
42 | 			this.clipArray = [];
43 | 			this.clipArray.push.apply(this.clipArray, arguments);
44 | 		}
45 | 	},
46 | 
47 | 	//使用前请save ctx状态
48 | 	clipZone : function(ctx, stroke, style, lineWidth)
49 | 	{
50 | 		if(style)
51 | 			ctx.strokeStyle = style;
52 | 		if(lineWidth)
53 | 			ctx.lineWidth = lineWidth;
54 | 
55 | 		ctx.beginPath();
56 | 		ctx.moveTo(this.clipArray[0].data[0], this.clipArray[0].data[1]);
57 | 		for(var i in this.clipArray)
58 | 		{
59 | 			ctx.lineTo(this.clipArray[i].data[0], this.clipArray[i].data[1]);
60 | 		}
61 | 		ctx.closePath();
62 | 		if(stroke)
63 | 			ctx.stroke();
64 | 		ctx.clip();
65 | 	},
66 | 
67 | 	//同上
68 | 	fillZone : function(ctx, pattern, style, lineWidth)
69 | 	{
70 | 		if(pattern)
71 | 			ctx.fillStyle = pattern;
72 | 		if(style)
73 | 			ctx.strokeStyle = style;
74 | 		if(lineWidth)
75 | 			ctx.lineWidth = lineWidth;
76 | 		ctx.beginPath();
77 | 		ctx.moveTo(clipArray[0].data[0], clipArray[0].data[1]);
78 | 		for(var i in clipArray)
79 | 		{
80 | 			ctx.lineTo(clipArray[i].data[0], clipArray[i].data[1]);
81 | 		}
82 | 		ctx.closePath();
83 | 		ctx.stroke();
84 | 		ctx.fill();
85 | 	}
86 | 
87 | });
88 | 
89 | 
90 | })();


--------------------------------------------------------------------------------
/extends/wgeFotorSlideshowInterface.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | /*
  3 | * wgeFotorSlideshowInterface.js
  4 | *
  5 | *  Created on: 2014-8-29
  6 | *      Author: Wang Yang
  7 | *        Blog: http://blog.wysaid.org
  8 | */
  9 | 
 10 | /*
 11 | 	简介: 为fotor slideshow 提供一致对外接口
 12 | 	需要网站部分js代码支持， 不可单独使用。
 13 | 
 14 | */
 15 | 
 16 | 
 17 | WGE.FotorSlideshowInterface = WGE.Class(FT.KAnimator, WGE.SlideshowInterface,
 18 | {
 19 | 	_lastVolume : null, //音乐淡出辅助变量
 20 | 
 21 | 	_blurFadeoutTime : 1500, //界面模糊淡出时间
 22 | 	_logoShowTime : 1500, //logo出现时间点
 23 | 	_totalEndingTime : 5000, //总共结束时间
 24 | 
 25 | 	//options、lastPhotoCallback 都是无意义参数，建议剔除
 26 | 	initialize : function(element, options, template, callback, scope, lastPhotoCallback)
 27 | 	{
 28 | 		FT.KAnimator.initialize.call(this, template);
 29 | 		var self = this;
 30 | 		var imageURLs = template.config.imageUrls || template.config.previewImageUrls;
 31 | 		var len = imageURLs.length;
 32 | 
 33 | 		if(!(len > 0))
 34 | 		{
 35 | 			console.error("未传入图片");
 36 | 			return ;
 37 | 		}
 38 | 
 39 | 		if(template.config.assetsDir) {
 40 | 			WGE.SlideshowSettings.assetsDir = template.config.assetsDir;			
 41 | 		}
 42 | 
 43 | 		FT.EventManager.sendEvent(new FT.KTemplateLoadingEvent(0, FT.TLP_ANIMATION_IMAGELOADING, this.template));
 44 | 
 45 | 		WGE.SlideshowInterface.initialize.call(this, element, imageURLs, function (imgArr, slideshowThis){
 46 | 			if(callback)
 47 | 				callback.call(scope);
 48 | 
 49 | 			// self.play();
 50 | 			// self.pause();
 51 | 
 52 | 		}, function(img, n, slideshowThis){
 53 | 			FT.EventManager.sendEvent(new FT.KTemplateLoadingEvent(n / len, FT.TLP_ANIMATION_IMAGELOADING, self.template));
 54 | 		});
 55 | 
 56 | 		//兼容接口
 57 | 		this.setMusicVolume = this.setVolume;
 58 | 		this.clear = this.release;
 59 | 	},
 60 | 
 61 | 	release : function()
 62 | 	{
 63 | 		this.audio.destruct();
 64 | 		this.srcImages = undefined;
 65 | 		this.timeline = undefined;
 66 | 		WGE.release(this);
 67 | 	},
 68 | 
 69 | 	_audioplaying : function()
 70 | 	{
 71 | 		this._audioplayingTime = this.getAudioPlayingTime();
 72 | 		FT.EventManager.sendEvent({
 73 | 			type: "FM_PLAY_PROGRESS",
 74 | 			position: this.timeline.currentTime,
 75 | 			duration: this.timeline.totalTime
 76 | 		});
 77 | 	},
 78 | 
 79 | 	//需要第三方 soundManager
 80 | 	_initAudio : function(url)
 81 | 	{
 82 | 		var self = this;
 83 | 		var arg = {url : url};
 84 | 
 85 | 		if(typeof this._audioFinish == "function")
 86 | 			arg.onfinish = this._audioFinish.bind(this);
 87 | 
 88 | 		if(typeof this._audioplaying == "function")
 89 | 			arg.whileplaying = this._audioplaying.bind(this);
 90 | 
 91 | 		if(typeof this._audiosuspend == "function")
 92 | 			arg.onsuspend = this._audiosuspend.bind(this);
 93 | 		if(typeof this._audioTimeout == "function")
 94 | 			arg.ontimeout = this._audioTimeout.bind(this);
 95 | 
 96 | 		var tryInitAudio = function() {
 97 | 			if(WGE.soundManagerReady)
 98 | 			{
 99 | 				if(self.audio)
100 | 					return;
101 | 				self.audio = soundManager.createSound(arg);
102 | 				if(!self.audio)
103 | 					self._checkAudioFailed();
104 | 				self.audio.play();
105 | 				//初始时将音乐标记为暂停状态，而不是未播放状态。
106 | 				if(!self._animationRequest)
107 | 					self.audio.pause();
108 | 				try
109 | 				{
110 | 					var v = self.template.config.music.defaultVolume;
111 | 					if(!isNaN(v))
112 | 						self.audio.setVolume(v);
113 | 				}catch(e) {}
114 | 			}
115 | 			else
116 | 			{
117 | 				setTimeout(tryInitAudio.bind(this), 100);
118 | 			}
119 | 		};
120 | 
121 | 		tryInitAudio();
122 | 	},
123 | 
124 | 	_checkAudioFailed : function()
125 | 	{
126 | 		if(this.audio.readyState == 2)
127 | 		{
128 | 			console.error("Failed to play audio : ", this.audioFileName);
129 | 			FT.EventManager.sendEvent({type: "FM_TEMPLATE_LOADMUSIC_FAILED"});
130 | 			this.stop();
131 | 			return true;
132 | 		}
133 | 		else if(this.audio.readyState == 3)
134 | 		{
135 | 			this._checkAudioFailed = null;
136 | 		}
137 | 		return false;
138 | 	},
139 | 
140 | 	onEvent: function(e)
141 | 	{
142 | 		try
143 | 		{
144 | 			if (this.template.config.autoPauseAsHide)
145 | 			{
146 | 				if (e.type == "FM_WINDOW_HIDE")
147 | 				{
148 | 					this.pause();
149 | 				}
150 | 				else if (e.type == "FM_WINDOW_SHOW")
151 | 				{
152 | 					this.resume();
153 | 				}
154 | 			}
155 | 		}catch(e)
156 | 		{
157 | 			console.warn("多余Event, 需要网站解决");
158 | 		}
159 | 	},
160 | 
161 | 	endloop : function()
162 | 	{
163 | 		if(this._animationRequest || !(this.context && this._endBlurCanvas && this._endCanvas))
164 | 			return;
165 | 		var time = Date.now();
166 | 		var dt = time - this._lastFrameTime;
167 | 		if(dt >  this._totalEndingTime)
168 | 		{
169 | 			this.context.save();
170 | 			this.context.drawImage(this._endBlurCanvas, 0, 0, this._endBlurCanvas.width, this._endBlurCanvas.height, 0, 0, this.canvas.width, this.canvas.height);
171 | 			this.context.fillStyle = "#000";
172 | 			this.context.globalAlpha = 0.5;
173 | 			this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
174 | 			this.context.restore();
175 | 			console.log("Slideshow endloop finished.");
176 | 			if(this.audio)
177 | 			{
178 | 				this.audio.stop();
179 | 				this.audio.setVolume(this._lastVolume);
180 | 				this._lastVolume = null;
181 | 			}
182 | 			return ;
183 | 		}
184 | 
185 | 		this.context.save();
186 | 
187 | 		if(dt < this._blurFadeoutTime)
188 | 		{
189 | 			this.context.drawImage(this._endCanvas, 0, 0);
190 | 			this.context.globalAlpha = dt / this._blurFadeoutTime;
191 | 			this.context.drawImage(this._endBlurCanvas, 0, 0, this._endBlurCanvas.width, this._endBlurCanvas.height, 0, 0, this.canvas.width, this.canvas.height);
192 | 		}
193 | 		else
194 | 		{
195 | 			this.context.drawImage(this._endBlurCanvas, 0, 0, this._endBlurCanvas.width, this._endBlurCanvas.height, 0, 0, this.canvas.width, this.canvas.height);
196 | 			this.context.globalAlpha = (dt - this._blurFadeoutTime) / (2.0 * (this._totalEndingTime - this._blurFadeoutTime));
197 | 			this.context.fillStyle = "#000";
198 | 			this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
199 | 		}
200 | 		this.context.restore();
201 | 
202 | 		if(this._lastVolume)
203 | 			this.audio.setVolume(this._lastVolume * (1 - dt / this._totalEndingTime));
204 | 
205 | 		//保证淡出执行间隔。(淡出不需要太高的帧率，和大量运算)
206 | 		setTimeout(this.endloop.bind(this), 20);
207 | 	},
208 | 
209 | 	_end : function()
210 | 	{
211 | 		console.log("Slideshow End");
212 | 		this._animationRequest = null;
213 | 		this._endBlurCanvas = WGE.CE("canvas");
214 | 		this._endBlurCanvas.width = this.canvas.width / 2;
215 | 		this._endBlurCanvas.height = this.canvas.height / 2;
216 | 		var ctx = this._endBlurCanvas.getContext('2d');
217 | 		ctx.drawImage(this.canvas, 0, 0, this.canvas.width, this.canvas.height, 0, 0, this._endBlurCanvas.width, this._endBlurCanvas.height);
218 | 		var blurredData = WGE.Filter.StackBlur.stackBlurCanvasRGB(this._endBlurCanvas, 0, 0, this._endBlurCanvas.width, this._endBlurCanvas.height, 25);
219 | 		ctx.putImageData(blurredData, 0, 0);
220 | 		this._endCanvas = WGE.CE("canvas");
221 | 		this._endCanvas.width = this.canvas.width;
222 | 		this._endCanvas.height = this.canvas.height;
223 | 		this._endCanvas.getContext('2d').drawImage(this.canvas, 0, 0);
224 | 		this.timeline.end();
225 | 		this._lastVolume = this.audio.volume;
226 | 
227 | 		this._lastFrameTime = Date.now();
228 | 
229 | 		FT.EventManager.sendEvent({
230 | 			type: "FM_PLAY_PROGRESS",
231 | 			position: this.timeline.totalTime,
232 | 			duration: this.timeline.totalTime
233 | 		});
234 | 		setTimeout(this.endloop.bind(this), 1);
235 | 		setTimeout(this._showLogo.bind(this), this._logoShowTime);
236 | 	},
237 | 
238 | 	_showLogo : function()
239 | 	{
240 | 		if(this._animationRequest || !(this.context && this._endBlurCanvas && this._endCanvas))
241 | 			return;
242 | 		FT.EventManager.sendEvent({
243 | 			type: "FM_MUSIC_END"
244 | 		});
245 | 	},
246 | 
247 | 	setParam : function(param)
248 | 	{
249 | 		if(typeof param.musicVolume == "number")
250 | 		{
251 | 			//this._lastVolume = null;
252 | 			this.setVolume(param.musicVolume);
253 | 		}
254 | 	}
255 | 
256 | });


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/favicon.ico


--------------------------------------------------------------------------------
/image404.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/image404.jpg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <html xmlns="http://www.w3.org/1999/xhtml">
  2 | <head>
  3 | <meta charset="utf-8">
  4 | <title>WGE (Web Graphics Engine)</title>
  5 | <script type="text/javascript" src="wgeCore.js"></script>
  6 | <style type="text/css">
  7 | div {
  8 | 	border: groove;
  9 | }
 10 | 
 11 | #globalView {
 12 | 	width: 80%;
 13 | 	min-width: 800px;
 14 | 	height: auto;
 15 | 	min-height: 600px;
 16 | 	margin: 0px auto;
 17 | }
 18 | 
 19 | #logoBar {
 20 | 	width: auto;
 21 | 	height: 80px;
 22 | }
 23 | 
 24 | #navContainer {
 25 | 	width: auto;
 26 | 	height: 32px;
 27 | 	margin: 5px 5px;
 28 | }
 29 | 
 30 | #navContainer ul {
 31 | 	font: 20px verdana, arial, 宋体;
 32 | 	font-weight: bold;
 33 | 	list-style: none;
 34 | 	list-style-type: none;
 35 | 	padding: 0;
 36 | 	margin: 0;	
 37 | }
 38 | 
 39 | #navContainer ul li{
 40 | 	float: left;
 41 | 	width: 100px;
 42 | 	margin: 4px 0 0 16px;
 43 | 	background-color: #ddd;
 44 | 	display: list-item;
 45 | 	text-align: center;
 46 | 	background-color: #235a83;
 47 | }
 48 | 
 49 | #navContainer a {
 50 | 	color: #ddd;
 51 | }
 52 | 
 53 | #contentContainer {
 54 | 	width: 100%;
 55 | 	height: auto;
 56 | 	position: relative;
 57 | }
 58 | 
 59 | #content {
 60 | 	position: relative;
 61 | 	width: 80%;
 62 | 	min-height: 600px;
 63 | 	height: auto;
 64 | 	margin-left: 2px;
 65 | 	background-color: #ddd;
 66 | }
 67 | 
 68 | #content img {
 69 | 	width: 98%;
 70 | 	height: auto;
 71 | 	margin: auto;
 72 | }
 73 | 
 74 | #infoBar {
 75 | 	position: absolute;
 76 | 	width: 18%;
 77 | 	left: 80%;
 78 | 	top: 0;
 79 | 	margin-right: 1%;
 80 | 	min-height: 600px;
 81 | }
 82 | 
 83 | </style>
 84 | <script type="text/javascript">
 85 | 
 86 | function contentUpdate(contentID, url)
 87 | {
 88 | 	WGE.requestTextByURL(url, function(text, reqXHR){
 89 | 		var content = WGE.ID(contentID);
 90 | 		content.innerHTML = text;
 91 | 	});
 92 | }
 93 | 
 94 | </script>
 95 | </head>
 96 | <body>
 97 | <div id="globalView">
 98 | <div id="logoBar">
 99 | <a href="index.html"><img src="logo.png" style="margin:auto auto auto 10px;"></a></div>
100 | 
101 | <div id="navContainer">
102 | <script type="text/javascript">
103 | var navContainer = WGE.ID("navContainer");
104 | var navUL = WGE.CE("ul");
105 | navContainer.appendChild(navUL);
106 | 
107 | //ajax 更新content
108 | var li = 
109 | {
110 | 	"首页" : "./index.html",
111 | 	"简介" : "javascript:contentUpdate('content', 'about.html')",
112 | 	"文档" : "./man/index.html",
113 | 	"下载" : "http://github.com/wysaid/wge",
114 | 	"工具" : "./tools/index.html"
115 | }
116 | 
117 | for(var i in li)
118 | {
119 | 	var element = WGE.CE('li');
120 | 	element.setAttribute("style", "");
121 | 	element.innerHTML = '<a href="' + li[i] + '">' + i + '</a>';
122 | 	navUL.appendChild(element);
123 | }
124 | </script>
125 | </div>
126 | <div id="contentContainer">
127 | <div id="content">
128 | <div style="margin:10px 10px">
129 | <p>WGE (Web Graphics Engine) 是一个基于Web平台的图形引擎。主要使用js, canvas 2d, canvas webgl开发</p>
130 | <p>WGE 目前主要定位为一个简单易用，快速上手，并能够加快web应用开发的框架库。(For study only)</p>
131 | </div>
132 | <div style="margin:10px 10px">
133 | <p>2d版： </p>
134 | <p>demo列表： <a href="./2d/gui_test/index.html" target="_blank">canvas-2d demos</a></p>
135 | <p>slideshow展示： <a href="./2d/slideshows/index.html" target="_blank">slideshows</a></p>
136 | </div>
137 | <div style="margin:10px 10px">
138 | <p>webgl版： </p>
139 | <p>demo列表： <a href="./webgl/demos/index.html" target="_blank">canvas-webgl demos</a></p>
140 | 
141 | </div>
142 | </div>
143 | <div id="infoBar">
144 | <div style="width:98%;height:100px;">
145 | <p>主页建设中！</p>
146 | </div>
147 | <div style="width:98%;height:100px;">
148 | <p>当前版本: 0.0.1</p>
149 | </div>
150 | <div style="width:98%;height:100px;">
151 | <p>联系我: <a href="mailto:admin@wysaid.org?subject=To_WGE&body=About_WGE" target="_blank">请点击</a></p>
152 | </div>
153 | </div>
154 | </div>
155 | </div>
156 | </body>
157 | </html>
158 | 


--------------------------------------------------------------------------------
/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/logo.png


--------------------------------------------------------------------------------
/man/index.html:
--------------------------------------------------------------------------------
1 | <meta charset="utf-8">
2 | <h1>这里是文档</h1>
3 | <p>其实文档还没写呢</p>
4 | <a href="../index.html">返回首页</a>


--------------------------------------------------------------------------------
/res/0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/0.jpg


--------------------------------------------------------------------------------
/res/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/1.jpg


--------------------------------------------------------------------------------
/res/10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/10.jpg


--------------------------------------------------------------------------------
/res/11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/11.jpg


--------------------------------------------------------------------------------
/res/12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/12.jpg


--------------------------------------------------------------------------------
/res/13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/13.jpg


--------------------------------------------------------------------------------
/res/14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/14.jpg


--------------------------------------------------------------------------------
/res/15.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/15.jpg


--------------------------------------------------------------------------------
/res/16.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/16.jpg


--------------------------------------------------------------------------------
/res/17.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/17.jpg


--------------------------------------------------------------------------------
/res/18.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/18.jpg


--------------------------------------------------------------------------------
/res/19.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/19.jpg


--------------------------------------------------------------------------------
/res/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/2.jpg


--------------------------------------------------------------------------------
/res/20.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/20.jpg


--------------------------------------------------------------------------------
/res/21.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/21.jpg


--------------------------------------------------------------------------------
/res/22.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/22.jpg


--------------------------------------------------------------------------------
/res/23.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/23.jpg


--------------------------------------------------------------------------------
/res/24.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/24.jpg


--------------------------------------------------------------------------------
/res/25.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/25.jpg


--------------------------------------------------------------------------------
/res/26.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/26.jpg


--------------------------------------------------------------------------------
/res/27.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/27.jpg


--------------------------------------------------------------------------------
/res/28.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/28.jpg


--------------------------------------------------------------------------------
/res/29.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/29.jpg


--------------------------------------------------------------------------------
/res/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/3.jpg


--------------------------------------------------------------------------------
/res/30.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/30.jpg


--------------------------------------------------------------------------------
/res/31.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/31.jpg


--------------------------------------------------------------------------------
/res/32.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/32.jpg


--------------------------------------------------------------------------------
/res/33.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/33.jpg


--------------------------------------------------------------------------------
/res/34.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/34.jpg


--------------------------------------------------------------------------------
/res/35.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/35.jpg


--------------------------------------------------------------------------------
/res/36.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/36.jpg


--------------------------------------------------------------------------------
/res/37.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/37.jpg


--------------------------------------------------------------------------------
/res/38.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/38.jpg


--------------------------------------------------------------------------------
/res/39.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/39.jpg


--------------------------------------------------------------------------------
/res/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/4.jpg


--------------------------------------------------------------------------------
/res/40.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/40.jpg


--------------------------------------------------------------------------------
/res/41.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/41.jpg


--------------------------------------------------------------------------------
/res/42.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/42.jpg


--------------------------------------------------------------------------------
/res/43.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/43.jpg


--------------------------------------------------------------------------------
/res/44.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/44.jpg


--------------------------------------------------------------------------------
/res/45.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/45.jpg


--------------------------------------------------------------------------------
/res/46.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/46.jpg


--------------------------------------------------------------------------------
/res/47.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/47.jpg


--------------------------------------------------------------------------------
/res/48.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/48.jpg


--------------------------------------------------------------------------------
/res/49.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/49.jpg


--------------------------------------------------------------------------------
/res/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/5.jpg


--------------------------------------------------------------------------------
/res/50.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/50.jpg


--------------------------------------------------------------------------------
/res/51.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/51.jpg


--------------------------------------------------------------------------------
/res/52.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/52.jpg


--------------------------------------------------------------------------------
/res/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/6.jpg


--------------------------------------------------------------------------------
/res/7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/7.jpg


--------------------------------------------------------------------------------
/res/8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/8.jpg


--------------------------------------------------------------------------------
/res/9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/9.jpg


--------------------------------------------------------------------------------
/res/arc.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/arc.jpg


--------------------------------------------------------------------------------
/res/box/a1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/box/a1.jpg


--------------------------------------------------------------------------------
/res/box/a2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/box/a2.jpg


--------------------------------------------------------------------------------
/res/box/a3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/box/a3.jpg


--------------------------------------------------------------------------------
/res/box/a4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/box/a4.jpg


--------------------------------------------------------------------------------
/res/box/bridge_negx.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/box/bridge_negx.jpg


--------------------------------------------------------------------------------
/res/box/bridge_negy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/box/bridge_negy.jpg


--------------------------------------------------------------------------------
/res/box/bridge_negz.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/box/bridge_negz.jpg


--------------------------------------------------------------------------------
/res/box/bridge_posx.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/box/bridge_posx.jpg


--------------------------------------------------------------------------------
/res/box/bridge_posy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/box/bridge_posy.jpg


--------------------------------------------------------------------------------
/res/box/bridge_posz.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/box/bridge_posz.jpg


--------------------------------------------------------------------------------
/res/box/bump.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/box/bump.jpg


--------------------------------------------------------------------------------
/res/box/bump2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/box/bump2.jpg


--------------------------------------------------------------------------------
/res/box/mountain_neg_x.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/box/mountain_neg_x.jpg


--------------------------------------------------------------------------------
/res/box/mountain_neg_y.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/box/mountain_neg_y.jpg


--------------------------------------------------------------------------------
/res/box/mountain_neg_z.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/box/mountain_neg_z.jpg


--------------------------------------------------------------------------------
/res/box/mountain_pos_x.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/box/mountain_pos_x.jpg


--------------------------------------------------------------------------------
/res/box/mountain_pos_y.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/box/mountain_pos_y.jpg


--------------------------------------------------------------------------------
/res/box/mountain_pos_z.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/box/mountain_pos_z.jpg


--------------------------------------------------------------------------------
/res/box/skycubemap_back.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/box/skycubemap_back.jpg


--------------------------------------------------------------------------------
/res/box/skycubemap_down.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/box/skycubemap_down.jpg


--------------------------------------------------------------------------------
/res/box/skycubemap_down_cube.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/box/skycubemap_down_cube.jpg


--------------------------------------------------------------------------------
/res/box/skycubemap_front.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/box/skycubemap_front.jpg


--------------------------------------------------------------------------------
/res/box/skycubemap_left.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/box/skycubemap_left.jpg


--------------------------------------------------------------------------------
/res/box/skycubemap_right.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/box/skycubemap_right.jpg


--------------------------------------------------------------------------------
/res/box/skycubemap_up.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/box/skycubemap_up.jpg


--------------------------------------------------------------------------------
/res/box/skycubemap_up_cube.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/box/skycubemap_up_cube.jpg


--------------------------------------------------------------------------------
/res/comic0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/comic0.jpg


--------------------------------------------------------------------------------
/res/comic1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/comic1.jpg


--------------------------------------------------------------------------------
/res/comic10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/comic10.jpg


--------------------------------------------------------------------------------
/res/comic11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/comic11.jpg


--------------------------------------------------------------------------------
/res/comic12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/comic12.jpg


--------------------------------------------------------------------------------
/res/comic13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/comic13.jpg


--------------------------------------------------------------------------------
/res/comic14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/comic14.jpg


--------------------------------------------------------------------------------
/res/comic15.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/comic15.jpg


--------------------------------------------------------------------------------
/res/comic16.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/comic16.jpg


--------------------------------------------------------------------------------
/res/comic2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/comic2.jpg


--------------------------------------------------------------------------------
/res/comic3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/comic3.jpg


--------------------------------------------------------------------------------
/res/comic4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/comic4.jpg


--------------------------------------------------------------------------------
/res/comic5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/comic5.jpg


--------------------------------------------------------------------------------
/res/comic6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/comic6.jpg


--------------------------------------------------------------------------------
/res/comic7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/comic7.jpg


--------------------------------------------------------------------------------
/res/comic8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/comic8.jpg


--------------------------------------------------------------------------------
/res/comic9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/comic9.jpg


--------------------------------------------------------------------------------
/res/face.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/face.jpg


--------------------------------------------------------------------------------
/res/face2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/face2.jpg


--------------------------------------------------------------------------------
/res/maskFace.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/maskFace.jpg


--------------------------------------------------------------------------------
/res/materials/0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/materials/0.jpg


--------------------------------------------------------------------------------
/res/materials/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/materials/1.jpg


--------------------------------------------------------------------------------
/res/materials/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/materials/2.jpg


--------------------------------------------------------------------------------
/res/materials/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/materials/3.jpg


--------------------------------------------------------------------------------
/res/materials/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/materials/4.jpg


--------------------------------------------------------------------------------
/res/materials/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/materials/5.jpg


--------------------------------------------------------------------------------
/res/materials/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/materials/6.jpg


--------------------------------------------------------------------------------
/res/png/0.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/png/0.png


--------------------------------------------------------------------------------
/res/png/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/png/1.png


--------------------------------------------------------------------------------
/res/png/10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/png/10.png


--------------------------------------------------------------------------------
/res/png/11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/png/11.png


--------------------------------------------------------------------------------
/res/png/12.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/png/12.png


--------------------------------------------------------------------------------
/res/png/13.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/png/13.png


--------------------------------------------------------------------------------
/res/png/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/png/2.png


--------------------------------------------------------------------------------
/res/png/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/png/3.png


--------------------------------------------------------------------------------
/res/png/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/png/4.png


--------------------------------------------------------------------------------
/res/png/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/png/5.png


--------------------------------------------------------------------------------
/res/png/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/png/6.png


--------------------------------------------------------------------------------
/res/png/7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/png/7.png


--------------------------------------------------------------------------------
/res/png/8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/png/8.png


--------------------------------------------------------------------------------
/res/png/9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/png/9.png


--------------------------------------------------------------------------------
/res/snd1.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/snd1.mp3


--------------------------------------------------------------------------------
/res/test.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/test.jpg


--------------------------------------------------------------------------------
/res/test2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/test2.jpg


--------------------------------------------------------------------------------
/res/video/1.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/res/video/1.mp4


--------------------------------------------------------------------------------
/screenshots/2d_gui_test2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/screenshots/2d_gui_test2.jpg


--------------------------------------------------------------------------------
/screenshots/cube_map_reflect.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/screenshots/cube_map_reflect.jpg


--------------------------------------------------------------------------------
/screenshots/cube_map_refract.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/screenshots/cube_map_refract.jpg


--------------------------------------------------------------------------------
/screenshots/teapot_perpixel.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/screenshots/teapot_perpixel.jpg


--------------------------------------------------------------------------------
/screenshots/webgl_gui_test1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/screenshots/webgl_gui_test1.jpg


--------------------------------------------------------------------------------
/screenshots/webgl_gui_test2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/screenshots/webgl_gui_test2.jpg


--------------------------------------------------------------------------------
/screenshots/webgl_gui_test3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/screenshots/webgl_gui_test3.jpg


--------------------------------------------------------------------------------
/screenshots/webgl_gui_test4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/screenshots/webgl_gui_test4.jpg


--------------------------------------------------------------------------------
/tools/code_format.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | <meta charset="utf-8">
 4 | <title>代码格式化工具</title>
 5 | </head>
 6 | <body>
 7 | 
 8 | <div style="width:800px;height:620px;margin:auto; border:groove;">
 9 | <textarea id="src" style="width:100%;height:250px; border:solid;position:relative"></textarea>
10 | <div style="width:350px;height:50px;margin:10px auto;">
11 | <input type="button" style="width:130px; height:40px; margin:5px" value="压缩" onclick="packSrc()">
12 | <input type="button" style="width:130px; height:40px; margin:5px" value="格式化" onclick="formatSrc()">
13 | </div>
14 | <textarea id="dst" style="width:100%;height:300px;position:relative;border:solid"></textarea>
15 | <div>
16 | <script type="text/javascript">
17 | 
18 | var formater =
19 | {
20 | 	format: function (s)
21 | 	{
22 | 		s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
23 | 		s = s.replace(/;\s*;/g, ";");
24 | 		s = s.replace(/\,[\s\.\#\d]*{/g, "{");
25 | 		s = s.replace(/([^\s])\{([^\s])/g, "$1 {\n\t$2");
26 | 		s = s.replace(/([^\s])\}([^\n]*)/g, "$1\n}\n$2");
27 | 		s = s.replace(/([^\s]);([^\s\}])/g, "$1;\n\t$2");
28 | 		return s;
29 | 	},
30 | 	pack: function (s) {
31 | 		s = s.replace(/\/\*(.|\n)*?\*\//g, "");
32 | 		s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
33 | 		s = s.replace(/\,[\s\.\#\d]*\{/g, "{");
34 | 		s = s.replace(/;\s*;/g, ";");
35 | 		s = s.match(/^\s*(\S+(\s+\S+)*)\s*$/);
36 | 		return (s == null) ? "" : s[1];
37 | 	}
38 | };
39 | 
40 | var src = document.getElementById('src');
41 | var dst = document.getElementById('dst');
42 | 
43 | function formatSrc()
44 | {
45 | 	dst.value = formater.format(src.value);
46 | }
47 | 
48 | function packSrc()
49 | {
50 | 	dst.value = formater.pack(src.value);
51 | }
52 | 
53 | </script>
54 | </body>
55 | </html>


--------------------------------------------------------------------------------
/tools/index.html:
--------------------------------------------------------------------------------
1 | <meta charset="utf-8">
2 | <h1><a href="wge2d.html">wge-2d 代码合并</a><h1>
3 | <h1><a href="code_format.html">代码格式化工具</a></h1>


--------------------------------------------------------------------------------
/tools/wge2d.html:
--------------------------------------------------------------------------------
 1 | <title>WGE 2d 代码合集</title>
 2 | <meta charset="utf-8">
 3 | <h1>下方为WGE 2d 公共部分全部代码</h1>
 4 | <hr>
 5 | <script type="text/javascript" src="../wgeCore.js"></script>
 6 | 
 7 | <textarea id="text" style="width:100%; height:auto"></textarea>
 8 | 
 9 | <script type="text/javascript">
10 | 
11 | var txtDOM = WGE.ID('text');
12 | 
13 | if(window.location.protocol == "file:")
14 | {
15 | 	txtDOM.value = "请在web环境下打开，否则无法显示";
16 | }
17 | else
18 | {
19 | 	//按照正确顺序填写
20 | 	var scriptURLs =
21 | 	[
22 | 	"../wgeCore.js",
23 | 	"../wgeAlgorithm.js",
24 | 	"../wgeAnimation.js",
25 | 	"../wgeGUI.js",
26 | 	"../wgeParticleSystem.js",
27 | 	"../wgeFont.js",
28 | 	"../2d/wgeSprite.js",
29 | 	"../2d/wgeFilters.js",
30 | 	"../2d/wgeSlideshow.js",
31 | 	"../extends/wgeExtendActions.js",
32 | 	"../extends/wgeExtendFunctions.js",	
33 | 	"../extends/wgeFotorSlideshowInterface.js",
34 | 	];
35 | 
36 | 
37 | 
38 | 	var text = "";
39 | 
40 | 	for(var i in scriptURLs)
41 | 	{
42 | 		var url = scriptURLs[i];
43 | 		text += "//" + url + "\n";
44 | 		text += WGE.requestTextByURL(url + "?" + Math.random()) + "\n\n";
45 | 	}
46 | 
47 | 	txtDOM.value = text;
48 | 	txtDOM.style.height = (txtDOM.scrollHeight + 100) + "px";
49 | }
50 | 
51 | </script>


--------------------------------------------------------------------------------
/webgl/README.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <meta charset="utf-8" />
 4 |     <title>WGE-WebGL 简介</title>
 5 | </head>
 6 | <body style="font:bold;font-size:large;">
 7 | <h1>WGE-WebGL 简介 ——By wy</h1>
 8 | <p>使用WebGL实现的简单引擎</p>
 9 | <p>左键点击左侧demo栏直接查看demo。也可以右键用新标签页打开，全屏查看demo</p>
10 | 
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/webgl/demos/README.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <meta charset="utf-8" />
 4 |     <title>WGE-WebGL 简介</title>
 5 | </head>
 6 | <body style="font:bold;font-size:large;">
 7 | <h1>WGE-WebGL 简介 ——By wy</h1>
 8 | <p>使用WebGL实现的简单封装</p>
 9 | <p>左键点击左侧demo栏直接查看demo。也可以右键用新标签页打开，全屏查看demo</p>
10 | 
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/webgl/demos/index.html:
--------------------------------------------------------------------------------
 1 | <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 2 | <head>
 3 | <meta charset="utf-8" />
 4 | <title>WGE - demos</title>
 5 | <script type="text/javascript">
 6 | var gFrameHeight = "100%";
 7 | 
 8 | function bodyResize()
 9 | {
10 | 	var frame = document.getElementById("itemView");
11 | 	var father = document.getElementById("__father");
12 | 	frame.setAttribute("style", "position:absolute;background-color:#d0d0d0;border:groove;top:0px;left:220px;width:" + (father.clientWidth - 230) + "px;height:" + father.clientHeight + "px;");
13 | 
14 | 	var demoView = document.getElementById("demoView");
15 | 	demoView.style.height = null;
16 | 	var hBar = parseInt(demoView.clientHeight);
17 | 	var hContent = parseInt(document.getElementById('itemView').clientHeight);
18 | 	if(hBar > hContent)
19 | 	{
20 | 		demoView.style.height = (hContent-20) + "px";
21 | 	}
22 | }
23 | </script>
24 | </head>
25 | <body onload="bodyResize()" onresize="bodyResize()">
26 | <div id="__father" style="width:100%; height:100%; position:relative;">
27 | 
28 | <div style="width:200px;border:groove; overflow:auto;" id="demoView">
29 | <h1>WGE Tests</h1>
30 | <script type="text/javascript">
31 | var testNames = 
32 | {
33 | '2D Sprite 1' : 'sprite2dtest1.html',
34 | '2D Sprite 2': 'sprite2dtest2.html',
35 | 'Alpha Blend' : 'alphaBlendTest.html',
36 | 'SceneRoaming 1' : 'sceneRoamingTest1.html',
37 | 'SceneRoaming 2': 'sceneRoamingTest2.html',
38 | 'stencil test' : 'stencilTest.html',
39 | 'TeapotPerVertex': 'TeapotPerVertex.html',
40 | 'TeapotPerPixel': 'TeapotPerPixel.html',
41 | 'sky box 1': 'skyBox1.html',
42 | 'sky box 2': 'skyBox2.html',
43 | 'sky box 3': 'skyBox3.html',
44 | 'sky box 4': 'skyBox4.html',
45 | 'sky box 5': 'skyBox5.html',
46 | 'bump mapping 1': 'bump_mapping_1.html',
47 | 'faceDeform' : 'faceDeform.html',
48 | 'faceDistortion' : 'faceDistortion.html',
49 | 'faceDist_Arc' : 'faceDistortion_arc.html',
50 | 'faceDist_Arc2' : 'faceDistortion_arc2.html',
51 | 'faceDist_Face++' : 'faceDistortion_facepp.html'
52 | };
53 | var demoView = document.getElementById("demoView");
54 | for(var i in testNames)
55 | {
56 |     var item = document.createElement("p");
57 |     var text = "<h4><a href = './" + testNames[i] + "' target='demos'>" + i + "</a></h4>";
58 |     item.setAttribute("style", "margin:10px;text-align:center;background-color: #abcdef; margin 10px;");
59 |     item.innerHTML = text;
60 |     demoView.appendChild(item);
61 | }
62 | </script>
63 | </div>
64 | <div id="itemView">
65 | <iframe src="README.html" style="border:none;width:100%;height:100%;" name="demos">
66 | Your browser is too old. Please use another one instead.
67 | </iframe>
68 | </div>
69 | 
70 | </div>
71 | </body>
72 | </html>
73 | 


--------------------------------------------------------------------------------
/webgl/demos/sprite2dtest1.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 | <meta charset="utf-8">
  4 | <title>simpleDemo</title>
  5 | <script type="text/javascript" src="../../wgeCore.js"></script>
  6 | <script type="text/javascript" src="../../wgeAlgorithm.js"></script>
  7 | <script type="text/javascript" src="../wgeSprite2d.js"></script>
  8 | <script type="text/javascript" src="../../wgeGUI.js"></script>
  9 | <script type="text/javascript" src="../wgeWebGL.js"></script>
 10 | 
 11 | </head>
 12 | 
 13 | <body>
 14 | 
 15 | <script type="text/javascript">
 16 | "use strict";
 17 | 
 18 | var maxSpriteNum = 500;
 19 | var runningSpriteNum = 50;
 20 | 
 21 | WGE.Sprite2d.ShaderDir = "../";
 22 | 
 23 | var MySprite = WGE.Class(WGE.Sprite2d,
 24 | {
 25 | 	dx : 0,
 26 | 	dy : 0,
 27 | 	drz : 0,
 28 | 
 29 | 	randomize : function()
 30 | 	{
 31 | 		var w = this.canvas.width, h = this.canvas.height;
 32 | 
 33 | 		this.pos.data[0] = Math.random() * w;
 34 | 		this.pos.data[1] = Math.random() * h;
 35 | 		this.dx = Math.random() * 0.5 + 0.01;
 36 | 		this.dy = Math.random() * 0.5 + 0.01;
 37 | 		this.drz = Math.random() * 0.005 + 0.001;
 38 | 	},
 39 | 
 40 | 	update : function(dt, boundingX, boundingY)
 41 | 	{
 42 | 		var d = this.pos.data;
 43 | 		d[0] += this.dx * dt;
 44 | 		d[1] += this.dy * dt;
 45 | 		this.rotate(this.drz * dt);
 46 | 
 47 | 		if(d[0] < 0)
 48 | 		{
 49 | 			d[0] = 0;
 50 | 			this.dx = -this.dx;
 51 | 		}
 52 | 		else if(d[0] > boundingX)
 53 | 		{
 54 | 			d[0] = boundingX;
 55 | 			this.dx = -this.dx;
 56 | 		}
 57 | 
 58 | 		if(d[1] < 0)
 59 | 		{
 60 | 			d[1] = 0;
 61 | 			this.dy = -this.dy;
 62 | 		}
 63 | 		else if(d[1] > boundingY)
 64 | 		{
 65 | 			d[1] = boundingY;
 66 | 			this.dy = -this.dy;
 67 | 		}
 68 | 
 69 | 	}
 70 | 
 71 | });
 72 | 
 73 | var MyGUI = WGE.Class(WGE.GUIInterface, 
 74 | {
 75 | 	context : undefined,
 76 | 	isMouseDown : false,
 77 | 	sprites : null,
 78 | 	deltaTime : 10,
 79 | 	x : 0,
 80 | 	y : 0,
 81 | 
 82 | 	bindFather : function(fatherObj)
 83 | 	{
 84 | 		if(WGE.GUIInterface.bindFather.call(this, fatherObj));
 85 | 		{
 86 | 			var context = this.canvas.getContext('experimental-webgl');
 87 | 			if(!context)
 88 | 			{
 89 | 				alert('你的浏览器不支持webgl啊，坟蛋！换一个好吗？');
 90 | 			}
 91 | 			this.context = context;
 92 | 			context.enable(context.BLEND);
 93 | 			context.blendFunc(context.ONE, context.ONE);
 94 | 			return !!this.context;
 95 | 		}
 96 | 		return false;
 97 | 	},
 98 | 
 99 | 	initSprites : function()
100 | 	{
101 | 		var sprites = [];
102 | 		var textures = [];
103 | 		var context = this.context;
104 | 		this.sprites = sprites;
105 | 		for(var i = 0; i != 14; ++i)
106 | 		{
107 | 			var img = WGE.ID('test' + i);
108 | 			var tex = new WGE.Texture2D(context);
109 | 			tex.initWithImg(img);
110 | 			textures.push(tex);
111 | 		}
112 | 
113 | 		for(var i = 0; i != maxSpriteNum; ++i)
114 | 		{
115 | 			var sprite = new MySprite(this.canvas, this.context);
116 | 			sprite.initSprite(textures[parseInt(Math.random() * textures.length)]);
117 | 			sprite.setAlpha(1.0 / maxSpriteNum + Math.random() * 0.2 + 0.1);
118 | 			sprite.randomize();
119 | 			sprites.push(sprite);
120 | 		}
121 | 
122 | 		sprites[0].setAlpha(1.0);
123 | 
124 | 		this.context.clearColor(0.0, 0.0, 0.0, 1.0);
125 | 	},
126 | 
127 | 	spritesAlphaPlus : function(value)
128 | 	{
129 | 		var sprites = this.sprites;
130 | 		for(var i = 0; i < runningSpriteNum; ++i)
131 | 		{
132 | 			var alpha = Math.max(Math.min(sprites[i]._alpha + value, 1.0), 0.001);
133 | 			sprites[i].setAlpha(alpha);
134 | 		}
135 | 	},
136 | 
137 | 	update : function(dt)
138 | 	{
139 | 		this.deltaTime = dt;
140 | 		var w = this.canvas.width, h = this.canvas.height;
141 | 		var sprites = this.sprites;
142 | 		for(var i = 1; i < runningSpriteNum; ++i)
143 | 		{
144 | 			sprites[i].update(dt, w, h);
145 | 		}
146 | 
147 | 		sprites[0].moveTo(this.x, this.y);
148 | 		sprites[0].rotate(sprites[0].drz * dt);
149 | 	},
150 | 
151 | 	render : function()
152 | 	{
153 | 		this.context.clear(this.context.COLOR_BUFFER_BIT);
154 | 		var sprites = this.sprites;
155 | 		for(var i = 1; i < runningSpriteNum; ++i)
156 | 		{
157 | 			sprites[i].render();
158 | 		}
159 | 		sprites[0].render();
160 | 		this.context.finish();
161 | 	},
162 | 
163 | 	mouseMoveEvent : function(e, x, y)
164 | 	{
165 | 		this.x = x;
166 | 		this.y = y;
167 | 	},
168 | 
169 | 	resizeEvent : function()
170 | 	{
171 | 		if(this.context)
172 | 		{
173 | 			this.context.viewport(0, 0, this.canvas.width, this.canvas.height);
174 | 			var sprites = this.sprites;
175 | 			for(var i in sprites)
176 | 			{
177 | 				sprites[i].onCanvasResize();
178 | 			}
179 | 		}
180 | 	}
181 | });
182 | 
183 | var div = WGE.CE('div');
184 | document.body.appendChild(div);
185 | div.setAttribute('style', "width: 100%; height:100%;");
186 | var gui = new MyGUI(div);
187 | 
188 | function updateSpritesAndFPS()
189 | {
190 | 	WGE.ID('totalSprites').innerHTML = "Total Sprites: " + runningSpriteNum + "<br>" + "FPS " + (1000/gui.deltaTime).toFixed(1);
191 | }
192 | 
193 | document.body.setAttribute("onresize", "gui.onresize(event);");
194 | document.body.setAttribute("onload", "gui.initSprites();gui.start();setInterval(updateSpritesAndFPS, 1000);");
195 | 
196 | </script>
197 | 
198 | <div style="position:absolute;left:10px;top:10px;width:170px;height:auto;">
199 | <div style="width:100%;height:45px;background-color:#f00" id="totalSprites">
200 |  Initializing...
201 | </div>
202 | <script type="text/javascript">
203 | function setBlend(mode)
204 | {
205 | 	gui.context.enable(gui.context.BLEND);
206 | 	gui.context.blendFunc(gui.context.ONE, gui.context[mode]);
207 | }
208 | 
209 | </script>
210 | <input type="button" value="Sprite +10" style="width:100px" onclick="runningSpriteNum+=10; if(runningSpriteNum > maxSpriteNum) runningSpriteNum = maxSpriteNum;"><br>
211 | <input type="button" value="Sprite -10" style="width:100px" onclick="runningSpriteNum-=10; if(runningSpriteNum < 1) runningSpriteNum = 1;"><br>
212 | <input type="button" value="No blend" style="width:100px" onclick="gui.context.disable(gui.context.BLEND);"><br>
213 | <input type="button" value="add" style="width:100px" onclick="setBlend('ONE');"><br>
214 | <input type="button" value="1 - src_alpha" style="width:100px" onclick="setBlend('ONE_MINUS_SRC_ALPHA');"><br>
215 | <input type="button" value="1 - dst_alpha" style="width:100px" onclick="setBlend('ONE_MINUS_DST_ALPHA');"><br>
216 | <input type="button" value="1 - src_color" style="width:100px" onclick="setBlend('ONE_MINUS_SRC_COLOR');"><br>
217 | <input type="button" value="1 - dst_color" style="width:100px" onclick="setBlend('ONE_MINUS_DST_COLOR');"><br><br>
218 | <input type="button" value="sprite alpha+" style="width:100px" onclick="gui.spritesAlphaPlus(0.05);"><br>
219 | <input type="button" value="sprite alpha-" style="width:100px" onclick="gui.spritesAlphaPlus(-0.05);"><br><br>
220 | <input type="button" value="Y Rotation" style="width:100px" onclick="window.location='gui_test2.html'">
221 | </div>
222 | 
223 | <div style="display:none">
224 | <img src="../../res/png/0.png" id="test0">
225 | <img src="../../res/png/1.png" id="test1">
226 | <img src="../../res/png/2.png" id="test2">
227 | <img src="../../res/png/3.png" id="test3">
228 | <img src="../../res/png/4.png" id="test4">
229 | <img src="../../res/png/5.png" id="test5">
230 | <img src="../../res/png/6.png" id="test6">
231 | <img src="../../res/png/7.png" id="test7">
232 | <img src="../../res/png/8.png" id="test8">
233 | <img src="../../res/png/9.png" id="test9">
234 | <img src="../../res/png/10.png" id="test10">
235 | <img src="../../res/png/11.png" id="test11">
236 | <img src="../../res/png/12.png" id="test12">
237 | <img src="../../res/png/13.png" id="test13">
238 | </div>
239 | </body>
240 | </html>
241 | 


--------------------------------------------------------------------------------
/webgl/demos/sprite2dtest2.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 | <meta charset="utf-8">
  4 | <title>2D Sprite Test2</title>
  5 | <script type="text/javascript" src="../../wgeCore.js"></script>
  6 | <script type="text/javascript" src="../../wgeAlgorithm.js"></script>
  7 | <script type="text/javascript" src="../wgeSprite2d.js"></script>
  8 | <script type="text/javascript" src="../../wgeGUI.js"></script>
  9 | <script type="text/javascript" src="../wgeWebGL.js"></script>
 10 | 
 11 | </head>
 12 | 
 13 | <body>
 14 | 
 15 | <script type="text/javascript">
 16 | "use strict";
 17 | 
 18 | var maxSpriteNum = 500;
 19 | var runningSpriteNum = 50;
 20 | 
 21 | WGE.Sprite2d.ShaderDir = "../";
 22 | 
 23 | var MySprite = WGE.Class(WGE.Sprite2dExt,
 24 | {
 25 | 	dx : 0,
 26 | 	dy : 0,
 27 | 	drz : 0,
 28 | 	dry : 0,
 29 | 
 30 | 	randomize : function()
 31 | 	{
 32 | 		var w = this.canvas.width, h = this.canvas.height;
 33 | 
 34 | 		this.pos.data[0] = Math.random() * w;
 35 | 		this.pos.data[1] = Math.random() * h;
 36 | 		this.dx = Math.random() * 0.5 + 0.01;
 37 | 		this.dy = Math.random() * 0.5 + 0.01;
 38 | 		this.drz = Math.random() * 0.005 + 0.001;
 39 | 		this.dry = Math.random() * 0.005 + 0.001;
 40 | 	},
 41 | 
 42 | 	update : function(dt, boundingX, boundingY)
 43 | 	{
 44 | 		var d = this.pos.data;
 45 | 		d[0] += this.dx * dt;
 46 | 		d[1] += this.dy * dt;
 47 | 		this.rotateZ(this.drz * dt);
 48 | 		if(this.dry)
 49 | 			this.rotateY(this.dry * dt);
 50 | 
 51 | 		if(d[0] < 0)
 52 | 		{
 53 | 			d[0] = 0;
 54 | 			this.dx = -this.dx;
 55 | 		}
 56 | 		else if(d[0] > boundingX)
 57 | 		{
 58 | 			d[0] = boundingX;
 59 | 			this.dx = -this.dx;
 60 | 		}
 61 | 
 62 | 		if(d[1] < 0)
 63 | 		{
 64 | 			d[1] = 0;
 65 | 			this.dy = -this.dy;
 66 | 		}
 67 | 		else if(d[1] > boundingY)
 68 | 		{
 69 | 			d[1] = boundingY;
 70 | 			this.dy = -this.dy;
 71 | 		}
 72 | 
 73 | 	}
 74 | 
 75 | });
 76 | 
 77 | var MyGUI = WGE.Class(WGE.GUIInterface, 
 78 | {
 79 | 	context : undefined,
 80 | 	isMouseDown : false,
 81 | 	sprites : null,
 82 | 	deltaTime : 10,
 83 | 	x : 0,
 84 | 	y : 0,
 85 | 
 86 | 	bindFather : function(fatherObj)
 87 | 	{
 88 | 		if(WGE.GUIInterface.bindFather.call(this, fatherObj));
 89 | 		{
 90 | 			var context = this.canvas.getContext('experimental-webgl');
 91 | 			if(!context)
 92 | 			{
 93 | 				alert('你的浏览器不支持webgl啊，坟蛋！换一个好吗？');
 94 | 			}
 95 | 			this.context = context;
 96 | 			context.enable(context.BLEND);
 97 | 			context.blendFunc(context.ONE, context.ONE);
 98 | 			return !!this.context;
 99 | 		}
100 | 		return false;
101 | 	},
102 | 
103 | 	initSprites : function()
104 | 	{
105 | 		var sprites = [];
106 | 		var textures = [];
107 | 		var context = this.context;
108 | 		this.sprites = sprites;
109 | 		for(var i = 0; i != 14; ++i)
110 | 		{
111 | 			var img = WGE.ID('test' + i);
112 | 			var tex = new WGE.Texture2D(context);
113 | 			tex.initWithImg(img);
114 | 			textures.push(tex);
115 | 		}
116 | 
117 | 		for(var i = 0; i != maxSpriteNum; ++i)
118 | 		{
119 | 			var sprite = new MySprite(this.canvas, this.context);
120 | 			sprite.initSprite(textures[parseInt(Math.random() * textures.length)]);
121 | 			sprite.setAlpha(1.0 / maxSpriteNum + Math.random() * 0.2 + 0.1);
122 | 			sprite.setBlendColor(Math.random() * 2, Math.random() * 2, Math.random() * 2);
123 | 			sprite.setHotspot(Math.random() * 2 - 1, Math.random() * 2 - 1);
124 | 			sprite.randomize();
125 | 			sprites.push(sprite);
126 | 		}
127 | 
128 | 		sprites[0].setAlpha(1.0);
129 | 		//sprites[0].setHotspot(0, 0);
130 | 
131 | 		this.context.clearColor(0.0, 0.0, 0.0, 1.0);
132 | 	},
133 | 
134 | 	spritesAlphaPlus : function(value)
135 | 	{
136 | 		var sprites = this.sprites;
137 | 		for(var i = 0; i < runningSpriteNum; ++i)
138 | 		{
139 | 			var alpha = Math.max(Math.min(sprites[i]._alpha + value, 1.0), 0.001);
140 | 			sprites[i].setAlpha(alpha);
141 | 		}
142 | 	},
143 | 
144 | 	update : function(dt)
145 | 	{
146 | 		this.deltaTime = dt;
147 | 		var w = this.canvas.width, h = this.canvas.height;
148 | 		var sprites = this.sprites;
149 | 		for(var i = 1; i < runningSpriteNum; ++i)
150 | 		{
151 | 			sprites[i].update(dt, w, h);
152 | 		}
153 | 
154 | 		sprites[0].moveTo(this.x, this.y);
155 | 		sprites[0].rotateZ(sprites[0].drz * dt);
156 | 		sprites[0].rotateY(sprites[0].dry * dt);
157 | 	},
158 | 
159 | 	render : function()
160 | 	{
161 | 		this.context.clear(this.context.COLOR_BUFFER_BIT);
162 | 		var sprites = this.sprites;
163 | 		for(var i = 1; i < runningSpriteNum; ++i)
164 | 		{
165 | 			sprites[i].render();
166 | 		}
167 | 		sprites[0].render();
168 | 	},
169 | 
170 | 	mouseMoveEvent : function(e, x, y)
171 | 	{
172 | 		this.x = x;
173 | 		this.y = y;
174 | 	},
175 | 
176 | 	resizeEvent : function()
177 | 	{
178 | 		if(this.context)
179 | 		{
180 | 			this.context.viewport(0, 0, this.canvas.width, this.canvas.height);
181 | 			var sprites = this.sprites;
182 | 			for(var i in sprites)
183 | 			{
184 | 				sprites[i].onCanvasResize();
185 | 			}
186 | 		}
187 | 	}
188 | });
189 | 
190 | var div = WGE.CE('div');
191 | document.body.appendChild(div);
192 | div.setAttribute('style', "width: 100%; height:100%;");
193 | var gui = new MyGUI(div);
194 | 
195 | function updateSpritesAndFPS()
196 | {
197 | 	WGE.ID('totalSprites').innerHTML = "Total Sprites: " + runningSpriteNum + "<br>" + "FPS " + (1000/gui.deltaTime).toFixed(1);
198 | }
199 | 
200 | document.body.setAttribute("onresize", "gui.onresize(event);");
201 | document.body.setAttribute("onload", "gui.initSprites();gui.start();setInterval(updateSpritesAndFPS, 1000);");
202 | 
203 | </script>
204 | 
205 | <div style="position:absolute;left:10px;top:10px;width:170px;height:auto;">
206 | <div style="width:100%;height:45px;background-color:#f00" id="totalSprites">
207 |  Initializing...
208 | </div>
209 | <script type="text/javascript">
210 | function setBlend(mode)
211 | {
212 | 	gui.context.enable(gui.context.BLEND);
213 | 	gui.context.blendFunc(gui.context.ONE, gui.context[mode]);
214 | }
215 | 
216 | </script>
217 | <input type="button" value="Sprite +10" style="width:100px" onclick="runningSpriteNum+=10; if(runningSpriteNum > maxSpriteNum) runningSpriteNum = maxSpriteNum;"><br>
218 | <input type="button" value="Sprite -10" style="width:100px" onclick="runningSpriteNum-=10; if(runningSpriteNum < 1) runningSpriteNum = 1;"><br>
219 | <input type="button" value="No blend" style="width:100px" onclick="gui.context.disable(gui.context.BLEND);"><br>
220 | <input type="button" value="add" style="width:100px" onclick="setBlend('ONE');"><br>
221 | <input type="button" value="1 - src_alpha" style="width:100px" onclick="setBlend('ONE_MINUS_SRC_ALPHA');"><br>
222 | <input type="button" value="1 - dst_alpha" style="width:100px" onclick="setBlend('ONE_MINUS_DST_ALPHA');"><br>
223 | <input type="button" value="1 - src_color" style="width:100px" onclick="setBlend('ONE_MINUS_SRC_COLOR');"><br>
224 | <input type="button" value="1 - dst_color" style="width:100px" onclick="setBlend('ONE_MINUS_DST_COLOR');"><br><br>
225 | <input type="button" value="sprite alpha+" style="width:100px" onclick="gui.spritesAlphaPlus(0.05);"><br>
226 | <input type="button" value="sprite alpha-" style="width:100px" onclick="gui.spritesAlphaPlus(-0.05);"><br><br>
227 | <input type="button" value="No Y Rotation" style="width:100px" onclick="window.location='gui_test.html'">
228 | </div>
229 | 
230 | <div style="display:none">
231 | <img src="../../res/png/0.png" id="test0">
232 | <img src="../../res/png/1.png" id="test1">
233 | <img src="../../res/png/2.png" id="test2">
234 | <img src="../../res/png/3.png" id="test3">
235 | <img src="../../res/png/4.png" id="test4">
236 | <img src="../../res/png/5.png" id="test5">
237 | <img src="../../res/png/6.png" id="test6">
238 | <img src="../../res/png/7.png" id="test7">
239 | <img src="../../res/png/8.png" id="test8">
240 | <img src="../../res/png/9.png" id="test9">
241 | <img src="../../res/png/10.png" id="test10">
242 | <img src="../../res/png/11.png" id="test11">
243 | <img src="../../res/png/12.png" id="test12">
244 | <img src="../../res/png/13.png" id="test13">
245 | </div>
246 | </body>
247 | </html>
248 | 


--------------------------------------------------------------------------------
/webgl/demos/stencilTest.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | <meta charset="utf-8">
 4 | <title>simpleDemo</title>
 5 | <script type="text/javascript" src="../../wgeCore.js"></script>
 6 | <script type="text/javascript" src="../../wgeAlgorithm.js"></script>
 7 | <script type="text/javascript" src="../../wgeGUI.js"></script>
 8 | <script type="text/javascript" src="../wgeWebGL.js"></script>
 9 | <script type="text/javascript" src="../wgeScene.js"></script>
10 | <script type="text/javascript" src="../wgeSprite2d.js"></script>
11 | </head>
12 | 
13 | <body onload="main()">
14 | <script type="text/javascript">
15 | 
16 | function main()
17 | {
18 | 	var div = WGE.CE('div');
19 | 	document.body.appendChild(div);
20 | 	div.setAttribute('style', "width: 100%; height:100%;");
21 | 	var cvs = WGE.CE('canvas');
22 | 	cvs.width = 800;
23 | 	cvs.height = 600;
24 | 	var ctx = cvs.getContext('experimental-webgl', {stencil:true});
25 | 	div.appendChild(cvs);
26 | 
27 | 	var sprite = new WGE.Sprite2d(cvs, ctx);
28 | 	sprite.initSprite(WGE.ID("test0"));
29 | 	sprite.scaleTo(0.05, 0.05);
30 | 
31 | 	var sprite2 = new WGE.Sprite2d(cvs, ctx);
32 | 	sprite2.initSprite(WGE.ID("test1"));
33 | 	sprite2.moveTo(400, 300);
34 | 
35 | 	ctx.enable(ctx.STENCIL_TEST);
36 | 	ctx.clearStencil(0);
37 | 	ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.STENCIL_BUFFER_BIT);
38 | 	
39 | 	ctx.stencilFunc(ctx.NEVER, 1, 0xff);
40 | 	ctx.stencilOp(ctx.REPLACE, ctx.REPLACE, ctx.REPLACE);
41 | 	
42 | 	//绘制缓冲
43 | 	for(var i = 0; i < 100; ++i)
44 | 	{
45 | 		sprite.moveTo(800 * Math.random(), 600*Math.random());
46 | 		sprite.rotateTo(Math.random() * Math.PI);
47 | 		sprite.render();
48 | 	}	
49 | 
50 | 	ctx.stencilOp(ctx.REPLACE, ctx.KEEP, ctx.KEEP);
51 | 
52 | 	//恢复位置
53 | 	sprite.scaleTo(0.8, 0.8);
54 | 	sprite.moveTo(400, 300);
55 | 	sprite.rotateTo(0.0);
56 | 	ctx.stencilFunc(ctx.NOTEQUAL, 1, 0xff);
57 | 	sprite.render();
58 | 	ctx.stencilFunc(ctx.EQUAL, 1, 0xff);
59 | 	sprite2.render();
60 | }
61 | </script>
62 | <div style="display:none">
63 | <img src="../../res/comic0.jpg" id="test0">
64 | <img src="../../res/comic1.jpg" id="test1">
65 | </div>
66 | </body>
67 | </html>
68 | 


--------------------------------------------------------------------------------
/webgl/index.html:
--------------------------------------------------------------------------------
1 | <script type="text/javascript">
2 | window.location = "../index.html";
3 | </script>


--------------------------------------------------------------------------------
/webgl/models/cube.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * cube.js
 3 |  *
 4 |  *  Created on: 2014-8-13
 5 |  *    Author: Wang Yang
 6 |  *      blog: http://blog.wysaid.org
 7 |  */
 8 | 
 9 | //好吧，这个模型是我(wy)手动创建的。 木有版权，哈哈哈
10 | 
11 | WGE.CubeModel = {};
12 | WGE.CubeModel.mesh = new Float32Array(
13 | [1, 1, 1,  -1, 1, 1,  -1,-1, 1,  1,-1, 1, 
14 | 1, 1, 1,  1,-1, 1,  1,-1,-1,  1, 1,-1,
15 | 1, 1, 1,  1, 1,-1,  -1, 1,-1,  -1, 1, 1,
16 | -1, 1, 1,  -1, 1,-1,  -1,-1,-1,  -1,-1, 1,
17 | -1,-1,-1,  1,-1,-1,  1,-1, 1,  -1,-1, 1,
18 | 1,-1,-1,  -1,-1,-1,  -1, 1,-1,  1, 1,-1]);
19 | 
20 | WGE.CubeModel.meshDataSize = 3; //每个点包含三个分量。
21 | 
22 | WGE.CubeModel.meshIndex = new Uint16Array(
23 | [0, 1, 2,  0, 2, 3,
24 | 4, 5, 6,  4, 6, 7,
25 | 8, 9,10,  8,10,11,
26 | 12,13,14,  12,14,15,
27 | 16,17,18,  16,18,19,
28 | 20,21,22,  20,22,23]);
29 | 
30 | WGE.CubeModel.texMesh = new Float32Array(
31 | [1, 1,  0, 1,  0, 0,  1, 0,
32 | 0, 1,  0, 0,  1, 0,  1, 1,
33 | 1, 0,  1, 1,  0, 1,  0, 0,
34 | 1, 1,  0, 1,  0, 0,  1, 0,
35 | 0, 0,  1, 0,  1, 1,  0, 1,
36 | 0, 0,  1, 0,  1, 1,  0, 1]);
37 | 
38 | WGE.CubeModel.texMeshDataSize = 2;
39 | 
40 | WGE.CubeModel.normals = new Float32Array(
41 | [0, 0, 1,  0, 0, 1,  0, 0, 1,  0, 0, 1,
42 | 1, 0, 0,  1, 0, 0,  1, 0, 0,  1, 0, 0,
43 | 0, 1, 0,  0, 1, 0,  0, 1, 0,  0, 1, 0,
44 | -1, 0, 0,  -1, 0, 0,  -1, 0, 0,  -1, 0, 0,
45 | 0,-1, 0,  0,-1, 0,  0,-1, 0,  0,-1, 0,
46 | 0, 0,-1,  0, 0,-1,  0, 0,-1,  0, 0,-1]);
47 | 
48 | WGE.CubeModel.normalsDataSize = 3;


--------------------------------------------------------------------------------
/webgl/models/mesh2d.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * mesh2d.js
 3 |  *
 4 |  *  Created on: 2014-8-17
 5 |  *    Author: Wang Yang
 6 |  *      blog: http://blog.wysaid.org
 7 |  */
 8 | 
 9 | //这个模型是我(wy)手动创建的。 转载注明出处哦~ 好吧，请随意，其实无所谓的。
10 | 
11 | //参数含义： nx,ny 分别代表网格横竖方向的格子数量， w,h 代表网格最终实际宽高（默认为1)
12 | WGE.makeMesh2dModel = function(nx, ny, w, h)
13 | {
14 | 	if(!(w && h))
15 | 	{
16 | 		w = 1;
17 | 		h = 1;
18 | 	}
19 | 
20 | 	var mesh = {sizeX : nx, sizeY : ny, width : w, height : h};
21 | 
22 | 	var position = [];
23 | 	mesh.position = position;
24 | 
25 | 	var widthStep = w / nx;
26 | 	var heightStep = h / ny;
27 | 
28 | 	for(var i = 0; i < ny; ++i)
29 | 	{
30 | 		var heightI = i * heightStep;
31 | 		var index = ny * i;
32 | 
33 | 		for(var j = 0; j < nx; ++j)
34 | 		{
35 | 			
36 | 		}
37 | 	}
38 | 
39 | }


--------------------------------------------------------------------------------
/webgl/models/sphere.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * sphere.js
 3 |  *
 4 |  *  Created on: 2014-8-13
 5 |  *    Author: Wang Yang
 6 |  *      blog: http://blog.wysaid.org
 7 |  */
 8 | 
 9 | //@_@吃水不忘挖井人， 参考自 apple inc. 文档
10 | 
11 | WGE.makeSphere = function(rad, lats, height)
12 | {
13 | 	var pos = [], norm = [],
14 | 	    tex = [], indices = [];
15 | 
16 | 	for (var i = 0; i <= lats; ++i) {
17 |         for (var j = 0; j <= height; ++j) {
18 |             var theta = i * Math.PI / lats;
19 |             var phi = j * 2 * Math.PI / height;
20 |             var sinTheta = Math.sin(theta);
21 |             var sinPhi = Math.sin(phi);
22 |             var cosTheta = Math.cos(theta);
23 |             var cosPhi = Math.cos(phi);
24 | 
25 |             var x = cosPhi * sinTheta;
26 |             var y = cosTheta;
27 |             var z = sinPhi * sinTheta;
28 |             var u = 1-(j/height);
29 |             var v = i/lats;
30 | 
31 |             norm.push(x);
32 |             norm.push(y);
33 |             norm.push(z);
34 |             tex.push(u);
35 |             tex.push(v);
36 |             pos.push(rad * x);
37 |             pos.push(rad * y);
38 |             pos.push(rad * z);
39 |         }
40 |     }
41 | 
42 |     for (var i = 0; i < lats; ++i) {
43 |         for (var j = 0; j < height; ++j) {
44 |             var first = (i * (height+1)) + j;
45 |             var second = first + height + 1;
46 |             indices.push(first);
47 |             indices.push(second);
48 |             indices.push(first+1);
49 | 
50 |             indices.push(second);
51 |             indices.push(second+1);
52 |             indices.push(first+1);
53 |         }
54 |     }
55 | 
56 |     return {
57 | 		positions : new Float32Array(pos),
58 | 		normals : new Float32Array(norm),
59 | 		texCoords : new Float32Array(tex),
60 | 		indices : new Uint16Array(indices)
61 | 	};
62 | };


--------------------------------------------------------------------------------
/webgl/wgeFilters.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | /*
 3 |  * wgeFilters.js
 4 |  *
 5 |  *  Created on: 2014-8-5
 6 |  *      Author: Wang Yang
 7 |  *        blog: http://blog.wysaid.org
 8 |  */
 9 | 
10 | WGE.TextureBlendMode = 
11 | {
12 | 	BLEND_MIX : 0,			// 0
13 | 	BLEND_OVERLAY : 1,		// 1
14 | 	BLEND_HARDLIGHT : 2,		// 2
15 | 	BLEND_SOFTLIGHT : 3,		// 3
16 | 	BLEND_SCREEN : 4,		// 4
17 | 	BLEND_LINEARLIGHT : 5,	// 5
18 | 	BLEND_VIVIDLIGHT : 6,	// 6
19 | 	BLEND_MULTIPLY : 7,		// 7
20 | 	BLEND_EXCLUDE : 8,		// 8
21 | 	BLEND_COLORBURN : 9,		// 9
22 | 	BLEND_DARKEN : 10,		// 10
23 | 	BLEND_LIGHTEN : 11,		// 11
24 | 	BLEND_COLORDODGE : 12,	// 12
25 | 	BLEND_COLORDODGEADOBE : 13,// 13
26 | 	BLEND_LINEARDODGE : 14,	// 14
27 | 	BLEND_LINEARBURN : 15,	// 15
28 | 	BLEND_PINLIGHT : 16,		// 16
29 | 	BLEND_HARDMIX : 17,		// 17
30 | 	BLEND_DIFFERENCE : 18,	// 18
31 | 	BLEND_ADD : 19,			// 19
32 | 	BLEND_COLOR : 20,		// 20
33 | 
34 | 	/////////////    Special blend mode below     //////////////
35 | 
36 | 	BlEND_ADD_REVERSE : 21,	// 21
37 | 	BLEND_COLOR_BW : 22,		// 22
38 | 
39 | 	/////////////    Special blend mode above     //////////////
40 | 
41 | 	BLEND_MAX_NUM : 23 //Its value defines the max num of blend.
42 | };
43 | 
44 | WGE.TextureBlendModeName = 
45 | [
46 | "MIX",			// 0
47 | "OVERLAY",		// 1
48 | "HARDLIGHT",	// 2
49 | "SOFTLIGHT",	// 3
50 | "SCREEN",		// 4
51 | "LINEARLIGHT",	// 5
52 | "VIVIDLIGHT",	// 6
53 | "MULTIPLY",		// 7
54 | "EXCLUDE",		// 8
55 | "COLORBURN",		// 9
56 | "DARKEN",		// 10
57 | "LIGHTEN",		// 11
58 | "COLORDODGE",	// 12
59 | "COLORDODGEADOBE",// 13
60 | "LINEARDODGE",	// 14
61 | "LINEARBURN",	// 15
62 | "PINLIGHT",		// 16
63 | "HARDMIX",		// 17
64 | "DIFFERENCE",	// 18
65 | "ADD",			// 19
66 | "COLOR",			// 20
67 | 
68 | /////////////    Special blend mode below     //////////////
69 | 
70 | "ADD_REVERSE",	// 21
71 | "COLOR_BW",		// 22
72 | ];
73 | 
74 | WGE.getBlendNameByMode = function(blendMode)
75 | {
76 | 	if(blendMode < WGE.TextureBlendMode.BLEND_MIX || blendMode >= WGE.TextureBlendMode.BLEND_MAX_NUM)
77 | 	{
78 | 		return "Invalid Blend Mode";
79 | 	}
80 | 	return WGE.TextureBlendModeName[blendMode];
81 | };


--------------------------------------------------------------------------------
/webgl/wgeLerpBlurUtil.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | /*
  3 | * wgeLerpBlurUtil.js for webgl
  4 | *
  5 | *  Created on: 2018-1-5
  6 | *      Author: Wang Yang
  7 | *        Blog: http://blog.wysaid.org
  8 | */
  9 | 
 10 | WGE.LerpBlurUtil = WGE.Class({
 11 | 
 12 |     _context: null,
 13 |     _program: null,
 14 |     _frameBuffer: null,
 15 |     _intensity: null,
 16 |     _isBaseChanged: false,
 17 |     _texCache: null,
 18 |     _vertBuffer: null,
 19 | 
 20 |     _cacheTargetWidth: 0,
 21 |     _cacheTargetHeight: 0,
 22 | 
 23 |     MAX_LERP_BLUR_INTENSITY: 8,
 24 | 
 25 |     initialize: function (context) {
 26 |         var gl = this._context = context;
 27 |         var texCache = this._texCache = new Array(this.MAX_LERP_BLUR_INTENSITY);
 28 |         for (var i = 0; i < this.MAX_LERP_BLUR_INTENSITY; ++i) {
 29 |             texCache[i] = new WGE.LerpBlurUtil.TextureCache();
 30 |         }
 31 | 
 32 |         this._program = new WGE.Program(gl);
 33 |         this._program.bindAttribLocation("vPosition", 0);
 34 |         if (this._program.initWithShaderCode(WGE.TextureDrawer.vsh, WGE.TextureDrawer.fsh)) {
 35 |             this._isBaseChanged = true;
 36 |             this._vertBuffer = WGE.genCommonQuadArrayBuffer(gl);
 37 |             this._frameBuffer = new WGE.Framebuffer(gl);
 38 |         }
 39 |     },
 40 | 
 41 |     release: function () {
 42 |         if (this._context) {
 43 |             this._clearMipmaps();
 44 |             if (this._vertBuffer) {
 45 |                 this._context.deleteBuffer(this._vertBuffer);
 46 |             }
 47 | 
 48 |             if (this._program && this._program.release) {
 49 |                 this._program.release();
 50 |                 this._program = null;
 51 |             }
 52 |         }
 53 |     },
 54 | 
 55 |     setBlurLevel: function (value) {
 56 |         this._intensity = value;
 57 |         if (this._intensity > this.MAX_LERP_BLUR_INTENSITY) {
 58 |             this._intensity = this.MAX_LERP_BLUR_INTENSITY;
 59 |         }
 60 |     },
 61 | 
 62 |     calcWithTexture: function (texture, width, height) {
 63 |         var gl = this._context;
 64 |         gl.bindBuffer(gl.ARRAY_BUFFER, this._vertBuffer);
 65 |         gl.enableVertexAttribArray(0);
 66 |         gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
 67 |         gl.activeTexture(gl.TEXTURE0);
 68 |         this._program.bind()
 69 | 
 70 |         gl.disable(gl.BLEND);
 71 | 
 72 |         if (this._isBaseChanged || !(this._texCache && this._texCache[0].texture && this._cacheTargetWidth === width && this._cacheTargetHeight === height)) {
 73 |             this._cacheTargetWidth = width;
 74 |             this._cacheTargetHeight = height;
 75 |             this._genMipmaps(width, height);
 76 |             this._isBaseChanged = false;
 77 |             console.log("Lerp blur calc mipmap...");
 78 |         }
 79 | 
 80 |         var cache = this._texCache;
 81 |         var fbo = this._frameBuffer;
 82 |         fbo.bindColorTexture(cache[0].texture);
 83 |         gl.bindTexture(gl.TEXTURE_2D, texture);
 84 |         gl.viewport(0, 0, cache[0].width, cache[0].height);
 85 |         gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
 86 | 
 87 |         var i;
 88 | 
 89 |         //down scale
 90 |         for (i = 1; i < this._intensity; ++i) {
 91 |             var c = cache[i];
 92 |             fbo.bindColorTexture(c.texture);
 93 |             gl.viewport(0, 0, c.width, c.height);
 94 |             gl.bindTexture(gl.TEXTURE_2D, cache[i - 1].texture);
 95 |             gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
 96 |         }
 97 | 
 98 |         //up scale
 99 |         for (i = this._intensity - 1; i > 0; --i) {
100 |             var c = cache[i - 1];
101 |             fbo.bindColorTexture(c.texture);
102 |             gl.viewport(0, 0, c.width, c.height);
103 |             gl.bindTexture(gl.TEXTURE_2D, cache[i].texture);
104 |             gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
105 |         }
106 |     },
107 | 
108 |     getResult: function () {
109 |         if (this._texCache) {
110 |             return this._texCache[0].texture;
111 |         }
112 |         return null;
113 |     },
114 | 
115 |     drawTexture: function (texture) {
116 |         var gl = this._context;
117 |         this._program.bind();
118 |         gl.bindBuffer(gl.ARRAY_BUFFER, this._vertBuffer);
119 |         gl.enableVertexAttribArray(0);
120 |         gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
121 |         gl.activeTexture(gl.TEXTURE0);
122 |         gl.bindTexture(gl.TEXTURE_2D, texture);
123 |         gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
124 |     },
125 | 
126 |     _genMipmaps: function (width, height) {
127 |         var gl = this._context;
128 |         this._clearMipmaps();
129 |         for (var i = 0; i < this.MAX_LERP_BLUR_INTENSITY; ++i) {
130 |             var cache = this._texCache[i];
131 |             cache.width = this._calcLevel(width, i);
132 |             cache.height = this._calcLevel(height, i);
133 |             if (cache.width < 1) cache.width = 1;
134 |             if (cache.height < 1) cache.height = 1;
135 |             cache.texture = WGE.genBlankTexture(gl, cache.width, cache.height);
136 |         }
137 |     },
138 | 
139 |     _clearMipmaps: function () {
140 |         var gl = this._context;
141 |         if (gl) {
142 |             if (this._texCache) {
143 |                 for (var i in this._texCache) {
144 |                     var cache = this._texCache[i];
145 |                     if (cache.texture) {
146 |                         gl.deleteTexture(cache.texture);
147 |                         cache.texture = null;
148 |                         cache.width = 0;
149 |                         cache.height = 0;
150 |                     }
151 |                 }
152 |             }
153 |         }
154 |     },
155 | 
156 |     _sLevelList: [2, 3, 5, 7, 10, 14, 19, 26, 35],
157 | 
158 |     _calcLevel: function (len, level) {
159 |         var sLevelList = this._sLevelList;
160 |         return Math.floor(len / sLevelList[level]);
161 |     }
162 | });
163 | 
164 | WGE.LerpBlurUtil.TextureCache = WGE.Class({
165 |     texture: null,
166 |     width: 0,
167 |     height: 0
168 | });
169 | 
170 | WGE.createLerpBlurUtil = function (context) {
171 |     var util = new WGE.LerpBlurUtil(context);
172 |     if (!(util._program && util._vertBuffer)) {
173 |         util.release();
174 |         util = null;
175 |     }
176 |     return util;
177 | };


--------------------------------------------------------------------------------
/webgl/wgeMappingBlendUtil.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | /*
  3 | * wgeMappingUtil.js for webgl
  4 | *
  5 | *  Created on: 2018-1-5
  6 | *      Author: Wang Yang
  7 | *        Blog: http://blog.wysaid.org
  8 | */
  9 | 
 10 | WGE.MappingBlendUtil = WGE.Class(WGE.MappingUtil, {
 11 | 
 12 |     _lerpUtil: null,
 13 |     _bgTexture: null,
 14 | 
 15 |     _maskCoordLoc: null,
 16 |     _maskUpDirLoc: null,
 17 |     _maskFaceStepLoc: null,
 18 |     _radiusLoc: null,
 19 |     _vsh: null,
 20 |     _fsh: null,
 21 | 
 22 |     initialize: function (gl, keyPointSize, vsh, fsh) {
 23 |         this._shouldReleaseMaskTexture = false;
 24 |         this._vsh = vsh ? vsh : WGE.MappingBlendUtil.VSH;
 25 |         this._fsh = fsh ? fsh : WGE.MappingBlendUtil.FSH;
 26 | 
 27 |         WGE.MappingUtil.initialize.call(this, gl, keyPointSize, vsh, fsh);
 28 | 
 29 |         var program = this._program;
 30 | 
 31 |         if (program) {
 32 |             program.bind();
 33 |             program.sendUniform1i("maskTexture", 1);
 34 |             program.sendUniform1i("blurredOriginTexture", 2);
 35 |             program.sendUniform1i("backgroundTexture", 3);
 36 |             this._maskCoordLoc = program.uniformLocation("uMaskCoord");
 37 |             this._maskUpDirLoc = program.uniformLocation("maskUpDir");
 38 |             this._maskFaceStepLoc = program.uniformLocation("maskFaceStep");
 39 |             this._radiusLoc = program.uniformLocation("radius");
 40 |             this._context.uniform1f(this._radiusLoc, 1.0);
 41 |         }
 42 | 
 43 |         this._vsh = this._fsh = null;
 44 |     },
 45 | 
 46 |     setBGTexture: function (bgTexture) {
 47 |         this._bgTexture = bgTexture;
 48 |     },
 49 | 
 50 |     release: function () {
 51 |         var gl = this._context;
 52 | 
 53 |         if (gl) {
 54 |             if (this._lerpUtil && this._lerpUtil.release) {
 55 |                 this._lerpUtil.release();
 56 |                 this._lerpUtil = null;
 57 |             }
 58 | 
 59 |             if (this._bgTexture) {
 60 |                 if (this._bgTexture.release) {
 61 |                     this._bgTexture.release()
 62 |                 } else {
 63 |                     gl.deleteTexture(this._bgTexture);
 64 |                 }
 65 |             }
 66 |         }
 67 | 
 68 |         this._context = null;
 69 |     },
 70 | 
 71 |     getVSH: function () {
 72 |         return WGE.MappingBlendUtil.VSH;
 73 |     },
 74 | 
 75 |     getFSH: function () {
 76 |         return WGE.MappingBlendUtil.FSH;
 77 |     },
 78 | 
 79 |     calcBlurring: function (srcTexture, width, height) {
 80 |         if(!this._lerpUtil) {
 81 |             this._lerpUtil = WGE.createLerpBlurUtil(this._context);
 82 |             if(!this._lerpUtil) {
 83 |                 return false;
 84 |             }
 85 |         }
 86 | 
 87 |         this._lerpUtil.calcWithTexture(srcTexture, width, height);
 88 |         return true;
 89 |     },
 90 | 
 91 |     setRadius: function (radius) {
 92 |         this._program.bind();
 93 |         this._context.uniform1f(this._radiusLoc, radius);
 94 |     },
 95 | 
 96 |     runMeshMappingBlend: function (srcTexture, srcData, dstData) {
 97 |         if(!this._lerpUtil) {
 98 |             return;
 99 |         }
100 | 
101 |         var gl = this._context;
102 |         var srcBlurredTex = this._lerpUtil.getResult();
103 |         gl.activeTexture(gl.TEXTURE2);
104 |         gl.bindTexture(gl.TEXTURE_2D, srcBlurredTex);
105 |         gl.activeTexture(gl.TEXTURE3);
106 |         gl.bindTexture(gl.TEXTURE_2D, this._bgTexture ? this._bgTexture : srcBlurredTex);
107 |         this.runMeshMapping(srcTexture, srcData, dstData);
108 |     }
109 | 
110 | });
111 | 
112 | WGE.MappingBlendUtil.VSH = "attribute float vCoordPercent; uniform vec2 uPosition; uniform vec2 uTexCoord; uniform vec2 uMaskCoord; uniform vec2 srcUpDir; uniform vec2 dstUpDir; uniform vec2 maskUpDir; uniform vec2 srcFaceStep; uniform vec2 dstFaceStep; uniform vec2 maskFaceStep; varying vec2 dstFaceTexCoord; varying vec2 maskTexCoord; varying vec2 bgTexCoord; uniform float radius; mat2 mat2ZRotation(float rad){ float cosRad = cos(rad); float sinRad = sin(rad); return mat2(cosRad, sinRad, -sinRad, cosRad);} \n#ifndef PI\n#define PI 3.14159\n#endif\n void main(){ mat2 rot = mat2ZRotation(PI * 2.0 * vCoordPercent); vec2 srcPos = uTexCoord; vec2 dstPos = uPosition; vec2 maskPos = uMaskCoord; if(vCoordPercent >= 0.0) { srcPos += (srcUpDir * rot) * (srcFaceStep * radius); dstPos += (dstUpDir * rot) * (dstFaceStep * radius); maskPos += (maskUpDir * rot) * (maskFaceStep * radius); } dstFaceTexCoord = srcPos; maskTexCoord = maskPos; bgTexCoord = vec2(dstPos.x, 1.0 - dstPos.y); gl_Position = vec4(dstPos * 2.0 - 1.0, 0.0, 1.0);}";
113 | 
114 | WGE.MappingBlendUtil.FSH = "precision mediump float; varying vec2 dstFaceTexCoord; varying vec2 maskTexCoord; varying vec2 bgTexCoord; uniform sampler2D inputImageTexture; uniform sampler2D maskTexture; uniform sampler2D blurredOriginTexture; uniform sampler2D backgroundTexture; void main(){ vec4 color = vec4(texture2D(inputImageTexture, dstFaceTexCoord).rgb, 1.0); vec3 blurredColor = texture2D(blurredOriginTexture, dstFaceTexCoord).rgb; vec3 bgColor = texture2D(backgroundTexture, bgTexCoord).rgb; color.rgb += (bgColor - blurredColor) * 0.8; color *= texture2D(maskTexture, maskTexCoord).r; gl_FragColor = color;}";


--------------------------------------------------------------------------------
/webgl/wgeMappingUtil.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | /*
  3 | * wgeMappingUtil.js for webgl
  4 | *
  5 | *  Created on: 2017-12-25
  6 | *      Author: Wang Yang
  7 | *        Blog: http://blog.wysaid.org
  8 | */
  9 | 
 10 | WGE.MappingUtil = WGE.Class({
 11 |     _program: null,
 12 |     _coordPercentBuffer: null,
 13 |     _indexBuffer: null,
 14 |     _maskTexture: null,
 15 |     _keyPointSize: null,
 16 |     _meshSize: null,
 17 | 
 18 |     _srcUpDirLoc: null,
 19 |     _dstUpDirLoc: null,
 20 |     _srcPointLoc: null,
 21 |     _dstPointLoc: null,
 22 |     _context: null,
 23 |     _shouldReleaseMaskTexture: true,
 24 | 
 25 |     shouldReleaseMask: function (releaseMask) {
 26 |         this._shouldReleaseMaskTexture = releaseMask;
 27 |     },
 28 | 
 29 |     initialize: function (gl, keyPointSize) {
 30 | 
 31 |         keyPointSize = Math.floor(keyPointSize);
 32 | 
 33 |         this._context = gl;
 34 |         this._keyPointSize = keyPointSize;
 35 | 
 36 |         this._program = new WGE.Program(gl);
 37 |         var program = this._program;
 38 |         program.bindAttribLocation("vCoordPercent", 0);
 39 |         if (!program.initWithShaderCode(this.getVSH(), this.getFSH())) {
 40 |             console.log("MeshMapping Util init failed!");
 41 |             program.release();
 42 |             this._program = null;
 43 |             return;
 44 |         }
 45 | 
 46 |         program.bind();
 47 | 
 48 |         this._srcUpDirLoc = program.uniformLocation("srcUpDir");
 49 |         this._dstUpDirLoc = program.uniformLocation("dstUpDir");
 50 |         this._srcPointLoc = program.uniformLocation("uTexCoord");
 51 |         this._dstPointLoc = program.uniformLocation("uPosition");
 52 |         program.sendUniform1i("maskTexture", 1);
 53 | 
 54 |         this.setSrcUpDir(0.0, 1.0);
 55 |         this.setDstUpDir(0.0, 1.0);
 56 | 
 57 |         var percents = new Float32Array(keyPointSize);
 58 |         percents[0] = -1.0;
 59 | 
 60 |         for (var i = 1; i < keyPointSize; ++i) {
 61 |             percents[i] = (i - 1) / (keyPointSize - 2);
 62 |         }
 63 | 
 64 |         this._coordPercentBuffer = WGE.genBuffer(gl, gl.ARRAY_BUFFER, percents, gl.STATIC_DRAW);
 65 |     },
 66 | 
 67 |     release: function () {
 68 | 
 69 |         if (this._context) {
 70 | 
 71 |             var gl = this._context;
 72 | 
 73 |             if (this._program && this._program.release) {
 74 |                 this._program.release();
 75 |                 this._program = null;
 76 |             }
 77 | 
 78 |             if (this._coordPercentBuffer) {
 79 |                 gl.deleteBuffer(this._coordPercentBuffer);
 80 |                 this._coordPercentBuffer = null;
 81 |             }
 82 | 
 83 |             if (this._indexBuffer) {
 84 |                 gl.deleteBuffer(this._indexBuffer);
 85 |                 this._indexBuffer = null;
 86 |             }
 87 | 
 88 |             if (this._maskTexture) {
 89 |                 if (this._shouldReleaseMaskTexture) {
 90 |                     if (this._maskTexture.release) {
 91 |                         this._maskTexture.release();
 92 |                     } else {
 93 |                         gl.deleteTexture(this._maskTexture);
 94 |                     }
 95 |                 }
 96 |                 this._maskTexture = null;
 97 |             }
 98 | 
 99 |             this._context = null;
100 |         }
101 |     },
102 | 
103 |     setSrcUpDir: function (x, y) {
104 |         this._program.bind();
105 |         this._context.uniform2f(this._srcUpDirLoc, x, y);
106 |     },
107 | 
108 |     setDstUpDir: function (x, y) {
109 |         this._program.bind();
110 |         this._context.uniform2f(this._dstUpDirLoc, x, y);
111 |     },
112 | 
113 |     setSrcFaceSize: function (w, h) {
114 |         this._program.bind();
115 |         this._program.sendUniform2f("srcFaceStep", 1.0 / w, 1.0 / h);
116 |     },
117 | 
118 |     setDstCanvasSize: function (w, h) {
119 |         this._program.bind();
120 |         this._program.sendUniform2f("dstFaceStep", 1.0 / w, 1.0 / h);
121 |     },
122 | 
123 |     setMaskTexture: function (texture, maskUpDirX, maskUpDirY, maskPosX, maskPosY, maskTextureWidth, maskTextureHeight) {
124 |         var gl = this._context;
125 |         if (this._shouldReleaseMaskTexture && this._maskTexture && this._maskTexture !== texture) {
126 |             gl.deleteTexture(this._maskTexture);
127 |         }
128 | 
129 |         this._maskTexture = texture;
130 |         var program = this._program;
131 |         program.bind();
132 |         program.sendUniform2f("uMaskCoord", maskPosX, maskPosY);
133 |         program.sendUniform2f("maskUpDir", maskUpDirX, maskUpDirY);
134 |         program.sendUniform2f("maskFaceStep", 1.0 / maskTextureWidth, 1.0 / maskTextureHeight);
135 |     },
136 | 
137 |     getVSH: function () {
138 |         return WGE.MappingUtil.VSH;
139 |     },
140 | 
141 |     getFSH: function () {
142 |         return WGE.MappingUtil.FSH;
143 |     },
144 | 
145 |     runMeshMapping: function (srcTexture, srcData, dstData) {
146 | 
147 |         if (!srcTexture) {
148 |             console.log("invalid srcTexture");
149 |             return;
150 |         }
151 | 
152 |         var gl = this._context;
153 | 
154 |         if (!this._maskTexture) {
155 |             var buffer = new Uint8Array([0xff]);
156 |             this._maskTexture = WGE.genTextureWithData(gl, 1, 1, gl.LUMINANCE, gl.UNSIGNED_BYTE, buffer);
157 |             this.setMaskTexture(this._maskTexture, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0);
158 |         }
159 | 
160 |         this._program.bind();
161 | 
162 |         gl.uniform2f(this._srcPointLoc, srcData[0], srcData[1]);
163 |         gl.uniform2f(this._dstPointLoc, dstData[0], dstData[1]);
164 | 
165 |         gl.activeTexture(gl.TEXTURE0);
166 |         gl.bindTexture(gl.TEXTURE_2D, srcTexture);
167 | 
168 |         gl.activeTexture(gl.TEXTURE1);
169 |         gl.bindTexture(gl.TEXTURE_2D, this._maskTexture);
170 | 
171 |         gl.bindBuffer(gl.ARRAY_BUFFER, this._coordPercentBuffer);
172 |         gl.enableVertexAttribArray(0);
173 |         gl.vertexAttribPointer(0, 1, gl.FLOAT, false, 0, 0);
174 | 
175 |         gl.drawArrays(gl.TRIANGLE_FAN, 0, this._keyPointSize);
176 |     }
177 | 
178 | });
179 | 
180 | WGE.MappingUtil.VSH = " attribute float vCoordPercent; uniform vec2 uPosition; uniform vec2 uTexCoord; uniform vec2 uMaskCoord; uniform vec2 srcUpDir; uniform vec2 dstUpDir; uniform vec2 maskUpDir; uniform vec2 srcFaceStep; uniform vec2 dstFaceStep; uniform vec2 maskFaceStep; varying vec2 dstFaceTexCoord; varying vec2 maskTexCoord; const float radius = 2.0; mat2 mat2ZRotation(float rad){ float cosRad = cos(rad); float sinRad = sin(rad); return mat2(cosRad, sinRad, -sinRad, cosRad);}  const float PI = 3.14159;  void main(){ mat2 rot = mat2ZRotation(PI * 2.0 * vCoordPercent); vec2 srcPos = uTexCoord; vec2 dstPos = uPosition; vec2 maskPos = uMaskCoord; if(vCoordPercent >= 0.0) { srcPos += (srcUpDir * rot) * (srcFaceStep * radius); dstPos += (dstUpDir * rot) * (dstFaceStep * radius); maskPos += (maskUpDir * rot) * (maskFaceStep * radius); } dstFaceTexCoord = srcPos; maskTexCoord = maskPos; gl_Position = vec4(dstPos * 2.0 - 1.0, 0.0, 1.0);}";
181 | 
182 | WGE.MappingUtil.FSH = "" +
183 |     " precision mediump float; varying vec2 dstFaceTexCoord; varying vec2 maskTexCoord; uniform sampler2D inputImageTexture; uniform sampler2D maskTexture; void main() { vec4 color = vec4(texture2D(inputImageTexture, dstFaceTexCoord).rgb, 1.0); color *= texture2D(maskTexture, maskTexCoord).r; gl_FragColor = color;}";


--------------------------------------------------------------------------------
/webgl/wgeScene.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | /*
  3 |  * wgeScene.js
  4 |  *
  5 |  *  Created on: 2014-8-13
  6 |  *      Author: Wang Yang
  7 |  *        blog: http://blog.wysaid.org
  8 |  */
  9 | 
 10 |  /*
 11 |      简介： wgeScene提供WebGL场景漫游。
 12 |  */
 13 | 
 14 | //WGE.SceneInterface 并不提供多余的渲染方式等，仅维护模型视点矩阵以及投影矩阵
 15 | //所有的Sprite或者其他东西只要在WGE.Scene提供的世界观基础上变换，
 16 | //可保证整个世界的一致性。
 17 | 
 18 | //默认使用透视投影，如果需要平行投影请自己
 19 | //更多动作如跳跃等请继承此类实现。
 20 | 
 21 | //特别注意！ wgeScene 使用 xOy 平面作为漫游地面！z正方向为向上方向
 22 | WGE.SceneInterface = WGE.Class(
 23 | {
 24 | 	modelViewMatrix : null, //4x4 模型视点矩阵
 25 | 	projectionMatrix : null, //4x4 投影矩阵
 26 | 
 27 | 	eye : null,    // 当前视点位置(Vec3)。 默认(0, 0, 0)
 28 | 
 29 | 	// lookDir 为观测方向，默认(0, 1, 0)，x,y两个分量的模为1。 注： 不是观测位置。
 30 | 	// 如果需要手动修改lookDir 请保证dirLen大小与dir的x，y两个分量的模相等, 否则将影响移动速度。
 31 | 	lookDir : null,
 32 | 	dirLen : 1000,
 33 | 
 34 | 	fovyRad : Math.PI/3.0,  //视景体的视野的角度（单位：弧度）
 35 | 	zNear : 1.0,          //透视投影近裁剪面
 36 | 	zFar : 10000.0,       //透视投影远裁剪面
 37 | 
 38 | 	aspect : 1.0,         //保存显示区域宽高比
 39 | 	upDirRot : 0.0,       //向上仰角旋转弧度
 40 | 
 41 | 	maxLookUp : Math.PI/2.4, //最大仰角
 42 | 
 43 | 	initialize : function(w, h)
 44 | 	{
 45 | 		this.eye = new WGE.Vec3(0, 0, 0);
 46 | 		this.lookDir = new WGE.Vec3(0, 1000, 0);
 47 | 		this.updateView();
 48 | 		if(!(w && h))
 49 | 		{
 50 | 			w = 800;
 51 | 			h = 600;
 52 | 		}
 53 | 		this.resize(w, h);
 54 | 	},
 55 | 
 56 | 	//如果有任何移动旋转或者调整视野操作，
 57 | 	//之后必须调用updateView 函数 更新模型视点矩阵
 58 | 	updateView : function()
 59 | 	{
 60 | 		var eye = this.eye.data, lookDir = this.lookDir.data;
 61 | 		var centerX = eye[0] + lookDir[0], centerY = eye[1] + lookDir[1];
 62 | 		var len = Math.sqrt(lookDir[0]*lookDir[0] + lookDir[1]*lookDir[1]);
 63 | 		var tmp = -lookDir[2] / len;
 64 | 		var dirBackX = lookDir[0] * tmp, dirBackY = lookDir[1] * tmp;
 65 | 		var upDir = new WGE.Vec3(dirBackX, dirBackY, len);
 66 | 		
 67 | 		var upDirData;
 68 | 
 69 | 		if(this.upDirRot)
 70 | 		{
 71 | 			upDirData = WGE.mat3MulVec3(WGE.mat3Rotation(this.upDirRot, lookDir[0], lookDir[1], lookDir[2]), upDir).data;
 72 | 		}
 73 | 		else
 74 | 			upDirData = upDir.data;
 75 | 
 76 | 		this.modelViewMatrix = WGE.makeLookAt(eye[0], eye[1], eye[2], centerX, centerY, eye[2] + lookDir[2], upDirData[0], upDirData[1], upDirData[2]);
 77 | 	},
 78 | 
 79 | 	//默认透视投影
 80 | 	resize : function(w, h)
 81 | 	{
 82 | 		this.aspect = w / h;
 83 | 		this.updatePerspective();
 84 | 	},
 85 | 
 86 | 	updatePerspective : function()
 87 | 	{
 88 | 		this.projectionMatrix = WGE.makePerspective(this.fovyRad, this.aspect, this.zNear, this.zFar);
 89 | 	},
 90 | 
 91 | 	//设置视点位置
 92 | 	setEye : function(x, y, z)
 93 | 	{
 94 | 		var eye = this.eye.data;
 95 | 		eye[0] = x;
 96 | 		eye[1] = y;
 97 | 		eye[2] = z;
 98 | 	},
 99 | 
100 | 	//向右转（弧度）， 负值将向左转.
101 | 	turnRight : function(rad)
102 | 	{
103 | 		var d = this.lookDir.data;
104 | 		var v = WGE.mat2MulVec2(WGE.mat2Rotation(rad), this.lookDir).data;
105 | 		d[0] = v[0];
106 | 		d[1] = v[1];
107 | 	},
108 | 
109 | 	//向右旋转到（弧度）， 以Y轴正方向为起始方向。
110 | 	turnRightTo : function(rad)
111 | 	{
112 | 		var d = this.lookDir.data;
113 | 		d[0] = Math.sin(rad) * this.dirLen;
114 | 		d[1] = Math.cos(rad) * this.dirLen;
115 | 	},
116 | 
117 | 	//向上观察， motion计算关系：
118 | 	//向上弧度计算公式为 arctan(tan("当前向上弧度") + motion) - "当前向上弧度"
119 | 	lookUp : function(motion)
120 | 	{
121 | 		var z = this.lookDir.data[2] + motion * this.dirLen;
122 | 		var lookUpMax = this.dirLen * 3.732; //tan(PI / 75);
123 | 		if(z > lookUpMax) 
124 | 			z = lookUpMax;
125 | 		else if(z < -lookUpMax)
126 | 			z = -lookUpMax;
127 | 		this.lookDir.data[2] = z;
128 | 	},
129 | 
130 | 	//向上观察到（弧度），直接仰视到所看弧度
131 | 	//范围[-PI/2.4, PI/2.4] ，约正负75度角
132 | 	lookUpTo : function(rad)
133 | 	{
134 | 		if(rad > this.maxLookUp)
135 | 			rad = this.maxLookUp;
136 | 		else if(rad < -this.maxLookUp)
137 | 			rad = -this.maxLookUp;
138 | 		this.lookDir.data[2] = Math.tan(rad) * this.dirLen;
139 | 	},
140 | 
141 | 	//视野角度（弧度）， 范围[PI/100, PI/2.0]
142 | 	lookIn : function(rad)
143 | 	{
144 | 		this.fovyRad += rad;
145 | 		if(this.fovyRad < Math.PI / 100.0)
146 | 			this.fovyRad = Math.PI / 100.0;
147 | 		else if(this.fovyRad > Math.PI / 2.0)
148 | 			this.fovyRad = Math.PI / 2.0;
149 | 		this.updatePerspective();
150 | 	},
151 | 
152 | 	//视野角度， 范围[PI/100, PI/2.0]
153 | 	lookInTo : function(rad)
154 | 	{
155 | 		if(rad < Math.PI / 100.0)
156 | 			rad = Math.PI / 100.0;
157 | 		else if(rad > Math.PI / 2.0)
158 | 			rad = Math.PI / 2.0;
159 | 		this.fovyRad = rad;
160 | 		this.updatePerspective();
161 | 	},
162 | 
163 | 	//向前移动
164 | 	goForward : function(motion)
165 | 	{
166 | 		var m = motion / this.dirLen;
167 | 		this.eye.data[0] += this.lookDir.data[0] * m;
168 | 		this.eye.data[1] += this.lookDir.data[1] * m;
169 | 	},
170 | 
171 | 	//向后移动
172 | 	goBack : function(motion)
173 | 	{
174 | 		var m = motion / this.dirLen;
175 | 		this.eye.data[0] -= this.lookDir.data[0] * m;
176 | 		this.eye.data[1] -= this.lookDir.data[1] * m;
177 | 	},
178 | 
179 | 	//向左移动
180 | 	goLeft : function(motion)
181 | 	{
182 | 		var m = motion / this.dirLen;
183 | 		this.eye.data[0] -= this.lookDir.data[1] * m;
184 | 		this.eye.data[1] += this.lookDir.data[0] * m;
185 | 	},
186 | 
187 | 	//向右移动
188 | 	goRight : function(motion)
189 | 	{
190 | 		var m = motion / this.dirLen;
191 | 		this.eye.data[0] += this.lookDir.data[1] * m;
192 | 		this.eye.data[1] -= this.lookDir.data[0] * m;
193 | 	},
194 | 
195 | });


--------------------------------------------------------------------------------
/webgl/wgeSprite2d.fsh.txt:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * wgeSprite2d.fsh
 3 |  *
 4 |  *  Created on: 2014-8-6
 5 |  *      Author: Wang Yang
 6 |  *        Blog: http://blog.wysaid.org
 7 |  */
 8 | 
 9 | precision mediump float;
10 | varying vec2 vTextureCoord;
11 | uniform sampler2D sTexture;
12 | uniform float alpha;
13 | 
14 | void main()
15 | {
16 | 	gl_FragColor = texture2D(sTexture, vTextureCoord);
17 | 	gl_FragColor.a *= alpha;
18 | 	gl_FragColor.rgb *= gl_FragColor.a;
19 | }


--------------------------------------------------------------------------------
/webgl/wgeSprite2d.vsh.txt:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * wgeSprite2d.vsh
 3 |  *
 4 |  *  Created on: 2014-8-6
 5 |  *      Author: Wang Yang
 6 |  *        Blog: http://blog.wysaid.org
 7 |  */
 8 |  
 9 | //Range: [-1, 1]
10 | attribute vec2 aPosition; 
11 | varying vec2 vTextureCoord;
12 | uniform mat4 m4Projection;
13 | uniform vec2 v2HalfTexSize;
14 | 
15 | uniform float rotation;
16 | uniform vec2 v2Scaling;
17 | uniform vec2 v2Translation;
18 | uniform vec2 v2Hotspot;
19 | uniform vec2 canvasflip;
20 | uniform vec2 spriteflip;
21 | uniform float zIndex;
22 | 
23 | mat3 mat3ZRotation(float rad)
24 | {
25 |     float cosRad = cos(rad);
26 |     float sinRad = sin(rad);
27 |     return mat3(cosRad, sinRad, 0.0, -sinRad, cosRad, 0.0, 0.0, 0.0, 1.0);
28 | }
29 | 
30 | void main()
31 | {
32 | 	vTextureCoord = (aPosition.xy * spriteflip + 1.0) / 2.0;
33 | 	vec3 pos = mat3ZRotation(rotation) * vec3((aPosition - v2Hotspot) * v2HalfTexSize, zIndex);
34 | 	pos.xy = (pos.xy + v2Hotspot * v2HalfTexSize);
35 | 	pos.xy *= v2Scaling;
36 | 	pos.xy += v2Translation - v2Scaling * v2HalfTexSize * v2Hotspot;
37 | 	gl_Position = m4Projection * vec4(pos, 1.0);
38 | 	gl_Position.xy *= canvasflip;
39 | }


--------------------------------------------------------------------------------
/webgl/wgeSprite2dExt.fsh.txt:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * wgeSprite2d.fsh
 3 |  *
 4 |  *  Created on: 2014-8-6
 5 |  *      Author: Wang Yang
 6 |  *        Blog: http://blog.wysaid.org
 7 |  */
 8 | 
 9 | precision mediump float;
10 | varying vec2 vTextureCoord;
11 | uniform sampler2D sTexture;
12 | uniform float alpha;
13 | uniform vec3 blendColor;
14 | 
15 | void main()
16 | {
17 | 	gl_FragColor = texture2D(sTexture, vTextureCoord);
18 | 	gl_FragColor.a *= alpha;
19 | 	gl_FragColor.rgb *= gl_FragColor.a * blendColor;
20 | }


--------------------------------------------------------------------------------
/webgl/wgeSprite2dExt.vsh.txt:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * wgeSprite2dExt.vsh
 3 |  *
 4 |  *  Created on: 2014-8-6
 5 |  *      Author: Wang Yang
 6 |  *        Blog: http://blog.wysaid.org
 7 |  */
 8 |  
 9 | //Range: [-1, 1]
10 | attribute vec2 aPosition; 
11 | varying vec2 vTextureCoord;
12 | uniform mat4 m4Projection;
13 | uniform vec2 v2HalfTexSize;
14 | 
15 | uniform mat3 rotation;
16 | uniform vec2 v2Scaling;
17 | uniform vec2 v2Translation;
18 | uniform vec2 v2Hotspot;
19 | uniform vec2 canvasflip;
20 | uniform vec2 spriteflip;
21 | uniform float zIndex;
22 | 
23 | void main()
24 | {
25 | 	vTextureCoord = (aPosition.xy * spriteflip + 1.0) / 2.0;
26 | 	vec3 pos = rotation * vec3((aPosition - v2Hotspot) * v2HalfTexSize, zIndex);
27 | 	pos.xy = (pos.xy + v2Hotspot * v2HalfTexSize);
28 | 	pos.xy *= v2Scaling;
29 | 	pos.xy += v2Translation - v2Scaling * v2HalfTexSize * v2Hotspot;
30 | 	gl_Position = m4Projection * vec4(pos, 1.0);
31 | 	gl_Position.xy *= canvasflip;
32 | }


--------------------------------------------------------------------------------
/webgl/wgeSprite2dInterchange.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | /*
  3 | * wgeSprite2dSpriteInterchange.js for webgl
  4 | *
  5 | *  Created on: 2017-12-24
  6 | *      Author: Wang Yang
  7 | *        Blog: http://blog.wysaid.org
  8 | */
  9 | 
 10 | //对MxN 格式纹理进行支持
 11 | WGE.Sprite2dInterChange = WGE.Class(WGE.Sprite2d, {
 12 | 
 13 |     _paramViewAreaName: "viewArea",
 14 |     _viewAreaLoc: -1,
 15 | 
 16 |     initialize: function (canvas, ctx) {
 17 |         WGE.Sprite2d.initialize.apply(this, arguments);
 18 | 
 19 |         this._program.bind();
 20 |         this._viewAreaLoc = this._program.uniformLocation(this._paramViewAreaName);
 21 |         this._context.uniform4f(this._viewAreaLoc, 0.0, 0.0, 1.0, 1.0);
 22 | 
 23 |         WGE.checkGLErr("init sprite interchange...", this._context);
 24 |     },
 25 | 
 26 |     getVertexString: function () {
 27 |         return WGE.Sprite2dInterChange.VertexShader;
 28 |     },
 29 | 
 30 |     setViewArea: function (frame) {
 31 |         this._program.bind();
 32 |         this._context.uniform4f(this._viewAreaLoc, frame[0], frame[1], frame[2], frame[3]);
 33 |         // console.log(arguments);
 34 |     }
 35 | });
 36 | 
 37 | WGE.Sprite2dInterChange.VertexShader = "attribute vec2 aPosition;varying vec2 vTextureCoord;uniform mat4 m4Projection;uniform vec2 v2HalfTexSize;uniform float rotation;uniform vec2 v2Scaling;uniform vec2 v2Translation;uniform vec2 v2Hotspot;uniform vec2 canvasflip;uniform vec2 spriteflip;uniform float zIndex;uniform vec4 viewArea;mat2 mat2ZRotation(float rad){float cosRad = cos(rad);float sinRad = sin(rad);return mat2(cosRad, sinRad, -sinRad, cosRad);}void main(){vTextureCoord = ((aPosition.xy * spriteflip + 1.0) / 2.0) * viewArea.zw + viewArea.xy;vec2 texSize = v2HalfTexSize * viewArea.zw; vec2 hotspot = v2Hotspot * texSize;vec2 pos = mat2ZRotation(rotation) * ((aPosition * texSize - hotspot) * v2Scaling) + v2Translation;gl_Position = m4Projection * vec4(pos, zIndex, 1.0);gl_Position.xy *= canvasflip;}";
 38 | 
 39 | // WGE.Sprite2dInterChange.FragmentShader = WGE.Sprite2d.FragmentShader;
 40 | 
 41 | ////////////////////////////////////////
 42 | 
 43 | WGE.FrameTexture = WGE.Class({
 44 |     texture: null,
 45 |     width: 0,
 46 |     height: 0,
 47 |     col: 0,
 48 |     row: 0,
 49 |     count: 0
 50 | });
 51 | 
 52 | WGE.SpriteFrame = WGE.Class({
 53 |     frame: null,
 54 |     texture: null,
 55 |     initialize: function () {
 56 |         this.frame = [0.0, 0.0, 1.0, 1.0];
 57 |     }
 58 | });
 59 | 
 60 | WGE.Sprite2dInterChangeMultiple = WGE.Class(WGE.Sprite2dInterChange, {
 61 | 
 62 |     _vecTextures: null,
 63 |     _vecFrames: null,
 64 | 
 65 |     _frameIndex : 0,
 66 |     _deltaTime : 0.0,
 67 |     _deltaAccum : 0.0,
 68 |     _lastTime : 0.0,
 69 | 
 70 |     _shouldLoop : true,
 71 | 
 72 |     shouldReleaseTexture : true,
 73 |     width : 0,
 74 |     height : 0,
 75 | 
 76 |     initialize : function (canvas, ctx, width, height) {
 77 |         WGE.Sprite2dInterChange.initialize.call(this, canvas, ctx);
 78 | 
 79 |         //预设为空数组， 避免后面写很多无谓的容错代码.
 80 |         this._vecTextures = [];
 81 |         this._vecFrames = [];
 82 |         this.width = width;
 83 |         this.height = height;
 84 |     },
 85 | 
 86 |     release : function () {
 87 |         this._clearTextures();
 88 | 
 89 |         WGE.Sprite2dInterChange.release.apply(this);
 90 |     },
 91 | 
 92 |     nextFrame : function (offset) {
 93 |         if(this._vecFrames.length === 0) {
 94 |             return;
 95 |         }
 96 | 
 97 |         if(!offset) {
 98 |             offset = 1;
 99 |         }
100 | 
101 |         this._frameIndex += offset;
102 | 
103 |         if(this._frameIndex >= this._vecFrames.length) {
104 |             if(this._shouldLoop) {
105 |                 this._frameIndex = this._frameIndex % this._vecFrames.length;
106 |             } else {
107 |                 this._frameIndex = this._vecFrames.length - 1;
108 |             }
109 |         }
110 | 
111 |         this._setToFrame(this._vecFrames[this._frameIndex]);
112 |     },
113 | 
114 |     //根据时间间隔更新
115 |     updateFrame : function (delta) {
116 |         this._deltaAccum += delta;
117 |         if(this._deltaAccum > this._deltaTime) {
118 |             var cnt = parseInt(this._deltaAccum / this._deltaTime);
119 |             this.nextFrame(cnt);
120 |             this._deltaAccum -= this._deltaTime * cnt;
121 |         }
122 |     },
123 | 
124 |     //根据总时间更新
125 |     updateByTime: function (t) {
126 |         this.updateFrame(t - this._lastTime);
127 |         this._lastTime = t;
128 |     },
129 | 
130 |     setFrameDelayTime: function (dt) {
131 |         this._deltaTime = dt;
132 |     },
133 | 
134 |     //设置开始的总时间, 一般为当前时间
135 |     setFrameTime : function (t) {
136 |         this._lastTime = t;
137 |     },
138 | 
139 |     _setToFrame : function (frame) {
140 |         this.setViewArea(frame.frame);
141 |         this.texture = frame.texture;
142 |     },
143 | 
144 |     jumpToFrame : function (frameIndex) {
145 |         if(this._vecFrames.length === 0) {
146 |             return;
147 |         }
148 | 
149 |         if(frameIndex >= this._vecFrames.length) {
150 |             frameIndex = this._vecFrames.length - 1;
151 |         }
152 | 
153 |         this._frameIndex = frameIndex;
154 |         this._deltaAccum = 0.0;
155 |         this._setToFrame(this._vecFrames[frameIndex]);
156 |     },
157 | 
158 |     jumpToLastFrame : function () {
159 |         if(this._vecFrames.length !== 0) {
160 |             this._frameIndex = this._vecFrames.length - 1;
161 |         }
162 |     },
163 | 
164 |     isFirstFrame : function () {
165 |         return this._frameIndex === 0;
166 |     },
167 | 
168 |     isLastFrame : function () {
169 |         return this._frameIndex === this._vecFrames.length;
170 |     },
171 | 
172 |     setFrameTextures : function (frameTextures) {
173 |         this._clearTextures();
174 |         this._vecTextures = frameTextures;
175 |         this._calcFrames();
176 |     },
177 | 
178 |     enableLoop : function (shouldLoop) {
179 |         this._shouldLoop = shouldLoop;
180 |     },
181 | 
182 |     currentFrame : function () {
183 |         return this._frameIndex;
184 |     },
185 | 
186 |     totalFrames : function () {
187 |         return this._vecFrames.length;
188 |     },
189 | 
190 |     _clearTextures: function () {
191 | 
192 |         if (this._vecTextures) {
193 |             for (var i in this._vecTextures) {
194 |                 var frame = this._vecTextures[i];
195 |                 if (frame.texture) {
196 |                     if (frame.texture.release) {
197 |                         frame.texture.release();
198 |                     } else {
199 |                         this._context.deleteTexture(frame.texture);
200 |                     }
201 |                 }
202 |             }
203 | 
204 |             this._vecTextures = null;
205 |         }
206 |     },
207 | 
208 |     _calcFrames : function () {
209 | 
210 |         this._vecFrames = [];
211 | 
212 |         for(var i in this._vecTextures) {
213 |             var tex = this._vecTextures[i];
214 |             var total = tex.col * tex.row;
215 |             var frameWidth = 1.0 / tex.col;
216 |             var frameHeight = 1.0 / tex.row;
217 | 
218 |             if(tex.count < total) {
219 |                 total = tex.count;
220 |             }
221 | 
222 |             for(var j = 0; j !== total; ++j) {
223 |                 var frame = new WGE.SpriteFrame();
224 |                 frame.texture = tex.texture;
225 |                 frame.frame = [(j % tex.col) * frameWidth, Math.floor(j / tex.col) * frameHeight, frameWidth, frameHeight];
226 |                 this._vecFrames.push(frame);
227 |                 // console.log(frame.frame);
228 |             }
229 |         }
230 | 
231 |     }
232 | });
233 | 
234 | 
235 | 
236 | 
237 | 
238 | 
239 | 
240 | 
241 | 
242 | 
243 | 
244 | 
245 | 
246 | 
247 | 


--------------------------------------------------------------------------------
/webgl/wgeSprite3d.fsh.txt:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * wgeSprite.fsh
 3 |  *
 4 |  *  Created on: 2014-8-8
 5 |  *      Author: Wang Yang
 6 |  *        Blog: http://blog.wysaid.org
 7 |  */
 8 | 
 9 | precision mediump float;
10 | varying vec2 vTextureCoord;
11 | uniform sampler2D sTexture;
12 | 
13 | void main()
14 | {
15 | 	gl_FragColor = texture2D(sTexture, vTextureCoord);
16 | }


--------------------------------------------------------------------------------
/webgl/wgeSprite3d.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | /*
  3 | * wgeSprite3d.js for webgl
  4 | *
  5 | *  Created on: 2014-8-6
  6 | *      Author: Wang Yang
  7 | *        Blog: http://blog.wysaid.org
  8 | */
  9 | 
 10 | /*
 11 | 	本类只提供基础功能，需要更强大的功能需要自己继承定制。
 12 | */
 13 | 
 14 | //提示: zIndex 在Sprite3d中无意义，故不提供。开启OpenGL的深度测试即可。 
 15 | // 不直接提供 pos等参数，如果需要，则继承此类，并记录这些参数以使用。
 16 | //若要按远近先后混合，请在渲染前按远近顺序排序。
 17 | 
 18 | //同名参数含义请参考Sprite2d，为了减少篇幅，这里不再赘述
 19 | //内部包含set方法的参数，请使用set方法，不要直接修改参数值。
 20 | 
 21 | //与Sprite2d 的默认坐标系不同！
 22 | 
 23 | WGE.Sprite3d = WGE.Class(
 24 | {
 25 | 	canvas : null,
 26 | 	texture : null,
 27 | 
 28 | 	renderMethod : null, //渲染方式，默认为 gl.TRIANGLES.
 29 | 
 30 | 	_modelMatrix : null,  //4x4模型矩阵，内含sprite3d所包含模型所进行的所有矩阵转换操作。
 31 | 
 32 | 	_hotspot: null,
 33 | 
 34 | 	_program : null,
 35 | 	_context : null,
 36 | 	_textureRelease : true,
 37 | 	
 38 | 	_meshVBO : null,
 39 | 	_meshIndexVBO : null,
 40 | 	_textureVBO : null,
 41 | 	_vboNoRelease : false,
 42 | 	_meshIndexSize : null,
 43 | 	_vertexDataType : null,         //顶点数据类型，默认为 gl.FLOAT
 44 | 	_meshIndexDataType : null,    //索引数据类型，默认为 gl.UNSIGNED_SHORT
 45 | 	_meshDataSize : null,     //每个顶点所包含的分量，可选值为1,2,3,4，默认4
 46 | 	_texDataSize : null,      //每个纹理坐标所包含的分量，同上。
 47 | 	//定义attrib location
 48 | 	_vertAttribLoc : 0,
 49 | 	_texAttribLoc : 1,
 50 | 
 51 | 	//缓存一些可能用到的location
 52 | 	_mvpLoc : null,
 53 | 	_textureLoc : null,
 54 | 
 55 | 	//vsh和fsh表示自写的shader代码，可以自行定制。
 56 | 	initialize : function(canvas, ctx, vsh, fsh)
 57 | 	{
 58 | 		// this.pos = new WGE.Vec3(0, 0, 0);
 59 | 		// this.scaling = new WGE.Vec3(1, 1, 1);
 60 | 		// this._hotspot = new WGE.Vec3(0, 0, 0);
 61 | 		this._modelMatrix = WGE.mat4Identity();
 62 | 
 63 | 		this.canvas = canvas;
 64 | 		if(!canvas)
 65 | 		{
 66 | 		    console.error("Invalid Params while creating WGE.Sprite3d!");
 67 | 		}
 68 | 		var gl = ctx || WGE.webgl || this.canvas.getContext('webgl') || this.canvas.getContext('experimental-webgl');
 69 | 		this._context = gl;
 70 | 
 71 | 		if(!this.renderMethod)
 72 | 		{
 73 | 			this.renderMethod = gl.TRIANGLES;
 74 | 		}
 75 | 
 76 | 		if(vsh && fsh)
 77 | 		{
 78 | 			this._initProgram(vsh, fsh);
 79 | 		}
 80 | 		else
 81 | 		{
 82 | 			if(!WGE.Sprite3d.VertexShader)
 83 | 				WGE.Sprite3d.VertexShader = WGE.requestTextByURL(WGE.Sprite3d.ShaderDir + "wgeSprite3d.vsh.txt");
 84 | 			if(!WGE.Sprite3d.FragmentShader)
 85 | 				WGE.Sprite3d.FragmentShader = WGE.requestTextByURL(WGE.Sprite3d.ShaderDir + "wgeSprite3d.fsh.txt");
 86 | 			this._initProgram(WGE.Sprite3d.VertexShader, WGE.Sprite3d.FragmentShader);
 87 | 		}
 88 | 		this._meshVBO = gl.createBuffer();
 89 | 		this._meshIndexVBO = gl.createBuffer();
 90 | 		this._textureVBO = gl.createBuffer();
 91 | 		this._vertexDataType = gl.FLOAT;
 92 | 		this._meshIndexDataType = gl.UNSIGNED_SHORT;
 93 | 	},
 94 | 
 95 | 	release : function()
 96 | 	{
 97 | 		var gl = this._context;
 98 | 		if(this.texture && this.texture.release)
 99 | 			this.texture.release();
100 | 		this._program.release();
101 | 
102 | 		gl.deleteBuffer(this._meshVBO);
103 | 		gl.deleteBuffer(this._meshIndexVBO);
104 | 		gl.deleteBuffer(this._textureVBO);
105 | 
106 | 		this.canvas = this.texture = this._program = this._context = null;
107 | 	},
108 | 
109 | 	//仅简单渲染模型外形，如需要光照等请自行继承操作，重写shader。
110 | 	//vertexArr, texArr, indexArr 分别代表模型顶点数据，纹理坐标，面索引。
111 | 	//顶点数据，纹理坐标必须为 Array或者 Float32Array
112 | 	//面索引必须为 Array 或者 Uint16Array. 如果需要其他类型请自行重写本方法。
113 | 	//vertexDataSize 表示每个顶点包含几个分量， 范围为1,2,3,4
114 | 	//texDataSize 表示每个纹理坐标包含几个分量，范围为1,2,3,4
115 | 	//末尾两个参数将直接传递给 initTexture 函数
116 | 	initSprite : function(vertexArr, vertexDataSize, texArr, texDataSize, indexArr, tex, noRelease)
117 | 	{		
118 | 		var gl = this._context;
119 | 		var vertData = vertexArr instanceof Array ? new Float32Array(vertexArr) : vertexArr;
120 | 		gl.bindBuffer(gl.ARRAY_BUFFER, this._meshVBO);
121 | 		gl.bufferData(gl.ARRAY_BUFFER, vertData, gl.STATIC_DRAW);
122 | 
123 | 		var texData = texArr instanceof Array ? new Float32Array(texArr) : texArr;
124 | 		gl.bindBuffer(gl.ARRAY_BUFFER, this._textureVBO);
125 | 		gl.bufferData(gl.ARRAY_BUFFER, texData, gl.STATIC_DRAW);
126 | 
127 | 		var indexData = indexArr instanceof Array ? new Uint16Array(indexArr) : indexArr;
128 | 		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._meshIndexVBO);
129 | 		gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexData, gl.STATIC_DRAW);
130 | 
131 | 		this._meshIndexSize = indexArr.length;
132 | 		this._meshDataSize = vertexDataSize;
133 | 		this._texDataSize = texDataSize;
134 | 
135 | 		if(tex)
136 | 			this.initTexture(tex, noRelease);
137 | 		WGE.checkGLErr("WGE.Sprite3d.initSprite", gl);
138 | 	},
139 | 
140 | 	//使用已创建好的buffer来初始化sprite，标注noRelease以后说明这些buffer是共享的，不允许此对象删除。
141 | 	initBuffer : function(vertBuffer, vertexDataSize, texBuffer, texDataSize, vertIndexBuffer, noRelease)
142 | 	{
143 | 		this._meshVBO = vertBuffer;
144 | 		this._textureVBO = texBuffer;
145 | 		this._meshIndexVBO = vertIndexBuffer;
146 | 		this._meshDataSize = vertexDataSize;
147 | 		this._texDataSize = texDataSize;
148 | 		this._vboNoRelease = !!noRelease;
149 | 	},
150 | 
151 | 	//首参数为 WGE.Texture2D 时， 第二个参数表示是否在销毁本类的同时销毁 WGE.Texture2D
152 | 	//首参数为 img 对象时，第二个参数表示新创建的 WGE.Texture2D 的配置参数。详情参见WGE.Texture2D 构造函数。
153 | 	initTexture : function(tex, noRelease)
154 | 	{
155 | 		if(!tex)
156 | 			return false;
157 | 
158 | 		if(tex instanceof WGE.Texture2D)
159 | 		{
160 | 			this._textureRelease = !noRelease;
161 | 			this.texture = tex;
162 | 		}
163 | 		else
164 | 		{
165 | 			this._textureRelease = true;
166 | 			this.texture = new WGE.Texture2D(this._context, noRelease);
167 | 			this.texture.initWithImg(tex);
168 | 		}
169 | 		return true;
170 | 	},
171 | 
172 | 	//参数： 4x4矩阵，由整个世界给出，以确定当前sprite的局部。
173 | 	render : function(mvp)
174 | 	{
175 | 		var matrix = WGE.mat4Mul(mvp, this._modelMatrix);
176 | 		var gl = this._context;
177 | 		var program = this._program;
178 | 		program.bind();
179 | 		gl.uniformMatrix4fv(this._mvpLoc, false, matrix.data);
180 | 
181 | 		this.texture.bindToIndex(1); //index请随意~ 尽量不要大于7就好
182 | 		gl.uniform1i(this._textureLoc, 1);
183 | 
184 | 		gl.bindBuffer(gl.ARRAY_BUFFER, this._meshVBO);
185 | 		gl.enableVertexAttribArray(this._vertAttribLoc);
186 | 		gl.vertexAttribPointer(this._vertAttribLoc, this._meshDataSize, this._vertexDataType, false, 0, 0)
187 | 
188 | 		gl.bindBuffer(gl.ARRAY_BUFFER, this._textureVBO);
189 | 		gl.enableVertexAttribArray(this._texAttribLoc);
190 | 		gl.vertexAttribPointer(this._texAttribLoc, this._texDataSize, this._vertexDataType, false, 0, 0);
191 | 
192 | 		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._meshIndexVBO);
193 | 		gl.drawElements(this.renderMethod, this._meshIndexSize, this._meshIndexDataType, 0);
194 | 	},
195 | 
196 | 	translate : function(tx, ty, tz)
197 | 	{
198 | 		this.translateX(tx);
199 | 		this.translateY(ty);
200 | 		this.translateZ(tz);
201 | 	},
202 | 
203 | 	translateX : function(tx)
204 | 	{
205 | 		this._modelMatrix.translateX(tx);
206 | 	},
207 | 
208 | 	translateY : function(ty)
209 | 	{
210 | 		this._modelMatrix.translateY(ty);
211 | 	},
212 | 
213 | 	translateZ : function(tz)
214 | 	{
215 | 		this._modelMatrix.translateZ(tz);
216 | 	},
217 | 
218 | 	scale : function(sx, sy, sz)
219 | 	{
220 | 		this.scaleX(sx);
221 | 		this.scaleY(sy);
222 | 		this.scaleZ(sz);
223 | 	},
224 | 
225 | 	scaleX : function(sx)
226 | 	{
227 | 		this._modelMatrix.scaleX(sx);
228 | 	},
229 | 
230 | 	scaleY : function(sy)
231 | 	{
232 | 		this._modelMatrix.scaleY(sy);
233 | 	},
234 | 
235 | 	scaleZ : function(sz)
236 | 	{
237 | 		this._modelMatrix.scaleZ(sz);
238 | 	},
239 | 
240 | 	rotate : function(rad, x, y, z)
241 | 	{
242 | 		this._modelMatrix.rotate(rad, x, y, z);
243 | 	},
244 | 
245 | 	rotateX : function(rad)
246 | 	{
247 | 		this._modelMatrix.rotateX(rad);
248 | 	},
249 | 
250 | 	rotateY : function(rad)
251 | 	{
252 | 		this._modelMatrix.rotateY(rad);
253 | 	},
254 | 
255 | 	rotateZ : function(rad)
256 | 	{
257 | 		this._modelMatrix.rotateZ(rad);
258 | 	},
259 | 
260 | 	_initProgram : function(vsh, fsh)
261 | 	{
262 | 		var gl = this._context;
263 | 		var program = new WGE.Program(gl);
264 | 		this._program = program;
265 | 
266 | 		program.bindAttribLocation(WGE.Sprite3d.AttribVertexName, this._vertAttribLoc);
267 | 		program.bindAttribLocation(WGE.Sprite3d.AttribTextureName, this._texAttribLoc);
268 | 
269 | 		if(!program.initWithShaderCode(vsh, fsh))
270 | 		{
271 | 			console.error("WGE.Sprite3d : Program link Failed!");
272 | 			return false;
273 | 		}
274 | 
275 | 		program.bind();
276 | 
277 | 		this._mvpLoc = program.uniformLocation(WGE.Sprite3d.MVPName);
278 | 		this._textureLoc = program.uniformLocation(WGE.Sprite3d.TextureName);
279 | 		if(!(this._mvpLoc && this._textureLoc))
280 | 		{
281 | 			console.warn("WGE.Sprite3d : Not all uniform locations are correct!");
282 | 		}
283 | 
284 | 		WGE.checkGLErr("WGE.Sprite3d - init program", gl);
285 | 		return true;
286 | 	}
287 | 
288 | 
289 | 
290 | });
291 | 
292 | WGE.Sprite3d.VertexShader = "varying vec2 vTextureCoord;attribute vec4 aPosition;attribute vec4 aTexCoord;uniform mat4 mvp;void main(){gl_Position = mvp * aPosition;vTextureCoord = aTexCoord.st;}";
293 | 
294 | WGE.Sprite3d.FragmentShader = "precision mediump float;varying vec2 vTextureCoord;uniform sampler2D sTexture;void main(){gl_FragColor = texture2D(sTexture,vTextureCoord);}";
295 | 
296 | WGE.Sprite3d.AttribVertexName = "aPosition";
297 | WGE.Sprite3d.AttribTextureName = "aTexCoord";
298 | WGE.Sprite3d.TextureName = "sTexture";
299 | WGE.Sprite3d.MVPName = "mvp";


--------------------------------------------------------------------------------
/webgl/wgeSprite3d.vsh.txt:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * wgeSprite3d.vsh
 3 |  *
 4 |  *  Created on: 2014-8-8
 5 |  *      Author: Wang Yang
 6 |  *        Blog: http://blog.wysaid.org
 7 |  */
 8 | 
 9 | varying vec2 vTextureCoord;
10 | attribute vec4 aPosition;
11 | attribute vec4 aTexCoord;
12 | 
13 | uniform mat4 mvp;
14 | 
15 | void main()
16 | {	
17 | 	gl_Position = mvp * aPosition;
18 | 	vTextureCoord = aTexCoord.st;
19 | }


--------------------------------------------------------------------------------
/wgeAnimation.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | /*
  3 | * wgeAnimation.js
  4 | *
  5 | *  Created on: 2014-7-25
  6 | *      Author: Wang Yang
  7 | *        Blog: http://blog.wysaid.org
  8 | */
  9 | 
 10 | 
 11 | // TimeActionInterface 定义了Time line可能会用到的公共函数，
 12 | // 这些函数在子类中如果需要用到的话则必须实现它！
 13 | // TimeActionInterface 不计算动作是否开始或者结束
 14 | WGE.TimeActionInterface = WGE.Class(
 15 | {
 16 | 	// 为了方便统一计算， percent 值域范围必须为[0, 1]， 内部计算时请自行转换。
 17 | 	act : function(percent) {},
 18 | 
 19 | 	// 为Action开始做准备工作，比如对一些属性进行复位。(非必须)
 20 | 	actionStart : function() {},
 21 | 
 22 | 	// Action结束之后的扫尾工作，比如将某物体设置运动结束之后的状态。
 23 | 	actionStop : function() {},
 24 | 
 25 | 	bind : function(obj) { this.bindObj = obj; }, // 将动作绑定到某个实际的对象。
 26 | 
 27 | 	// 在一次TimeAttrib中重复的次数, 对某些操作比较有用，如旋转
 28 | 	repeatTimes : 1,
 29 | 	bindObj : undefined,
 30 | 
 31 | 	// 注意：这里的时间是相对于某个 SpriteAnimation自身的时间，而不是整个时间轴的时间！
 32 | 	tStart : 0, //起始时间
 33 | 	tEnd : 0 //结束时间
 34 | });
 35 | 
 36 | WGE.AnimationInterface2d = WGE.Class(
 37 | {
 38 | 	startTime : undefined,
 39 | 	endTime : undefined,
 40 | 	timeActions : undefined, //action数组，将在规定时间内完成指定的动作
 41 | 	actions2Run : undefined, //时间轴启动后，未完成的action。
 42 | 
 43 | 	initialize : function(startTime, endTime)
 44 | 	{
 45 | 		this.setAttrib(startTime, endTime);
 46 | 		this.timeActions = [];
 47 | 	},
 48 | 
 49 | 	setAttrib : function(tStart, tEnd)
 50 | 	{
 51 | 		this.startTime = parseFloat(tStart);
 52 | 		this.endTime = parseFloat(tEnd);
 53 | 	},
 54 | 
 55 | 	push : function(action)
 56 | 	{
 57 | 		if(action.bind)
 58 | 			action.bind(this);
 59 | 		this.timeActions.push(action);
 60 | 	},
 61 | 
 62 | 	pushArr : function(actions)
 63 | 	{
 64 | 		for(var i in actions)
 65 | 		{
 66 | 			if(actions[i].bind)
 67 | 				actions[i].bind(this);
 68 | 			this.timeActions.push(actions[i]);
 69 | 		}
 70 | 	},
 71 | 
 72 | 	clear : function()
 73 | 	{
 74 | 		this.timeActions = [];
 75 | 	},
 76 | 
 77 | 	run : function(totalTime)
 78 | 	{
 79 | 		var time = totalTime - this.startTime;
 80 | 		var running = false;
 81 | 
 82 | 		var len = this.actions2Run.length;
 83 | 		var hasDelete = false;
 84 | 
 85 | 		for(var i = 0; i != len; ++i)
 86 | 		{
 87 | 			var action = this.actions2Run[i];
 88 | 			if(!action) continue;
 89 | 
 90 | 			if(time >= action.tEnd)
 91 | 			{
 92 | 				action.actionStop();
 93 | 				delete this.actions2Run[i];
 94 | 				hasDelete = true;
 95 | 			}
 96 | 			else if(time > action.tStart)
 97 | 			{
 98 | 				var t = (time - action.tStart) / (action.tEnd - action.tStart);
 99 | 				action.act(t);
100 | 			}
101 | 
102 | 			running = true;
103 | 		}
104 | 
105 | 		if(hasDelete)
106 | 		{
107 | 			var newArr = [];
108 | 			var arr = this.actions2Run;
109 | 			for(var i = 0; i != len; ++i)
110 | 			{
111 | 				if(arr[i])
112 | 					newArr.push(arr[i]);
113 | 			}
114 | 			this.actions2Run = newArr;
115 | 		}
116 | 
117 | 		return running;
118 | 	},
119 | 
120 | 	//进度跳转
121 | 	runTo : function(time)
122 | 	{
123 | 
124 | 	},
125 | 
126 | 	//启动时将action复位。
127 | 	timeStart : function()
128 | 	{
129 | 		for(var i = 0; i != this.timeActions.length; ++i)
130 | 		{
131 | 			this.timeActions[i].actionStart();
132 | 		}
133 | 		this.actions2Run = WGE.clone(this.timeActions);
134 | 	},
135 | 
136 | 	//结束时将action设置为结束状态
137 | 	timeUp : function()
138 | 	{
139 | 		for(var i = 0; i != this.actions2Run.length; ++i)
140 | 		{
141 | 			this.actions2Run[i].actionStop();
142 | 		}
143 | 		this.actions2Run = undefined;
144 | 	}
145 | });
146 | 
147 | WGE.AnimationWithChildrenInterface2d = WGE.Class(WGE.AnimationInterface2d,
148 | {
149 | 	childSprites : null, //js特殊用法，扩展了对action的更新。
150 | 
151 | 	run : function(totalTime)
152 | 	{
153 | 		WGE.AnimationInterface2d.run.call(this, totalTime);
154 | 
155 | 		for(var i in this.childSprites)
156 | 		{
157 | 			this.childSprites[i].run(totalTime);
158 | 		}
159 | 	},
160 | 
161 | 	//进度跳转
162 | 	runTo : function(time)
163 | 	{
164 | 		WGE.AnimationInterface2d.runTo.call(this, time);
165 | 		for(var i in childSprites)
166 | 		{
167 | 			this.childSprites[i].runTo(time);
168 | 		}
169 | 	},
170 | 
171 | 	//启动时将action复位。
172 | 	timeStart : function()
173 | 	{
174 | 		WGE.AnimationInterface2d.timeStart.call(this);
175 | 		for(var i in this.childSprites)
176 | 		{
177 | 			this.childSprites[i].timeStart();
178 | 		}
179 | 	},
180 | 
181 | 	//结束时将action设置为结束状态
182 | 	timeUp : function()
183 | 	{
184 | 		WGE.AnimationInterface2d.timeUp.call(this);
185 | 		for(var i in this.childSprites)
186 | 		{
187 | 			this.childSprites[i].timeUp();
188 | 		}
189 | 	}
190 | 
191 | });
192 | 
193 | 
194 | //特殊用法, 不包含sprite的任何功能，仅仅作为管理那些特殊单独存在的action的容器。
195 | 
196 | WGE.AnimationActionManager = WGE.Class(WGE.AnimationInterface2d,
197 | {
198 | 	zIndex : -10000,
199 | 
200 | 	initialize : function(startTime, endTime)
201 | 	{
202 | 		this.setAttrib(startTime, endTime);
203 | 		this.timeActions = [];
204 | 	},
205 | 
206 | 	push : function()
207 | 	{
208 | 		this.timeActions.push.apply(this, arguments);
209 | 	},
210 | 
211 | 	pushArr : function(arr)
212 | 	{
213 | 		this.timeActions.push.call(this.timeActions, arr);
214 | 	}
215 | 
216 | });
217 | 
218 | 
219 | /*
220 | // AnimationSprite 定义了某个时间段的动作。
221 | // AnimationSprite 与 TimeActionInterface 为包含关系，
222 | // 一个 AnimationSprite 包含一个或多个 TimeActionInterface或者其子类.
223 | // AnimationSprite 及其子类 根据action起始时间，计算动作开始或者结束
224 | 
225 | //以下为AnimationSprite 实现原型，本身是一个完整的sprite
226 | WGE.AnimationSprite = WGE.Class(WGE.Sprite*, WGE.AnimationInterface2d,
227 | {
228 | 	initialize : function(startTime, endTime, img, w, h)
229 | 	{
230 | 		this.setAttrib(startTime, endTime);
231 | 		this.timeActions = [];
232 | 		if(img)
233 | 		{
234 | 			this.initSprite(img, w, h);
235 | 		}
236 | 	}
237 | });
238 | */
239 | 
240 | //时间轴
241 | WGE.TimeLine = WGE.Class(
242 | {
243 | 	currentTime : 0.0,
244 | 	totalTime : 0.0,
245 | 	timeObjects : undefined,
246 | 	isStarted : false,
247 | 	//动画开始后等待绘制的所有timeObjects(已经结束绘制的将被剔除队列)
248 | 	ObjectsWait2Render : undefined,
249 | 	//每一帧要绘制的timeObjects，将按z值排序，并筛选掉不需要绘制的节点。
250 | 	Objects2Render : undefined, 
251 | 
252 | 	initialize : function(totalTime)
253 | 	{
254 | 		this.totalTime = parseFloat(totalTime);
255 | 		this.timeObjects = [];
256 | 	},
257 | 
258 | 	push : function()
259 | 	{
260 | 		this.timeObjects.push.apply(this.timeObjects, arguments);
261 | 		
262 | 		if(this.isStarted)
263 | 		{
264 | 			this.timeObjects.sort(function(a, b){
265 | 				return a.startTime - b.startTime;
266 | 			});
267 | 		}
268 | 	},
269 | 
270 | 	pushArr : function(attribArr)
271 | 	{
272 | 		this.timeObjects.push.apply(this.timeObjects, attribArr);
273 | 
274 | 		if(this.isStarted)
275 | 		{
276 | 			this.timeObjects.sort(function(a, b){
277 | 				return a.startTime - b.startTime;
278 | 			});
279 | 		}
280 | 	},
281 | 
282 | 	clear : function()
283 | 	{
284 | 		this.timeObjects = [];
285 | 	},
286 | 
287 | 	//startTime可不填，默认为0
288 | 	start : function(startTime)
289 | 	{
290 | 		this.isStarted = true;
291 | 		this.currentTime = parseFloat(startTime ? startTime : 0);
292 | 
293 | 		this.timeObjects.sort(function(a, b){
294 | 			return a.startTime - b.startTime;
295 | 		});
296 | 
297 | 		this.ObjectsWait2Render = WGE.clone(this.timeObjects);
298 | 
299 | 		for(var i = 0; i != this.ObjectsWait2Render.length; ++i)
300 | 		{
301 | 			this.ObjectsWait2Render[i].timeStart();
302 | 		}
303 | 		this.Objects2Render = this.ObjectsWait2Render;
304 | 	},
305 | 
306 | 	//将整个画面设置为结束状态
307 | 	end : function()
308 | 	{
309 | 		this.isStarted = false;
310 | 	},
311 | 
312 | 	//根据时间变化更新，请保证 time > 0。
313 | 	//update之前请先调用start函数确保画面初始化。
314 | 	update : function(deltaTime)
315 | 	{
316 | 		if(!this.isStarted)
317 | 			return false;
318 | 		this.Objects2Render = [];
319 | 		this.currentTime += deltaTime;
320 | 		if(this.currentTime > this.totalTime)
321 | 			return false;
322 | 		
323 | 		var time = this.currentTime;
324 | 		var running = false;
325 | 		var len = this.ObjectsWait2Render.length;
326 | 		var hasDelete = false;
327 | 
328 | 		for(var i = 0; i != len; ++i)
329 | 		{
330 | 			var anim = this.ObjectsWait2Render[i];
331 | 			if(!anim) continue;
332 | 
333 | 			running = true;
334 | 						
335 | 			if(time >= anim.endTime)
336 | 			{
337 | 				anim.timeUp();
338 | 				//并不是所有的动作都需要渲染
339 | 				if(anim.render)
340 | 					this.Objects2Render.push(anim);
341 | 				delete this.ObjectsWait2Render[i];
342 | 				hasDelete = true;
343 | 			}
344 | 			else if(time > anim.startTime)
345 | 			{
346 | 				anim.run(time);
347 | 				this.Objects2Render.push(anim);
348 | 			}
349 | 			else break; //所有事件已经通过起始时间排序，若中间某一个事件起始时间未达到，则后面的均未达到。
350 | 		}
351 | 
352 | 		if(hasDelete)
353 | 		{
354 | 			var newArr = [];
355 | 			var arr = this.ObjectsWait2Render;
356 | 			for(var i = 0; i != len; ++i)
357 | 			{
358 | 				if(arr[i])
359 | 					newArr.push(arr[i]);
360 | 			}
361 | 			this.ObjectsWait2Render = newArr;
362 | 		}
363 | 
364 | 		return running;
365 | 	},
366 | 
367 | 	//进度跳转， 要对整个时间轴进行插值计算，可能速度较慢
368 | 	updateTo : function(currentTime)
369 | 	{
370 | 
371 | 	},
372 | 
373 | 	render : function(ctx)
374 | 	{
375 | 		this.Objects2Render.sort(function(a, b){return a.zIndex - b.zIndex;});
376 | 		for(var i = 0; i != this.Objects2Render.length; ++i)
377 | 		{
378 | 			var anim = this.Objects2Render[i];
379 | 			anim.render(ctx);
380 | 		}
381 | 	},
382 | 
383 | 	getProgressRate : function()
384 | 	{
385 | 		return this.currentTime / this.totalTime;
386 | 	},
387 | 
388 | 	getCurrentTime : function()
389 | 	{
390 | 		return this.currentTime;
391 | 	}
392 | 
393 | });


--------------------------------------------------------------------------------
/wgeColor.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/wgeColor.js


--------------------------------------------------------------------------------
/wgeFont.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/wgeFont.js


--------------------------------------------------------------------------------
/wgeNoteList.txt:
--------------------------------------------------------------------------------
 1 | WGE 开发笔记(记录一些开发过程中发现的问题以及较大的变更，如目录更改等)：
 2 | 
 3 | ========= 2014 - 8 - 26 Wang Yang =====================
 4 | 1. 特殊用法，将 WGE.ClassInitWithArr 作为第一个参数传递给一个 WGE.Class 构造时，initialize 将使用第二个参数(数组) 作为整个initialize 的参数。灵活性较强。
 5 | 2. 本次改动不影响任何其他模块
 6 | 
 7 | ========= 2014 - 8 - 21 Wang Yang =====================
 8 | 1.  新增 extends 目录，放置一些扩展功能
 9 | 
10 | ========= 2014 - 8 - 14 Wang Yang =====================
11 | 1.  safari(webgl) 不支持某些尺寸的不规则图片， 如1024*853。
12 |     修正： 暂时将图片缩小到 500*416。（不算真正解决，需要后续了解）
13 |     推测： safari比较笨，看到1024觉得宽是2的幂，高也应该是，所以出错。


--------------------------------------------------------------------------------
/wgeParticleSystem.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wysaid/wge/045fa24caa78be5b82f61ed988555632198ad494/wgeParticleSystem.js


--------------------------------------------------------------------------------