{"id":466,"date":"2021-12-04T19:18:41","date_gmt":"2021-12-04T19:18:41","guid":{"rendered":"https:\/\/writingagame.com\/?p=466"},"modified":"2023-06-06T18:03:45","modified_gmt":"2023-06-06T18:03:45","slug":"chapter-11-textures","status":"publish","type":"post","link":"https:\/\/writingagame.com\/index.php\/2021\/12\/04\/chapter-11-textures\/","title":{"rendered":"Chapter 11. Textures"},"content":{"rendered":"\n

1. To use textures, we first need to load them into the application. Using an image-loading library that supports several popular formats looks like a good solution. I like stb_image.h<\/em> by Sean Barrett<\/a>. Especially I love that it’s a single h-file, not a lib or dll.<\/p>\n\n\n\nYou can download it here<\/a>.\n\n\n\n


Save it in C:\\CPP\\engine<\/em> folder (the same place where we saved linmath.h<\/em> earlier).<\/p>\n\n\n\n

\n\n\n\n

2. Then we’ll need an image itself.<\/p>\n\n\n\n

Create a folder for it: \\dt<\/strong> under C:\\CPP\\a999hello<\/em> (this folder should belong to the project<\/strong>, NOT to engine).<\/p>\n\n\n\n

IMPORTANT<\/strong>: the image sizes MUST be powers of 2.
The following sample_img.png<\/em> is 512×256:<\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\nYou can download it here<\/a>.\n\n\n\n


Save it in C:\\CPP\\a999hello\\dt<\/em><\/p>\n\n\n\n

\n\n\n\n

Windows<\/h2>\n\n\n\n

3. Start Visual Studio. Open C:\\CPP\\a999hello\\p_windows\\p_windows.sln<\/em><\/p>\n\n\n\n

\n\n\n\n

4. Add new \/dt<\/strong> folder to Post-Build xcopy <\/strong>instruction:<\/p>\n\n\n\n

Open p_windows<\/em> project Properties, All Configurations \/ x86, Build events -> Post-Build Event -> Command Line -> Edit<\/em>.<\/p>\n\n\n\n

Add new line<\/p>\n\n\n\n

xcopy \"..\\dt\\*.*\" \"$(TargetDir)dt\\\" \/E \/R \/D \/y<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
so now we have 2 xcopy commands.<\/p>\n\n\n\n
Ok, Apply, Ok.<\/p>\n\n\n\n
\n\n\n\n
5. Open TheGame.cpp<\/em>. We’ll need to change it a bit:<\/p>\n\n\n\n
    \n
  • We need a reference to stb_image.h<\/em>.<\/li>\n\n\n\n
  • A bit different variables set.<\/li>\n\n\n\n
  • Different vertex structure: (3D coordinates + 2D texture coordinates) instead of just coordinates.<\/li>\n\n\n\n
  • We will use 4 vertices instead of 3 and GL_TRIANGLE_STRIP primitive instead of GL_TRIANGLES<\/li>\n\n\n\n
  • Also we need to implement reading\/loading an image and converting it into the texture.<\/li>\n\n\n\n
  • And pass texture id and per-vertex texture coordinates to a new shader program.<\/li>\n<\/ul>\n\n\n\n
    So, replaceTheGame.cpp<\/em> code by following:<\/p>\n\n\n
    \n#include "TheGame.h"\n#include "platform.h"\n#include "linmath.h"\n#include "utils.h"\n#include "Shader.h"\n\nextern std::string filesRoot;\n\n#define STB_IMAGE_IMPLEMENTATION  \/\/required by stb_image.h\n#include "stb_image.h"\n\nstatic const struct\n{\n    float x, y, z, tu, tv;\n} vertices[4] =\n{\n    { -0.5f,  0.5f, 0.f, 0.f, 0.f }, \/\/top-left\n    { -0.5f, -0.5f, 0.f, 0.f, 1.f }, \/\/bottom-left\n    {  0.5f,  0.5f, 0.f, 1.f, 0.f }, \/\/top-right\n    {  0.5f, -0.5f, 0.f, 1.f, 1.f }  \/\/bottom-right\n};\nunsigned int vao_buffer, vertex_buffer, shaderProgramId, textureId;\nint umvp_location, apos_location, atuv_location;\nfloat angle_z = 0;\n\nint TheGame::getReady() {\n    bExitGame = false;\n\n    glGenVertexArrays(1, &vao_buffer);\n    glBindVertexArray(vao_buffer);\n\n    glGenBuffers(1, &vertex_buffer);\n    glBindBuffer(GL_ARRAY_BUFFER, vertex_buffer);\n    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);\n\n    shaderProgramId = Shader::linkShaderProgram((filesRoot + "\/dt\/shaders\/flat_tex_v.txt").c_str(), (filesRoot + "\/dt\/shaders\/flat_tex_f.txt").c_str());\n\n    umvp_location = glGetUniformLocation(shaderProgramId, "uMVP");\n\n    apos_location = glGetAttribLocation(shaderProgramId, "aPos");\n    glEnableVertexAttribArray(apos_location);\n    glVertexAttribPointer(apos_location, 3, GL_FLOAT, GL_FALSE,\n        sizeof(vertices[0]), (void*)0);\n\n    atuv_location = glGetAttribLocation(shaderProgramId, "aTuv");\n    glEnableVertexAttribArray(atuv_location);\n    glVertexAttribPointer(atuv_location, 2, GL_FLOAT, GL_FALSE,\n        sizeof(vertices[0]), (void*)(sizeof(float) * 3));\n\n    \/\/ loading an image\n    int imgWidth, imgHeight, nrChannels;\n    unsigned char* imgData = stbi_load((filesRoot + "\/dt\/sample_img.png").c_str(),\n        &imgWidth, &imgHeight, &nrChannels, 4); \/\/"4"-convert to 4 channels -RGBA\n    if (imgData == NULL) {\n        mylog("ERROR loading image\\n");\n    }\n    \/\/ generate texture\n    unsigned int textureId;\n    glGenTextures(1, &textureId);\n    glBindTexture(GL_TEXTURE_2D, textureId);\n    \/\/ set the texture wrapping\/filtering options (on the currently bound texture object)\n    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);\n    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);\n    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);\n    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);\n    \/\/ attach\/load image data\n    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, imgWidth, imgHeight, 0, GL_RGBA, GL_UNSIGNED_BYTE, imgData);\n    glGenerateMipmap(GL_TEXTURE_2D);\n    \/\/ release image data\n    stbi_image_free(imgData);\n\n    \/\/pass textureId to shader program\n    glActiveTexture(GL_TEXTURE0); \/\/ activate the texture unit first before binding texture\n    glBindTexture(GL_TEXTURE_2D, textureId);\n\n    return 1;\n}\nint TheGame::drawFrame() {\n    myPollEvents();\n\n    mat4x4 m, p, mvp;\n\n    \/\/glClearColor(0.0, 0.0, 0.5, 1.0);\n    glClear(GL_COLOR_BUFFER_BIT);\n    angle_z += 0.01f;\n    mat4x4_identity(m);\n    mat4x4_rotate_Z(m, m, angle_z);\n    mat4x4_scale_aniso(m, m, 2.0, 1.0, 1.0);\n    mat4x4_ortho(p, -screenRatio, screenRatio, -1.f, 1.f, 1.f, -1.f);\n    mat4x4_mul(mvp, p, m);\n\n    glUseProgram(shaderProgramId);\n    glUniformMatrix4fv(umvp_location, 1, GL_FALSE, (const GLfloat*)mvp);\n\n    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);\n\n    mySwapBuffers();\n    return 1;\n}\nint TheGame::cleanUp() {\n    return 1;\n}\nint TheGame::onScreenResize(int width, int height) {\n    if (screenSize[0] == width && screenSize[1] == height)\n        return 0;\n    screenSize[0] = width;\n    screenSize[1] = height;\n    screenRatio = (float)width \/ (float)height;\n    glViewport(0, 0, width, height);\n    mylog(" screen size %d x %d\\n", width, height);\n    return 1;\n}\nint TheGame::run() {\n    getReady();\n    while (!bExitGame) {\n        drawFrame();\n    }\n    cleanUp();\n    return 1;\n}\n\n<\/pre><\/div>\n\n\n
    <\/p>\n\n\n\n
    \n\n\n\n
      \n
    1. And, of course, new shaders:<\/li>\n<\/ol>\n\n\n\n
      Vertex shader<\/strong>:<\/p>\n\n\n
      \n#version 320 es\nprecision lowp float;\nuniform mat4 uMVP; \/\/ transform matrix (Model-View-Projection)\nin vec3 aPos; \/\/attribute position (3D coordinates)\nin vec2 aTuv; \/\/attribute TUV (texture coordinates)\nout vec2 vTuv; \/\/varying TUV (pass to fragment shader)\nvoid main(){\n  gl_Position = uMVP * vec4(aPos, 1.0);\n  vTuv = aTuv;\n}\n\n<\/pre><\/div>\n\n\n
      Copy-paste this code to a text editor<\/strong> and save it as a txt file in<\/p>\n\n\n\n
      C:\\CPP\\engine\\dt\\shaders\\flat_tex_v.txt<\/em><\/p>\n\n\n\n
      Fragment shader<\/strong>:<\/p>\n\n\n
      \n#version 320 es\nprecision lowp float;\nuniform sampler2D uTex0;  \/\/texture id\nin vec2 vTuv; \/\/varying TUV (passed from vertex shader)\nout vec4 FragColor; \/\/ output pixel color\nvoid main(){\n  FragColor = texture(uTex0, vTuv);\n}\n\n<\/pre><\/div>\n\n\n
      Copy-paste this code to a text editor<\/strong> and save it as a txt file in<\/p>\n\n\n\n
      C:\\CPP\\engine\\dt\\shaders\\flat_tex_f.txt<\/p>\n\n\n\n
      \n\n\n\n
      7. Build and run. Result:<\/p>\n\n\n\n
      <\/p>\n\n\n\n
      <\/p>\n\n\n\n
      \n\n\n\n
      Now – on<\/p>\n\n\n\n
      Android<\/h2>\n\n\n\n
      This time ALL code changes were on a cross-platform side, so we don’t even need to change anything\u2026 Except stb_image.h<\/em> and xcopy<\/em> post-build instruction.<\/p>\n\n\n\n
      8. Re-start Visual Studio. Open C:\\CPP\\a999hello\\p_android\\p_android.sln<\/em>.<\/p>\n\n\n\n
      \n\n\n\n
      9. Go to  p_android.NativeActivity<\/em> project Properties, All Configurations \/ ARM64, Build Events -> Post-Build Event -> Command Line -> Edit<\/em><\/p>\n\n\n\n
      Add new line:<\/p>\n\n\n\n
      xcopy \"..\\..\\dt\\*.*\" \"..\\$(RootNamespace).Packaging\\assets\\dt\\\" \/E \/R \/D \/y<\/code><\/pre>\n\n\n\n
      <\/p>\n\n\n\n
      Ok, Apply, Ok.<\/p>\n\n\n\n
      \n\n\n\n
      9. Now, right-click on xEngine<\/em>, Add -> Existing <\/strong>Item,<\/p>\n\n\n\n
      C:\\CPP\\engine\\stb_image.h<\/em><\/p>\n\n\n\n
      Add<\/strong>.<\/p>\n\n\n\n
      \n\n\n\n
      10. Plug in Android (as usual). <\/p>\n\n\n\n
      Re-build and run. <\/p>\n\n\n\n
      Nice, just as expected.<\/p>\n\n\n\n
      \n\n\n\n
      BTW, if you are a newbie to programming, now you can modestly indicate in your resume that you are fluent in:<\/p>\n\n\n\n
        \n
      • C++<\/li>\n\n\n\n
      • graphics<\/li>\n\n\n\n
      • 3D<\/li>\n\n\n\n
      • Visual Studio<\/li>\n\n\n\n
      • Cross-platform<\/li>\n\n\n\n
      • Android<\/li>\n\n\n\n
      • Windows<\/li>\n\n\n\n
      • OpenGL ES<\/li>\n\n\n\n
      • GLSL<\/li>\n<\/ul>\n\n\n\n
        Well, maybe “fluent” is still an exaggeration at this point, but everything else is a pure truth<\/em>.<\/p>\n\n\n\n
        \n\n\n\n
        <\/p>\n","protected":false},"excerpt":{"rendered":"
        1. To use textures, we first need to load them into the application. Using an image-loading library that supports several popular formats looks like a good solution. I like stb_image.h by Sean Barrett. Especially I love that it’s a single h-file, not a lib or dll. You can download it here. Save it in C:\\CPP\\engine […]<\/p>\n","protected":false},"author":1,"featured_media":475,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-466","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cross-platform-3d"],"_links":{"self":[{"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/posts\/466","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/comments?post=466"}],"version-history":[{"count":13,"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/posts\/466\/revisions"}],"predecessor-version":[{"id":2124,"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/posts\/466\/revisions\/2124"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/media\/475"}],"wp:attachment":[{"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/media?parent=466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/categories?post=466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/tags?post=466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}