trident international graphics workshop 2014 1/5
DESCRIPTION
International Graphics Workshop 2014 at Trident College of Information Technology from July 1st to July 29th in 2014.TRANSCRIPT
![Page 1: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/1.jpg)
International 5-days Graphics Programming Workshop
using Cocos-2d-x
DAY 1
Trident College of Information Technology
Takao WADA
![Page 2: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/2.jpg)
1. About me
2. OpenGL Overview
3. Introduction of Cocos-2d-x
4. Installation and setup the development environment
5. Run a sample programs of Cocos-2d-x
6. Create a simple shader program
7. Work
Agenda
![Page 3: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/3.jpg)
Takao WadaE-mail: [email protected]: https://www.facebook.com/takao.wada.50URL: http://www.drjiro.com/
Lecturer of Trident College of Information Technology Teach game programming at TRIDENT about 20 years. 3DProgramming and Smartphone games based on
many languages, C, C++, Java, etc. IGDA Nagoya-Chapter Chair
About me
![Page 4: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/4.jpg)
OpenGL is a famous graphics API for Desktop. Runs on many platform, Windows, MacOS, Linux, Web, etc.
OpenGL ES is a subset of OpenGL for embedded platform, iOS, Android, game consoles, etc.
Versions 1.0 – Fixed function, OpenGL 1.3 1.1 - OpenGL 1.5 2.0 - Shader based, OpenGL 2.0 3.0 - OpenGL 4.3 3.1 – Latest version
OpenGL ES Overview
![Page 5: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/5.jpg)
Graphics pipeline
VertexProcessing Rasterize
r
FragmentProcessing
Meshvertices
Transformedvertices
fragments
Vertex shader Fragment shader
![Page 6: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/6.jpg)
Vertices can be transformed by programmable shaders
Vertex shader Vertex transformation (Model,View,Projection, etc.) Vertex lighting
Fragment shader Texture mapping Pixel based lighting
Shader
![Page 7: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/7.jpg)
Detail pipeline
Vertex Shader
TriangleAssembly
ViewportClipping
RasterizerFragmentShader
FrameBuffer
Textures
Vertex data
TransformedVertex data
Triangledata
Screen spaceTriangle data
Fragmentdata
Pixeldata
![Page 8: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/8.jpg)
Multi-platform framework for building 2D games Main site http://www.cocos2d-x.org Based on cocos2d-iphone (Objective-C base) Uses C++ Works on iOS, Android, Windows Phone, OS X,
Windows and Linux.
Cocos-2d-x
![Page 9: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/9.jpg)
Install cocos-2d-x1. Download zip file from http://www.cocos2d-x.org/2. Current version is 3.2Alpha0 (cocos2d-x-3.2alpha0.zip).3. Extract the file downloaded file.4. Move the extracted folder to your Document folder
Install Python1. Download python-2.7.7.msi (Latest for version 2 series) from
https://www.python.org/2. Click and run setup. By default, it is installed in C:\Python273. Set the path environment variable for Windows using the
control panel
Installation of Cocos-2d-x
![Page 10: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/10.jpg)
Invoke the command prompt from the menu Run the python script to install related files
1. > cd cocos-2d-x-3.2alpha0
2. > python download-deps.py Run the python script to setup the environment
1. > python setup.py Asking for Android, skip them
Create a project folder for your developments1. > cd ..
2. > mkdir projects Quit from the command prompt
Setup cocos-2d-x
![Page 11: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/11.jpg)
Invoke the command prompt from the menu again Create a new project
> cd projects > cocos new MyGame -p jp.ac.trident.mygame -l cpp
Open the project in the Visual Studio 2013 Invoke Explorer Click MyGame\proj.win32\MyGame.sln Build and run
First cocos-2d-x Applocation
![Page 12: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/12.jpg)
cpp-tests project Move to “build” folder Click “cocos2d-win32.vc2012.sln” Build and run
Power of Cocos-2d-x
![Page 13: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/13.jpg)
Copy the sample project “WSSample1” Build and run
Sample program using Cocos-2d-x and shaders
![Page 14: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/14.jpg)
Using a shader in cocos-2d-x
bool ShaderScene::init(){
// create a node with vertices and shadersauto shaderNode = ShaderNode::shaderNodeWithVertex(
"Shaders/vertex.vsh", "Shaders/fragment.fsh");// Set the position and sizeshaderNode->setPosition(Vec2(size.width / 2, size.height / 2));shaderNode->setContentSize(Size(size.width / 2, size.height / 2));
// Add a node to the sceneaddChild(shaderNode);
return true;}
![Page 15: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/15.jpg)
Using a shader in cocos-2d-x
void ShaderNode::onDraw(const Mat4 &transform, uint32_t flags){
GLfloat vertices[6] = {0, 0, 0.5f, 0, 0.5f, 0.5f
};
auto glProgramState = getGLProgramState();// Pass the position parameter to the vertex shader’s attribute variableglProgramState->setVertexAttribPointer(
"a_position", 2, GL_FLOAT, GL_FALSE, 0, vertices);glProgramState->apply(transform);// Draw a triangleglDrawArrays(GL_TRIANGLES, 0, 3);
CC_INCREMENT_GL_DRAWN_BATCHES_AND_VERTICES(1, 3);}
![Page 16: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/16.jpg)
Main variable types
OpenGL Variable Types
GL Type bytes
GL_BYTEGL_UNSIGNED_BYTEGL_SHORTGL_UNSIGNED_SHORTGL_FIXEDGL_FLOAT
1122
3232
![Page 17: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/17.jpg)
OpenGL Primitives
GL_POINTS Draw points
GL_LINES Draw Lines
GL_LINE_STRIP Draw Lines forming a strip
GL_LINE_LOOP Draw Lines closing a loop
GL_TRIANGLES Draw Triangles
GL_TRIANGLE_STRIP
Draw Triangles forming a strip
GL_TRIANGLE_FAN
Draw Triangles forming a fan
![Page 18: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/18.jpg)
"a_position” – name of the vertex attribute 2 – number of components per vertex (Here, (x,y)) GL_FLOAT – data type GL_FALSE – normalize (GL_TRUE), converted (GL_FALSE) 0 – vertex stride, byte offset vertices – pointer to the first component in the vertex array
setVertexAttribPointer functionin cocos-2d-x
Passes its parameters to the generic OpenGL ES function.
glVertexAttribPointer("a_position", 2, GL_FLOAT, GL_FALSE, 0, vertices);
![Page 19: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/19.jpg)
A vertex can include its position, color, texture coordinate, normal vector, etc.
Most parameters are float. Color is represented by RGBA, float (0.0 – 1.0) x4
or unsigned byte (0 - 255)x4
Vertex format
![Page 20: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/20.jpg)
Shader variables attribute – passed from vertex stream by the parent
program, position, color, texture coordinate,etc. uniform – global variable from a parent language (C/C++) varying – pass the variable from a vertex shader to a
fragment shader
OpenGL ES Shader
![Page 21: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/21.jpg)
Get the model vertex position and transform and pass to the fragment shader gl_Position is reserved variable of the OpenGL ES shader for the
transformed position Attribute variable, a_position, is defined in the Cocos-2d-x for the
vertex position
A Simple vertex shader program
attribute vec4 a_position;
void main(){ gl_Position = a_position;}
![Page 22: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/22.jpg)
Draw a triangle with white color gl_FragColor is reserved variable of the OpenGL ES shader for the
decided color
A simple fragment shader program
void main(void) { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);}
![Page 23: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/23.jpg)
To draw a rectangle, draw 2 triangles
Draw a rectangle
GLfloat vertices[12] = { // x y 0.0f, 0.0f, // First triangle 0.5f, 0.0f, 0.5f, 0.5f, 0.5f, 0.5f, // Second triangle 0.0f, 0.5f, 0.0f, 0.0f};
// snip
glDrawArrays(GL_TRIANGLES, 0, 6);
Y
X
0.5
0.50
![Page 24: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/24.jpg)
1. Draw a triangle
2. Draw a square Hint: 2 triangles
3. Draw a full-sized square
Work 1-1
![Page 25: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/25.jpg)
Using a varying variable to pass colors from the vertex shader to the fragment shader
Using vertex color in a shader program
attribute vec4 a_position;attribute vec4 a_ color;
varying vec4 v_color;
void main(){ gl_Position a_position; v_color = a_color;}
varying vec4 v_color;
void main(void) { gl_FragColor = v_color;}
Vertex shader Fragment shader
![Page 26: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/26.jpg)
Add color to a vertexPosition x
y
Color R
G
B
A
Position x
y
Color R
G
B
Position x
y
Color R
G
B
A
GLfloat vertices[18] = { // x y R G B A 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.5f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 0.5f, 0.5f, 0.0f, 0.0f, 1.0f, 1.0f};
glProgramState->setVertexAttribPointer("a_position”, 2, GL_FLOAT, GL_FALSE, 24, vertices);glProgramState->setVertexAttribPointer("a_color", 4, GL_FLOAT, GL_FALSE, 24, vertices + 2);
Stridefloat x 6 = 24 bytes
Stridefloat x 6 = 24 bytes
Offsetfloat x 2 = 8 bytes
vertices
vertices + 2
![Page 27: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/27.jpg)
1. Add an attribute for color to the vertex format
2. Change the color(s) of vertices Change the same color for all vertices Change the different color for each vertex
Work 1-2
![Page 28: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/28.jpg)
Apply graphics image to the geometry Texture coordinates are normalized
Texture mapping
U
V
0
0
1
1
![Page 29: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/29.jpg)
1. Add an attribute for texture coordinate to the vertex format
2. Draw a image (texture) inside the shape
Work 1-3
![Page 30: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/30.jpg)
Add texture coordinate to the vertexPosition x
y
Color R
G
B
A
Texture coordinate U
V
Position x
y
Color R
G
B
A
Texture coordinate U
V
snip…
Stridefloat x 8 = 32 bytes Stride
32 bytes
Offsetvertices
Stride32 bytes
Offset
vertices+2
vertices+6
![Page 31: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/31.jpg)
Cont’dbool NewShaderNode::initWithVertex(const std::string &vert, const std::string &frag,
Texture2D* texture){// snip… getGLProgramState()->setUniformTexture("u_texture0", texture);// snip…}// snip…void NewShaderNode::onDraw(const Mat4 &transform, uint32_t flags){ GLfloat vertices[48] = { // x y R G B A U V 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 0.5f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f, 1.0f, 0.5f, 0.5f, 0.0f, 0.0f, 1.0f, 1.0f, 1.0f, 0.0f, 0.5f, 0.5f, 0.0f, 0.0f, 1.0f, 1.0f, 1.0f, 0.0f, 0.0f, 0.5f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f };// snip… glProgramState->setVertexAttribPointer("a_position”, 2, GL_FLOAT, GL_FALSE, 32, vertices); glProgramState->setVertexAttribPointer("a_color”, 4, GL_FLOAT, GL_FALSE, 32, vertices + 2); glProgramState->setVertexAttribPointer("a_texCoord”, 2, GL_FLOAT, GL_FALSE, 32, vertices + 6);
glDrawArrays(GL_TRIANGLES, 0, 6);}
![Page 32: Trident International Graphics Workshop 2014 1/5](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f2d60d8b42a46658b4af1/html5/thumbnails/32.jpg)
Using a uniform variable to pass texture from the parent program to the fragment shader
Using texture in a shader program
attribute vec4 a_position;attribute vec4 a_ color;attribute vec2 a_texCoord;
varying vec4 v_color;varying vec2 v_texCoord;
void main(){ gl_Position a_position; v_color = a_color; v_texCoord = a_texCoord;}
uniform sampler2D u_texture0;
varying vec4 v_color;varying vec2 v_texCoord;
void main(void) { gl_FragColor = texture2D(u_texture0, v_texCoord);}
Vertex shader Fragment shader