h2d base working, material properties as well

.gitignore

@@ -8,3 +8,4 @@
 /samples/comps/arial.ttf
 /engine.js
 /engine.js.map
+/samples/2d/demo.js

h2d/Drawable.hx

@@ -20,12 +20,12 @@ private class DrawableShader extends h3d.impl.Shader {
 		var skew : Float;
 		var zValue : Float;
 
-		function vertex( size : Float3, mat1 : Float3, mat2 : Float3 ) {
+		function vertex( size : Float3, matA : Float3, matB : Float3 ) {
 			var tmp : Float4;
 			var spos = input.pos.xyw;
 			if( size != null ) spos *= size;
-			tmp.x = spos.dp3(mat1);
-			tmp.y = spos.dp3(mat2);
+			tmp.x = spos.dp3(matA);
+			tmp.y = spos.dp3(matB);
 			tmp.z = zValue;
 			tmp.w = skew != null ? 1 - skew * input.pos.y : 1;
 			out = tmp;
@@ -74,6 +74,50 @@ private class DrawableShader extends h3d.impl.Shader {
 
 
 	}
+	
+	#elseif js
+	
+	static var VERTEX = "
+	
+		attribute vec2 pos;
+		attribute vec2 uv;
+
+		uniform vec3 size;
+		uniform vec3 matA;
+		uniform vec3 matB;
+		uniform lowp float zValue;
+		
+		varying lowp vec2 tuv;
+
+		void main(void) {
+			vec3 spos = vec3(pos.xy,1.0) * size;
+			vec4 tmp;
+			tmp.x = dot(spos,matA);
+			tmp.y = dot(spos,matB);
+			tmp.z = zValue;
+			tmp.w = 1.;
+			gl_Position = tmp;
+			tuv = uv;
+		}
+
+	";
+	
+	static var FRAGMENT = "
+	
+		varying lowp vec2 tuv;
+		uniform sampler2D tex;
+		
+		const bool hasAlpha = true;
+		uniform lowp float alpha;
+	
+		void main(void) {
+			lowp vec4 col = texture2D(tex, tuv);
+			if( hasAlpha ) col.w *= alpha;
+			gl_FragColor = col;
+		}
+			
+	";
+	
 	#end
 }
 
@@ -274,16 +318,16 @@ class Drawable extends Sprite {
 		var cm = writeAlpha ? 15 : 7;
 		if( mat.colorMask != cm ) mat.colorMask = cm;
 		
-		var tmp = core.tmpMat1;
+		var tmp = core.tmpMatA;
 		tmp.x = matA;
 		tmp.y = matC;
 		tmp.z = absX + tile.dx * matA + tile.dy * matC;
-		shader.mat1 = tmp;
-		var tmp = core.tmpMat2;
+		shader.matA = tmp;
+		var tmp = core.tmpMatB;
 		tmp.x = matB;
 		tmp.y = matD;
 		tmp.z = absY + tile.dx * matB + tile.dy * matD;
-		shader.mat2 = tmp;
+		shader.matB = tmp;
 		shader.tex = tile.getTexture();
 		mat.shader = shader;
 		engine.selectMaterial(mat);

h2d/Tools.hx

@@ -2,8 +2,8 @@ package h2d;
 
 private class CoreObjects  {
 	
-	public var tmpMat1 : h3d.Vector;
-	public var tmpMat2 : h3d.Vector;
+	public var tmpMatA : h3d.Vector;
+	public var tmpMatB : h3d.Vector;
 	public var tmpSize : h3d.Vector;
 	public var tmpUVPos : h3d.Vector;
 	public var tmpUVScale : h3d.Vector;
@@ -15,8 +15,8 @@ private class CoreObjects  {
 	var emptyTexture : h3d.mat.Texture;
 	
 	public function new() {
-		tmpMat1 = new h3d.Vector();
-		tmpMat2 = new h3d.Vector();
+		tmpMatA = new h3d.Vector();
+		tmpMatB = new h3d.Vector();
 		tmpColor = new h3d.Vector();
 		tmpSize = new h3d.Vector();
 		tmpUVPos = new h3d.Vector();

h3d/impl/WebglDriver.hx

@@ -13,15 +13,18 @@ class WebglDriver extends Driver {
 	
 	var curAttribs : Int;
 	var curShader : Shader.ShaderInstance;
+	var curMatBits : Int;
 	
 	public function new() {
+		curAttribs = 0;
 		canvas = cast js.Browser.document.getElementById("webgl");
 		if( canvas == null ) throw "Canvas #webgl not found";
 		gl = canvas.getContextWebGL();
 		if( gl == null ) throw "Could not acquire GL context";
 		// debug if webgl_debug.js is included
 		untyped if( __js__('typeof')(WebGLDebugUtils) != "undefined" ) gl = untyped WebGLDebugUtils.makeDebugContext(gl);
-		gl.enable(GL.DEPTH_TEST);
+		curMatBits = -1;
+		selectMaterial(0);
 	}
 	
 	override function reset() {
@@ -30,8 +33,44 @@ class WebglDriver extends Driver {
 	}
 	
 	override function selectMaterial( mbits : Int ) {
-		gl.depthFunc(GL.LESS);
-		gl.cullFace(GL.BACK);
+		var diff = curMatBits ^ mbits;
+		if( diff == 0 )
+			return;
+		if( diff & 3 != 0 ) {
+			if( mbits & 3 == 0 )
+				gl.disable(GL.CULL_FACE);
+			else {
+				if( curMatBits & 3 == 0 ) gl.enable(GL.CULL_FACE);
+				gl.cullFace(FACES[mbits&3]);
+			}
+		}
+		if( diff & (0xFF << 6) != 0 ) {
+			var src = (mbits >> 6) & 15;
+			var dst = (mbits >> 10) & 15;
+			if( src == 0 && dst == 1 )
+				gl.disable(GL.BLEND);
+			else {
+				if( curMatBits < 0 || (curMatBits >> 6) & 0xFF == 0x10 ) gl.enable(GL.BLEND);
+				gl.blendFunc(BLEND[src], BLEND[dst]);
+			}
+		}
+	
+		if( diff & (15 << 2) != 0 ) {
+			var write = (mbits >> 2) & 1 == 1;
+			if( curMatBits < 0 || diff & 4 != 0 ) gl.depthMask(write);
+			var cmp = (mbits >> 3) & 7;
+			if( cmp == 0 )
+				gl.disable(GL.DEPTH_TEST);
+			else {
+				if( curMatBits < 0 || (curMatBits >> 3) & 7 == 0 ) gl.enable(GL.DEPTH_TEST);
+				gl.depthFunc(COMPARE[cmp]);
+			}
+		}
+			
+		if( diff & (15 << 14) != 0 )
+			gl.colorMask((mbits >> 14) & 1 != 0, (mbits >> 14) & 2 != 0, (mbits >> 14) & 4 != 0, (mbits >> 14) & 8 != 0);
+			
+		curMatBits = mbits;
 	}
 	
 	override function clear( r : Float, g : Float, b : Float, a : Float ) {
@@ -166,11 +205,16 @@ class WebglDriver extends Driver {
 		function compileShader(name, type) {
 			var code = Reflect.field(cl, name);
 			if( code == null ) throw "Missing " + Type.getClassName(cl) + "." + name + " shader source";
+			code = StringTools.trim(code);
 			var s = gl.createShader(type);
 			gl.shaderSource(s, code);
 			gl.compileShader(s);
-			if( !gl.getShaderParameter(s, GL.COMPILE_STATUS) )
-				throw "An error occurred compiling the shaders: " + gl.getShaderInfoLog(s);
+			if( !gl.getShaderParameter(s, GL.COMPILE_STATUS) ) {
+				var log = gl.getShaderInfoLog(s);
+				var line = code.split("\n")[Std.parseInt(log.substr(9)) - 1];
+				if( line == null ) line = "" else line = "(" + StringTools.trim(line) + ")";
+				throw "An error occurred compiling the shaders: " + log + line;
+			}
 			return s;
 		}
 		var vs = compileShader("VERTEX", GL.VERTEX_SHADER);
@@ -265,6 +309,17 @@ class WebglDriver extends Driver {
 				gl.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MAG_FILTER, flags[0]);
 				gl.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MIN_FILTER, flags[1]);
 				gl.uniform1i(u.loc, u.index);
+			case Float:
+				gl.uniform1f(u.loc, val);
+			case Vec2:
+				var v : h3d.Vector = val;
+				gl.uniform2f(u.loc, v.x, v.y);
+			case Vec3:
+				var v : h3d.Vector = val;
+				gl.uniform3f(u.loc, v.x, v.y, v.z);
+			case Vec4:
+				var v : h3d.Vector = val;
+				gl.uniform4f(u.loc, v.x, v.y, v.z, v.w);
 			default:
 				throw "Unsupported uniform " + u.type;
 			}
@@ -306,6 +361,42 @@ class WebglDriver extends Driver {
 		[[GL.NEAREST,GL.NEAREST_MIPMAP_LINEAR],[GL.LINEAR,GL.LINEAR_MIPMAP_LINEAR]],
 	];
 	
+	static var FACES = [
+		0,
+		GL.FRONT, // front/back reversed wrt stage3d
+		GL.BACK,
+		GL.FRONT_AND_BACK,
+	];
+	
+	static var BLEND = [
+		GL.ZERO,
+		GL.ONE,
+		GL.SRC_ALPHA,
+		GL.SRC_COLOR,
+		GL.DST_ALPHA,
+		GL.DST_COLOR,
+		GL.ONE_MINUS_SRC_ALPHA,
+		GL.ONE_MINUS_SRC_COLOR,
+		GL.ONE_MINUS_DST_ALPHA,
+		GL.ONE_MINUS_DST_COLOR,
+		GL.CONSTANT_COLOR,
+		GL.CONSTANT_ALPHA,
+		GL.ONE_MINUS_CONSTANT_COLOR,
+		GL.ONE_MINUS_CONSTANT_ALPHA,
+		GL.SRC_ALPHA_SATURATE,
+	];
+	
+	static var COMPARE = [
+		GL.ALWAYS,
+		GL.NEVER,
+		GL.EQUAL,
+		GL.NOTEQUAL,
+		GL.GREATER,
+		GL.GEQUAL,
+		GL.LESS,
+		GL.LEQUAL,
+	];
+
 }
 
 #end

h3d/mat/Data.hx

@@ -18,6 +18,12 @@ enum Blend {
 	OneMinusSrcColor;
 	OneMinusDstAlpha;
 	OneMinusDstColor;
+	// only supported on WebGL
+	ConstantColor;
+	ConstantAlpha;
+	OneMinusConstantColor;
+	OneMinusConstantAlpha;
+	SrcAlphaSaturate;
 }
 
 enum Compare {

hxd/Resource.hx

@@ -35,8 +35,7 @@ abstract BitmapRes(String) {
 		}
 	}
 	public function toTile() : h2d.Tile {
-		throw "TODO";
-		return null;
+		return h2d.Tile.fromTexture(toTexture());
 	}
 }
 

index.html

@@ -1,5 +1,5 @@
 <html>
-<body style="margin:0;padding:0">
+<body style="margin:0;padding:0;background-color:black">
 	
 	<canvas id="webgl" style="width:100%;height:100%"></canvas>
 	<script type="text/javascript" src="webgl-debug.js"></script>

samples/2d/Demo.hx

@@ -7,18 +7,20 @@ class Demo {
 	function new() {
 		engine = new h3d.Engine();
 		engine.onReady = init;
-		engine.backgroundColor = 0;
+		engine.backgroundColor = 0xFF000000;
 		engine.init();
 	}
 	
 	function init() {
 		scene = new h2d.Scene();
 		
+		#if flash
 		var font = new h2d.Font("Arial", 16);
 		var tf = new h2d.Text(font, scene);
 		tf.textColor = 0xFFFFFF;
 		tf.dropShadow = { dx : 2, dy : 2, color : 0xFF0000, alpha : 0.5 };
 		tf.text = "Hello h2d !";
+		#end
 		
 		var tile = hxd.Resource.embed("texture.png").toTile();
 		spr = new h2d.Sprite(scene);

samples/2d/index.html

@@ -0,0 +1,8 @@
+<html>
+<body style="margin:0;padding:0;background-color:black">
+	
+	<canvas id="webgl" style="width:100%;height:100%"></canvas>
+	<script type="text/javascript" src="demo.js"></script>
+	
+</body>
+</html>