Let’s re-make the wheel Nguyễn Trung Hưng Firebat Game Studio - VNG
OGDC2013_Lets remake the wheel_ Mr Nguyen Trung Hung
May 13, 2015
Presentation in OGDC 2013 organized by VNG Corp
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Let’s re-make the wheel
Nguyễn Trung Hưng
Firebat Game Studio - VNG
“DON’T RE-INVENT THE WHEEL”
Re-make GL shader
for 2D graphics
Our old “wheel”: 3D vertex shader
uniform mat4 uVPMatrix; attribute vec4 aPos;
void main() {
gl_Position = uVPMatrix * aPos; }
The old “wheel” was designed for
But we only need
Remake the old “wheel” for 2D
attribute vec2 aPos;
void main(){
gl_Position = vec4( aPos.x/HALF_WIDTH - 1.0,
1.0 - aPos.y/HALF_HEIGHT,
0.0, 1.0);
}
• Multiply ops: 16• Add ops: 12• Total: 28
• Multiply ops: 2• Add ops: 2• Total: 4
old “wheel”
28 VS 4
new “wheel”
Re-make GL shader
for ETC texture
ETC texture
• Ericsson Texture Compression (ETC)
• 6x compression 0f 24-bit RGB data
• No support images with Alpha component
Source: http://en.wikipedia.org/wiki/Ericsson_Texture_Compression
Old “wheel”: std fragment shader
uniform sampler2D uTexture;varying mediump vec2 vTexCoord;
void main() {
gl_FragColor = texture2D(uTexture, vTexCoord);}
We need a “wheel”
ETC texture + Alpha mask texture = ETC with alpha component
Remake the “wheel” for ETC
uniform sampler2D uTexture;uniform sampler2D uAlpha;varying mediump vec2 vTexCoord;
void main() {
vec4 color = texture2D(uTexture, vTexCoord);
vec4 alpha = texture2D(uAlpha, vTexCoord);
gl_FragColor = vec4(color.rgb, alpha.r);}
• Texture size: 100M • ETC size: 16.6M• Alpha mask size: 25M• Total: 41.6M
old “wheel”
100 VS 42
new “wheel”
How to bind 2 textures and pass them to fragment
shader ?
Re-make GL shader for
color transformation
Old “wheel” was designed for
But we really need
uniform sampler2D uTexture;uniform mat4 uColorTransformMatrix;varying mediump vec2 vTexCoord;
void main() {
Vector4 color = texture2D(uTexture, vTexCoord);
gl_FragColor = uColorTransformMatrix * color;}
Remake the old “wheel”
• Textures add: 3 • Textures add: 0
old “wheel”
3 VS 0
new “wheel”
How to make the color transform
matrix?
Re-make matrix funcs
for 2D graphics
void CMath::MATRIX_3x3_MULTIPLY(float* A, float* B, float* result){
result[0] = A[0]*B[0] + A[3]*B[1] + A[6]*B[2];
result[1] = A[1]*B[0] + A[4]*B[1] +A[7]*B[2];result[2] = A[2]*B[0] + A[5]*B[1] +A[8]*B[2];result[3] = A[0]*B[3] + A[3]*B[4] +A[6]*B[5];result[4] = A[1]*B[3] + A[4]*B[4] +A[7]*B[5];result[5] = A[2]*B[3] + A[5]*B[4] +A[8]*B[5];result[6] = A[0]*B[6]+ A[3]*B[7] +
A[6]*B[8];result[7] = A[1]*B[6] + A[4]*B[7] +A[7]*B[8];result[8] = A[2]*B[6] + A[5]*B[7] +A[8]*B[8];
}
Our old “wheel”
m11 m12 m13
m21 m22 m23
m31 m32 m33
Old “wheel” was designed for
We only need
m11 m12 m13
m21 m22 m23
0 0 1
Remake the old “wheel”void CMath::MATRIX_3x3_MULTIPLY(float* A, float* B, float* result){
result[0] = A[0]*B[0] + A[3]*B[1] + A[6]*0;result[1] = A[1]*B[0] + A[4]*B[1] + A[7]*0;result[2] = 0*B[0] + 0*B[1] + 1*0;
result[3] = A[0]*B[3] + A[3]*B[4] + A[6]*0;result[4] = A[1]*B[3] + A[4]*B[4] + A[7]*0;result[5] = 0*B[3] + 0*B[4] + 1*0;
result[6] = A[0]*B[6] + A[3]*B[7] + A[6]*1;result[7] = A[1]*B[6] + A[4]*B[7] + A[7]*1;result[8] = 0*B[6] + 0*B[7] + 1*1;
}
Remake the old “wheel”void CMath::MATRIX_3x3_MULTIPLY(float* A, float* B, float* result){
result[0] = A[0]*B[0] + A[3]*B[1];result[1] = A[1]*B[0] + A[4]*B[1];
result[3] = A[0]*B[3] + A[3]*B[4];result[4] = A[1]*B[3] + A[4]*B[4];
result[6] = A[0]*B[6] + A[3]*B[7] + A[6];result[7] = A[1]*B[6] + A[4]*B[7] + A[7];
}
• Multiply ops: 27• Add ops: 18• Total: 45
• Multiply ops: 12• Add ops: 8• Total: 20
old “wheel”
45 VS 20
new “wheel”
1 0 tx
0 1 ty
0 0 1
If the new “wheel” only run on
Remake the old “wheel”
void CMath::MATRIX_3x3_MULTIPLY(float* A, float* B, float* result){
result[0] = 1*B[0] + 0*B[1];result[1] = 0*B[0] + 1*B[1];
result[3] = 1*B[3] + 0*B[4];result[4] = 0*B[3] + 1*B[4];
result[6] = 1*B[6] + 0*B[7] + A[6];result[7] = 0*B[6] + 1*B[7] + A[7];
}
Remake the old “wheel”
void CMath::MATRIX_3x3_MULTIPLY(float* A, float* B, float* result){
result[0] = B[0];result[1] = B[1];
result[3] = B[3];result[4] = B[4];
result[6] = B[6] + A[6];result[7] = B[7] + A[7];
}
Remake the old “wheel”
void CMath::MATRIX_3x3_TRANSLATE(float* M, float tx, float ty){
M[6] += tx;M[7] += ty;
}
• Multiply ops: 27• Add ops: 18• Total: 45
• Multiply ops: 0• Add ops: 2• Total: 2
old “wheel”
45 VS 2
new “wheel”
sx 0 0
0 sy 0
0 0 1
If the new “wheel” run on
Remake the old “wheel”
void CMath::MATRIX_3x3_SCALE(float* M, float sx, float sy){
M[0] *= sx;M[1] *= sy;
M[3] *= sx;M[4] *= sy;
M[6] *= sx;M[7] *= sy;
}
• Multiply ops: 27• Add ops: 18• Total: 45
• Multiply ops: 6• Add ops: 0• Total: 6
old “wheel”
45 VS 6
new “wheel”
Re-make
GL vertex data to
remove dynamic
transformation
public float[] MakeImageVertexData(float x, float y, short w, short h){
xy[0] = x; xy[1] = y;
xy[2] = x; xy[3] = (h + y);
xy[4] = (w + x); xy[5] = (h + y);
xy[6] = (w + x); xy[7] = y;}
Our old “wheel”
public void RenderImage(…){
glPushMatrix(); glScalef(sx, sy, sz); glTranslatef(tx, ty, tz); glRotatef(angle, vx, vy, vz); … glVertexPointer(2, GL_FLOAT, 0, vertex_data); glTexCoordPointer(2, GL_FLOAT, 0, tex_coord); glDrawElements(GL_TRIANGLES, …); glPopMatrix();
}
Our old “wheel”
MakeImageVertexData(float x, float y, short w, short h, float m11, float m12,
float m21, float m22){
xy[0] = x; xy[1] = y;
xy[2] = h*m12 +x; xy[3] = h*m22 + y;
xy[4] = w*m11 + h*m12 + x; xy[5] = w*m21 + h*m22 + y;
xy[6] = w*m11 + x; xy[7] = w*m21 + y;}
Remake the old “wheel”
public void RenderImage(…){
… glVertexPointer(2, GL_FLOAT, 0, vertex_data); glTexCoordPointer(2, GL_FLOAT, 0, tex_coord); glDrawElements(GL_TRIANGLES, …);…
}
Remake the old “wheel”
old “wheel”
N VS 0
new “wheel”
Re-make HTTP request
to sending binary
content
Our old “wheel”
• Encode binary content to string (Base64)
• Use HTTP GET method
• Decode url string to binary
Our new “wheel”
• No encode
• Use HTTP POST method- With “Content-Type: application/octet-stream”- Maybe with "Content-Encoding: gzip“- And "Content-MD5: …"
• No decode
HttpURLConnection http_conn = (HttpURLConnection)url.openConnection();http_conn.setRequestMethod(”POST”);http_conn.setDoOutput(true);
byte[] final_content = GZIP(_binary_data);
http_conn.setRequestProperty("Content-Type", "application/octet-stream");http_conn.setRequestProperty("Content-Encoding", "gzip");http_conn.setRequestProperty("Content-MD5", MD5(final_content));
http_conn.setFixedLengthStreamingMode(final_content.length);
//send the POST content OutputStream out = http_conn.getOutputStream(); out.write(final_content);out.close();
old “wheel”
100KB
new “wheel”
48KB
Re-make code
for thread-safe
Our old “wheel”
function void UpdateMoney(int delta){
int money = ReadDB(“userid_money”);WriteDB(“userid_money”, money +
delta);}
Old “wheel” was designed for single thread
But we need multi-
thread !!!
function void UpdateMoney(int delta){1. int money = ReadDB(“userid_money”);2. WriteDB(“userid_money”, money + delta);}
•A:1 => A:2 => B:1 => B:2•A:1 => B:1 => A:2 => B:2•A:1 => B:1 => B:2 => A:2
• Thread A: -100$• Thread B: +100$
class CompareAndSet{
Object value;
long token;}
new “wheel”
function boolean UpdateMoney(int delta){1. CAS casMoney = CasReadDB(“userid_money”);
2. return CasWriteDB( “userid_money”, casMoney.value + delta,casMoney.token);
}
•A:1(t1) => A:2(t2 = t1++) => B:1(t2)
=> B:2(t3 = t2++)
•A:1(t1) => B:1(t1) => A:2(t2 = t1++)
=> B:2(t1 != t2)
new “wheel”
old wheel “earn”
±100$
new wheel “earn”
0$
The “wheel” which
you found on
internet, may be
not designed for
your “vehicle”.
My exp
Understand your need if you want to remake your “wheel”.
My exp
Remaking usually helps you get a better result.
My exp
Even when it doesn’t get a better result, it always helps you gain more exp.
My exp
Related Documents
