Download - Ogdc 2013 lets remake the wheel
![Page 1: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/1.jpg)
Let’s re-make the wheel
Nguyễn Trung Hưng
Firebat Game Studio - VNG
![Page 2: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/2.jpg)
“DON’T RE-INVENT THE WHEEL”
![Page 3: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/3.jpg)
![Page 4: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/4.jpg)
![Page 5: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/5.jpg)
Re-make GL shader
for 2D graphics
![Page 6: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/6.jpg)
Our old “wheel”: 3D vertex shader
uniform mat4 uVPMatrix; attribute vec4 aPos;
void main() {
gl_Position = uVPMatrix * aPos; }
![Page 7: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/7.jpg)
The old “wheel” was designed for
![Page 8: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/8.jpg)
But we only need
![Page 9: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/9.jpg)
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);
}
![Page 10: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/10.jpg)
• Multiply ops: 16• Add ops: 12• Total: 28
• Multiply ops: 2• Add ops: 2• Total: 4
old “wheel”
28 VS 4
new “wheel”
![Page 11: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/11.jpg)
Re-make GL shader
for ETC texture
![Page 12: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/12.jpg)
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
![Page 13: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/13.jpg)
Old “wheel”: std fragment shader
uniform sampler2D uTexture;varying mediump vec2 vTexCoord;
void main() {
gl_FragColor = texture2D(uTexture, vTexCoord);}
![Page 14: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/14.jpg)
We need a “wheel”
ETC texture + Alpha mask texture = ETC with alpha component
![Page 15: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/15.jpg)
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);}
![Page 16: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/16.jpg)
• Texture size: 100M • ETC size: 16.6M• Alpha mask size: 25M• Total: 41.6M
old “wheel”
100 VS 42
new “wheel”
![Page 17: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/17.jpg)
How to bind 2 textures and pass them to fragment
shader ?
![Page 18: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/18.jpg)
Re-make GL shader for
color transformation
![Page 19: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/19.jpg)
Old “wheel” was designed for
![Page 20: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/20.jpg)
But we really need
![Page 21: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/21.jpg)
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”
![Page 22: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/22.jpg)
• Textures add: 3 • Textures add: 0
old “wheel”
3 VS 0
new “wheel”
![Page 23: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/23.jpg)
How to make the color transform
matrix?
![Page 24: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/24.jpg)
Re-make matrix funcs
for 2D graphics
![Page 25: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/25.jpg)
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”
![Page 26: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/26.jpg)
m11 m12 m13
m21 m22 m23
m31 m32 m33
Old “wheel” was designed for
![Page 27: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/27.jpg)
We only need
m11 m12 m13
m21 m22 m23
0 0 1
![Page 28: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/28.jpg)
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;
}
![Page 29: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/29.jpg)
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];
}
![Page 30: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/30.jpg)
• Multiply ops: 27• Add ops: 18• Total: 45
• Multiply ops: 12• Add ops: 8• Total: 20
old “wheel”
45 VS 20
new “wheel”
![Page 31: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/31.jpg)
1 0 tx
0 1 ty
0 0 1
If the new “wheel” only run on
![Page 32: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/32.jpg)
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];
}
![Page 33: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/33.jpg)
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];
}
![Page 34: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/34.jpg)
Remake the old “wheel”
void CMath::MATRIX_3x3_TRANSLATE(float* M, float tx, float ty){
M[6] += tx;M[7] += ty;
}
![Page 35: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/35.jpg)
• Multiply ops: 27• Add ops: 18• Total: 45
• Multiply ops: 0• Add ops: 2• Total: 2
old “wheel”
45 VS 2
new “wheel”
![Page 36: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/36.jpg)
sx 0 0
0 sy 0
0 0 1
If the new “wheel” run on
![Page 37: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/37.jpg)
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;
}
![Page 38: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/38.jpg)
• Multiply ops: 27• Add ops: 18• Total: 45
• Multiply ops: 6• Add ops: 0• Total: 6
old “wheel”
45 VS 6
new “wheel”
![Page 39: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/39.jpg)
Re-make
GL vertex data to
remove dynamic
transformation
![Page 40: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/40.jpg)
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”
![Page 41: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/41.jpg)
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”
![Page 42: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/42.jpg)
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”
![Page 43: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/43.jpg)
public void RenderImage(…){
… glVertexPointer(2, GL_FLOAT, 0, vertex_data); glTexCoordPointer(2, GL_FLOAT, 0, tex_coord); glDrawElements(GL_TRIANGLES, …);…
}
Remake the old “wheel”
![Page 44: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/44.jpg)
old “wheel”
N VS 0
new “wheel”
![Page 45: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/45.jpg)
Re-make HTTP request
to sending binary
content
![Page 46: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/46.jpg)
Our old “wheel”
• Encode binary content to string (Base64)
• Use HTTP GET method
• Decode url string to binary
![Page 47: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/47.jpg)
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
![Page 48: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/48.jpg)
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();
![Page 49: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/49.jpg)
old “wheel”
100KB
new “wheel”
48KB
![Page 50: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/50.jpg)
Re-make code
for thread-safe
![Page 51: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/51.jpg)
Our old “wheel”
function void UpdateMoney(int delta){
int money = ReadDB(“userid_money”);WriteDB(“userid_money”, money +
delta);}
![Page 52: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/52.jpg)
Old “wheel” was designed for single thread
But we need multi-
thread !!!
![Page 53: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/53.jpg)
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$
![Page 54: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/54.jpg)
class CompareAndSet{
Object value;
long token;}
new “wheel”
![Page 55: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/55.jpg)
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”
![Page 56: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/56.jpg)
old wheel “earn”
±100$
new wheel “earn”
0$
![Page 57: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/57.jpg)
The “wheel” which
you found on
internet, may be
not designed for
your “vehicle”.
My exp
![Page 58: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/58.jpg)
Understand your need if you want to remake your “wheel”.
My exp
![Page 59: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/59.jpg)
Remaking usually helps you get a better result.
My exp
![Page 60: Ogdc 2013 lets remake the wheel](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554d2739b4c905c5208b4e60/html5/thumbnails/60.jpg)
Even when it doesn’t get a better result, it always helps you gain more exp.
My exp