Skip to content

Commit

Permalink
use mat4 for projection; reset unpack premultiply alpha setting
Browse files Browse the repository at this point in the history
  • Loading branch information
@flyover
flyover committed Dec 15, 2015
1 parent 2dd683d commit 2c4d598
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 19 deletions.
10 changes: 5 additions & 5 deletions demo/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -352,16 +352,16 @@ main.start = function ()
if (gl)
{
var gl_projection = render_webgl.gl_projection;
mat3x3Identity(gl_projection);
mat3x3Ortho(gl_projection, -gl.canvas.width/2, gl.canvas.width/2, -gl.canvas.height/2, gl.canvas.height/2);
mat4x4Identity(gl_projection);
mat4x4Ortho(gl_projection, -gl.canvas.width/2, gl.canvas.width/2, -gl.canvas.height/2, gl.canvas.height/2, -1, 1);

if (enable_render_ctx2d && enable_render_webgl)
{
mat3x3Translate(gl_projection, gl.canvas.width/4, 0);
mat4x4Translate(gl_projection, gl.canvas.width/4, 0, 0);
}

mat3x3Translate(gl_projection, -camera_x, -camera_y);
mat3x3Scale(gl_projection, camera_zoom, camera_zoom);
mat4x4Translate(gl_projection, -camera_x, -camera_y, 0);
mat4x4Scale(gl_projection, camera_zoom, camera_zoom, camera_zoom);

if (enable_render_webgl)
{
Expand Down
98 changes: 84 additions & 14 deletions demo/render-webgl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,30 +12,30 @@ renderWebGL = function (gl)
render.bone_info_map = {};
render.skin_info_map = {};
render.gl_textures = {};
render.gl_projection = mat3x3Identity(new Float32Array(9));
render.gl_projection = mat4x4Identity(new Float32Array(16));
render.gl_modelview = mat3x3Identity(new Float32Array(9));
render.gl_tex_matrix = mat3x3Identity(new Float32Array(9));
render.gl_color = vec4Identity(new Float32Array(4));
var gl_mesh_shader_vs_src =
[
"precision mediump int;",
"precision mediump float;",
"uniform mat3 uProjection;",
"uniform mat4 uProjection;",
"uniform mat3 uModelview;",
"uniform mat3 uTexMatrix;",
"attribute vec2 aVertexPosition;", // [ x, y ]
"attribute vec2 aVertexTexCoord;", // [ u, v ]
"varying vec3 vTexCoord;",
"void main(void) {",
" vTexCoord = uTexMatrix * vec3(aVertexTexCoord, 1.0);",
" gl_Position = vec4(uProjection * uModelview * vec3(aVertexPosition, 1.0), 1.0);",
" gl_Position = uProjection * vec4(uModelview * vec3(aVertexPosition, 1.0), 1.0);",
"}"
];
var gl_ffd_mesh_shader_vs_src =
[
"precision mediump int;",
"precision mediump float;",
"uniform mat3 uProjection;",
"uniform mat4 uProjection;",
"uniform mat3 uModelview;",
"uniform mat3 uTexMatrix;",
"uniform float uMorphWeight;",
Expand All @@ -46,7 +46,7 @@ renderWebGL = function (gl)
"varying vec3 vTexCoord;",
"void main(void) {",
" vTexCoord = uTexMatrix * vec3(aVertexTexCoord, 1.0);",
" gl_Position = vec4(uProjection * uModelview * vec3(aVertexPosition + mix(aVertexMorph0Position, aVertexMorph1Position, uMorphWeight), 1.0), 1.0);",
" gl_Position = uProjection * vec4(uModelview * vec3(aVertexPosition + mix(aVertexMorph0Position, aVertexMorph1Position, uMorphWeight), 1.0), 1.0);",
"}"
];
var gl_mesh_shader_fs_src =
Expand Down Expand Up @@ -81,7 +81,7 @@ renderWebGL = function (gl)
[
"precision mediump int;",
"precision mediump float;",
"uniform mat3 uProjection;",
"uniform mat4 uProjection;",
"uniform mat3 uModelviewArray[" + render.gl_skin_shader_modelview_count + "];",
"uniform mat3 uTexMatrix;",
"attribute vec2 aVertexPosition;", // [ x, y ]
Expand All @@ -93,14 +93,14 @@ renderWebGL = function (gl)
" vec3 position = vec3(aVertexPosition, 1.0);",
" vec3 blendPosition = vec3(0.0);",
repeat(" blendPosition += (uModelviewArray[int(aVertexBlenders{index}.x)] * position) * aVertexBlenders{index}.y;", render.gl_skin_shader_blenders_count),
" gl_Position = vec4(uProjection * blendPosition, 1.0);",
" gl_Position = uProjection * vec4(blendPosition, 1.0);",
"}"
];
var gl_ffd_skin_shader_vs_src =
[
"precision mediump int;",
"precision mediump float;",
"uniform mat3 uProjection;",
"uniform mat4 uProjection;",
"uniform mat3 uModelviewArray[" + render.gl_skin_shader_modelview_count + "];",
"uniform mat3 uTexMatrix;",
"uniform float uMorphWeight;",
Expand All @@ -115,7 +115,7 @@ renderWebGL = function (gl)
" vec3 position = vec3(aVertexPosition + mix(aVertexMorph0Position, aVertexMorph1Position, uMorphWeight), 1.0);",
" vec3 blendPosition = vec3(0.0);",
repeat(" blendPosition += (uModelviewArray[int(aVertexBlenders{index}.x)] * position) * aVertexBlenders{index}.y;", render.gl_skin_shader_blenders_count),
" gl_Position = vec4(uProjection * blendPosition, 1.0);",
" gl_Position = uProjection * vec4(blendPosition, 1.0);",
"}"
];
var gl_skin_shader_fs_src =
Expand Down Expand Up @@ -438,6 +438,7 @@ renderWebGL.prototype.loadPose = function (spine_pose, atlas_data, images)
var image = images[image_key];
var gl_texture = render.gl_textures[image_key] = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, gl_texture);
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl_min_filter);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl_mag_filter);
Expand All @@ -463,6 +464,7 @@ renderWebGL.prototype.loadPose = function (spine_pose, atlas_data, images)
var image = images[image_key];
var gl_texture = render.gl_textures[image_key] = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, gl_texture);
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
Expand Down Expand Up @@ -534,7 +536,7 @@ renderWebGL.prototype.drawPose = function (spine_pose, atlas_data)

gl.useProgram(gl_shader.program);

gl.uniformMatrix3fv(gl_shader.uniforms['uProjection'], false, gl_projection);
gl.uniformMatrix4fv(gl_shader.uniforms['uProjection'], false, gl_projection);
gl.uniformMatrix3fv(gl_shader.uniforms['uModelview'], false, gl_modelview);
gl.uniformMatrix3fv(gl_shader.uniforms['uTexMatrix'], false, gl_tex_matrix);
gl.uniform4fv(gl_shader.uniforms['uColor'], gl_color);
Expand Down Expand Up @@ -596,7 +598,7 @@ renderWebGL.prototype.drawPose = function (spine_pose, atlas_data)

gl.useProgram(gl_shader.program);

gl.uniformMatrix3fv(gl_shader.uniforms['uProjection'], false, gl_projection);
gl.uniformMatrix4fv(gl_shader.uniforms['uProjection'], false, gl_projection);
gl.uniformMatrix3fv(gl_shader.uniforms['uModelview'], false, gl_modelview);
gl.uniformMatrix3fv(gl_shader.uniforms['uTexMatrix'], false, gl_tex_matrix);
gl.uniform4fv(gl_shader.uniforms['uColor'], gl_color);
Expand Down Expand Up @@ -633,7 +635,7 @@ renderWebGL.prototype.drawPose = function (spine_pose, atlas_data)

gl.useProgram(gl_shader.program);

gl.uniformMatrix3fv(gl_shader.uniforms['uProjection'], false, gl_projection);
gl.uniformMatrix4fv(gl_shader.uniforms['uProjection'], false, gl_projection);
gl.uniformMatrix3fv(gl_shader.uniforms['uModelview'], false, gl_modelview);
gl.uniformMatrix3fv(gl_shader.uniforms['uTexMatrix'], false, gl_tex_matrix);
gl.uniform4fv(gl_shader.uniforms['uColor'], gl_color);
Expand Down Expand Up @@ -712,7 +714,7 @@ renderWebGL.prototype.drawPose = function (spine_pose, atlas_data)

gl.useProgram(gl_shader.program);

gl.uniformMatrix3fv(gl_shader.uniforms['uProjection'], false, gl_projection);
gl.uniformMatrix4fv(gl_shader.uniforms['uProjection'], false, gl_projection);
gl.uniformMatrix3fv(gl_shader.uniforms['uModelviewArray[0]'], false, render.gl_skin_shader_modelview_array);
gl.uniformMatrix3fv(gl_shader.uniforms['uTexMatrix'], false, gl_tex_matrix);
gl.uniform4fv(gl_shader.uniforms['uColor'], gl_color);
Expand Down Expand Up @@ -751,7 +753,7 @@ renderWebGL.prototype.drawPose = function (spine_pose, atlas_data)

gl.useProgram(gl_shader.program);

gl.uniformMatrix3fv(gl_shader.uniforms['uProjection'], false, gl_projection);
gl.uniformMatrix4fv(gl_shader.uniforms['uProjection'], false, gl_projection);
gl.uniformMatrix3fv(gl_shader.uniforms['uModelviewArray[0]'], false, render.gl_skin_shader_modelview_array);
gl.uniformMatrix3fv(gl_shader.uniforms['uTexMatrix'], false, gl_tex_matrix);
gl.uniform4fv(gl_shader.uniforms['uColor'], gl_color);
Expand Down Expand Up @@ -922,6 +924,74 @@ function mat3x3ApplyAtlasSitePosition (m, site)
return m;
}

function mat4x4Identity (m)
{
m[1] = m[2] = m[3] = m[4] =
m[6] = m[7] = m[8] = m[9] =
m[11] = m[12] = m[13] = m[14] = 0.0;
m[0] = m[5] = m[10] = m[15] = 1.0;
return m;
}

function mat4x4Copy (m, other)
{
m.set(other);
return m;
}

function mat4x4Ortho(m, l, r, b, t, n, f)
{
var lr = 1 / (l - r);
var bt = 1 / (b - t);
var nf = 1 / (n - f);
m[ 0] = -2 * lr;
m[ 5] = -2 * bt;
m[10] = 2 * nf;
m[12] = (l + r) * lr;
m[13] = (t + b) * bt;
m[14] = (f + n) * nf;
return m;
}

function mat4x4Translate (m, x, y, z)
{
z = z || 0;
m[12] += m[0] * x + m[4] * y + m[ 8] * z;
m[13] += m[1] * x + m[5] * y + m[ 9] * z;
m[14] += m[2] * x + m[6] * y + m[10] * z;
m[15] += m[3] * x + m[7] * y + m[11] * z;
return m;
}

function mat4x4RotateCosSinZ (m, c, s)
{
var a_x = m[0], a_y = m[1], a_z = m[2], a_w = m[3];
var b_x = m[4], b_y = m[5], b_z = m[6], b_w = m[7];
m[0] = a_x * c + b_x * s;
m[1] = a_y * c + b_y * s;
m[2] = a_z * c + b_z * s;
m[3] = a_w * c + b_w * s;
m[4] = b_x * c - a_x * s;
m[5] = b_y * c - a_y * s;
m[6] = b_z * c - a_z * s;
m[7] = b_w * c - a_w * s;
return m;
}

function mat4x4RotateZ (m, angle)
{
return mat4x4RotateCosSinZ(m, Math.cos(angle), Math.sin(angle));
}

function mat4x4Scale (m, x, y, z)
{
z = z || 1;
m[0] *= x; m[1] *= x; m[ 2] *= x; m[ 3] *= x;
m[4] *= y; m[5] *= y; m[ 6] *= y; m[ 7] *= y;
m[8] *= z; m[9] *= z; m[10] *= z; m[11] *= z;
return m;
}

function glCompileShader (gl, src, type)
{
function flatten (array, out)
Expand Down

0 comments on commit 2c4d598

Please sign in to comment.