|
|
@@ -0,0 +1,98 @@
|
|
|
+<html>
|
|
|
+ <script src="../../build/spine-webgl.js"></script>
|
|
|
+ <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
|
|
|
+ <style>
|
|
|
+ * { margin: 0; padding: 0; }
|
|
|
+ body, html { height: 100% }
|
|
|
+ canvas { width: 640px ;height: 640px; }
|
|
|
+ </style>
|
|
|
+ <body>
|
|
|
+ <canvas id="canvas" style="background: #ff00ff;"></canvas>
|
|
|
+ <div>
|
|
|
+ <div><label>Light: </label><input type="text" value="ffffffff" id="light"></div>
|
|
|
+ <div><label>Dark: </label><input type="text" value="000000" id="dark"></div>
|
|
|
+ <div><label>PMA blend:</label><input type="checkbox" id="pmaBlend"></div>
|
|
|
+ <div><label>PMA texture:</label><input type="checkbox" id="pmaTexture"></div>
|
|
|
+ <div><label>Ivan's shader:</label><input type="checkbox" id="ivan"></div>
|
|
|
+ </div>
|
|
|
+ </body>
|
|
|
+ <script>
|
|
|
+
|
|
|
+ $("#light").change(function() {
|
|
|
+ var light = $("#light").val();
|
|
|
+ var r = parseInt(light.substr(0,2),16) / 255;
|
|
|
+ var g = parseInt(light.substr(2,2),16) / 255;
|
|
|
+ var b = parseInt(light.substr(4,2),16) / 255;
|
|
|
+ var a = parseInt(light.substr(6,2),16) / 255;
|
|
|
+
|
|
|
+ for (var i = 0, j = 2; i < 4; i++, j+=12) {
|
|
|
+ vertices[j] = r;
|
|
|
+ vertices[j+1] = g;
|
|
|
+ vertices[j+2] = b;
|
|
|
+ vertices[j+3] = a;
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ $("#dark").change(function() {
|
|
|
+ var dark = $("#dark").val();
|
|
|
+ var r = parseInt(dark.substr(0,2),16) / 255;
|
|
|
+ var g = parseInt(dark.substr(2,2),16) / 255;
|
|
|
+ var b = parseInt(dark.substr(4,2),16) / 255;
|
|
|
+
|
|
|
+ for (var i = 0, j = 8; i < 4; i++, j+=12) {
|
|
|
+ vertices[j] = r;
|
|
|
+ vertices[j+1] = g;
|
|
|
+ vertices[j+2] = b;
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ var canvas = document.getElementById("canvas");
|
|
|
+ canvas.width = canvas.clientWidth;
|
|
|
+ canvas.height = canvas.clientHeight;
|
|
|
+ var context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false });
|
|
|
+ var gl = context.gl;
|
|
|
+
|
|
|
+ var vertices = [ -1, -1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0,
|
|
|
+ 1, -1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0,
|
|
|
+ 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0,
|
|
|
+ -1, 1, 1, 1, 1, 1, 0, 1, 0, 0, 0, 0];
|
|
|
+ var indices = [ 0, 1, 2, 2, 3, 0 ];
|
|
|
+
|
|
|
+ var shader = spine.webgl.Shader.newTwoColoredTextured(context);
|
|
|
+
|
|
|
+ var assetManager = new spine.webgl.AssetManager(context);
|
|
|
+ assetManager.loadTexture("assets/spineboy.png");
|
|
|
+ assetManager.loadTexture("assets/spineboy-pma.png");
|
|
|
+
|
|
|
+ var camMatrix = new spine.webgl.Matrix4();
|
|
|
+
|
|
|
+ var batcher = new spine.webgl.PolygonBatcher(context, true);
|
|
|
+
|
|
|
+ requestAnimationFrame(load);
|
|
|
+
|
|
|
+ function load () {
|
|
|
+ if (assetManager.isLoadingComplete()) {
|
|
|
+ texture = assetManager.get("assets/spineboy.png");
|
|
|
+ texturePma = assetManager.get("assets/spineboy-pma.png");
|
|
|
+ requestAnimationFrame(render);
|
|
|
+ } else requestAnimationFrame(load);
|
|
|
+ }
|
|
|
+
|
|
|
+ function render() {
|
|
|
+ gl.clearColor(1, 0, 1, 1);
|
|
|
+ gl.clear(gl.COLOR_BUFFER_BIT);
|
|
|
+
|
|
|
+ shader.bind();
|
|
|
+ shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, camMatrix.values);
|
|
|
+ shader.setUniformi("u_texture", 0);
|
|
|
+ if (texture != null) {
|
|
|
+ batcher.setBlendMode($("#pmaBlend").prop("checked") ? context.gl.ONE : context.gl.SRC_ALPHA, context.gl.ONE_MINUS_SRC_ALPHA)
|
|
|
+ batcher.begin(shader);
|
|
|
+ batcher.draw($("#pmaTexture").prop("checked") ? texturePma : texture, vertices, indices);
|
|
|
+ batcher.end();
|
|
|
+ }
|
|
|
+ shader.unbind();
|
|
|
+
|
|
|
+ requestAnimationFrame(render);
|
|
|
+ }
|
|
|
+ </script>
|
badlogic
