{"id":438,"date":"2021-12-04T02:26:46","date_gmt":"2021-12-04T02:26:46","guid":{"rendered":"https:\/\/writingagame.com\/?p=438"},"modified":"2021-12-04T05:31:24","modified_gmt":"2021-12-04T05:31:24","slug":"chapter-10-simple-shader","status":"publish","type":"post","link":"https:\/\/writingagame.com\/index.php\/2021\/12\/04\/chapter-10-simple-shader\/","title":{"rendered":"Chapter 10. Simple shader"},"content":{"rendered":"\n

Finally, shaders<\/strong>! Let’s start from the easiest one, just flat uniform color, which we will pass to the shader as an input, along with mesh data (in our sample – a triangle).<\/p>\n\n\n\n

Shaders use GLSL (OpenGL Shading Language with syntax similar to C). GLSL is executed directly by the graphics pipeline.<\/p>\n\n\n\n

The executable shader program consists of 2 shaders: Vertex Shader, which processes vertex data and transforms vertex (points) positions into 3D drawing coordinates. Output goes to rasterizer, which will call Fragment (Pixel) Shader for every involved pixel.<\/p>\n\n\n\n

  1. Vertex Shader<\/strong>:<\/li><\/ol>\n\n\n
    \n#version 320 es\nprecision lowp float;\nuniform mat4 uMVP; \/\/ transform matrix (Model-View-Projection)\nin vec3 aPos; \/\/ position attribute (x,y,z)\nvoid main(){\n  gl_Position = uMVP * vec4(aPos, 1.0);\n}\n\n<\/pre><\/div>\n\n\n
    <\/p>\n\n\n\n
    Copy this code to a Text Editor<\/strong> and save it as a txt <\/em>file in<\/p>\n\n\n\n
    C:\\CPP\\engine\\dt\\shaders\\flat_ucolor_v.txt<\/strong><\/em><\/p>\n\n\n\n
    Hope, there is no need to explain what it does, guess it’s obvious enough. Or you can check the GLSL documentation online.<\/p>\n\n\n\n
    • Ok to delete test0.txt<\/em> from there. We won’t need it any more.<\/li><\/ul>\n\n\n\n
      \n\n\n\n
      2. Fragment (Pixel) Shader<\/strong>:<\/p>\n\n\n
      \n#version 320 es\nprecision lowp float;\nuniform vec4 uColor;\nout vec4 FragColor; \/\/output pixel color\nvoid main(){\n  FragColor = uColor;\n}\n\n<\/pre><\/div>\n\n\n
      <\/p>\n\n\n\n
      Save this code as a txt <\/em>file in<\/p>\n\n\n\n
       C:\\CPP\\engine\\dt\\shaders\\flat_ucolor_f<\/strong>.txt<\/em> <\/p>\n\n\n\n
      \n\n\n\n
      Now let’s try to use them.<\/p>\n\n\n\n
      Windows<\/h2>\n\n\n\n
      3. Start VS. Open C:\\CPP\\a999hello\\p_windows\\p_windows.sln<\/em>.<\/p>\n\n\n\n
      \n\n\n\n
      First, we’ll need a function checking for GL errors. We’ll place it in a separate utils <\/strong>set.<\/p>\n\n\n\n
      4. Under xEngine <\/em>add New Item<\/strong><\/p>\n\n\n\n
      • Header File (.h)<\/em><\/li>
      • Name: utils.h<\/em><\/li>
      • Location: C:\\CPP\\engine\\<\/em><\/li><\/ul>\n\n\n\n
        Code:<\/p>\n\n\n
        \n#pragma once\n#include <string>\n\nint checkGLerrors(std::string ref);\n\n<\/pre><\/div>\n\n\n
        <\/p>\n\n\n\n
        \n\n\n\n
        5. Under xEngine <\/em>add New Item<\/strong><\/p>\n\n\n\n
        • C++ File (.cpp)<\/em><\/li>
        • Name: utils.cpp<\/em><\/li>
        • Location: C:\\CPP\\engine\\<\/em><\/li><\/ul>\n\n\n\n
          Code:<\/p>\n\n\n
          \n#include "platform.h"\n#include <string>\n\nint checkGLerrors(std::string ref) {\n    \/\/can be used after any GL call\n    int res = glGetError();\n    if (res == 0)\n        return 0;\n    std::string errCode;\n    switch (res) {\n        \/\/case GL_NO_ERROR: errCode = "GL_NO_ERROR"; break;\n        case GL_INVALID_ENUM: errCode = "GL_INVALID_ENUM"; break;\n        case GL_INVALID_VALUE: errCode = "GL_INVALID_VALUE"; break;\n        case GL_INVALID_OPERATION: errCode = "GL_INVALID_OPERATION"; break;\n        case GL_INVALID_FRAMEBUFFER_OPERATION: errCode = "GL_INVALID_FRAMEBUFFER_OPERATION"; break;\n        case GL_OUT_OF_MEMORY: errCode = "GL_OUT_OF_MEMORY"; break;\n        default: errCode = "??"; break;\n    }\n    mylog("GL ERROR %d-%s in %s\\n", res, errCode.c_str(), ref.c_str());\n    return -1;\n}\n\n<\/pre><\/div>\n\n\n
          <\/p>\n\n\n\n
          \n\n\n\n
          We’ll place shaders-related code in a separate Shaders <\/strong>class. <\/p>\n\n\n\n
          6. Under xEngine <\/em>add New Item<\/strong><\/p>\n\n\n\n
          • Header File (.h)<\/em><\/li>
          • Name: Shader.h<\/em><\/li>
          • Location: C:\\CPP\\engine\\<\/em><\/li><\/ul>\n\n\n\n
            Code:<\/p>\n\n\n
            \n#pragma once\n#include "platform.h"\n#include <string>\n\nclass Shader\n{\npublic:\n\tstatic int linkShaderProgram(const char* filePathVertexS, const char* filePathFragmentS);\n\tstatic int compileShader(const char* filePath, GLenum shaderType);\n\n\tstatic int shaderErrorCheck(int shaderId, std::string ref);\n\tstatic int programErrorCheck(int programId, std::string ref);\n};\n\n<\/pre><\/div>\n\n\n
            <\/p>\n\n\n\n
            \n\n\n\n
            7. Under xEngine <\/em>add New Item<\/strong><\/p>\n\n\n\n
            • C++ File (.cpp)<\/em><\/li>
            • Name: Shader.cpp<\/em><\/li>
            • Location: C:\\CPP\\engine\\<\/em><\/li><\/ul>\n\n\n\n
              Code:<\/p>\n\n\n
              \n#include "Shader.h"\n#include "platform.h"\n#include "utils.h"\n\nGLchar infoLog[1024];\nint logLength;\nint Shader::shaderErrorCheck(int shaderId, std::string ref) {\n    \/\/use after glCompileShader()\n    if (checkGLerrors(ref) > 0)\n        return -1;\n    glGetShaderInfoLog(shaderId, 1024, &logLength, infoLog);\n    if (logLength == 0)\n        return 0;\n    mylog("%s shader infoLog:\\n%s\\n", ref.c_str(), infoLog);\n    return -1;\n}\nint Shader::programErrorCheck(int programId, std::string ref) {\n    \/\/use after glLinkProgram()\n    if (checkGLerrors(ref) > 0)\n        return -1;\n    glGetProgramInfoLog(programId, 1024, &logLength, infoLog);\n    if (logLength == 0)\n        return 0;\n    mylog("%s program infoLog:\\n%s\\n", ref.c_str(), infoLog);\n    return -1;\n}\n\nint Shader::compileShader(const char* filePath, GLenum shaderType) {\n    int shaderId = glCreateShader(shaderType);\n    FILE* pFile;\n    myFopen_s(&pFile, filePath, "rt");\n    if (pFile != NULL)\n    {\n        \/\/ obtain file size:\n        fseek(pFile, 0, SEEK_END);\n        int fSize = ftell(pFile);\n        rewind(pFile);\n        \/\/ size obtained, create buffer\n        char* shaderSource = new char[fSize + 1];\n        fSize = fread(shaderSource, 1, fSize, pFile);\n        shaderSource[fSize] = 0;\n        fclose(pFile);\n        \/\/ source code loaded, compile\n        glShaderSource(shaderId, 1, (const GLchar**)&shaderSource, NULL);\n        \/\/myglErrorCheck("glShaderSource");\n        glCompileShader(shaderId);\n        if (shaderErrorCheck(shaderId, "glCompileShader") < 0)\n            return -1;\n        delete[] shaderSource;\n    }\n    else {\n        mylog("ERROR loading %s\\n", filePath);\n        return -1;\n    }\n    return shaderId;\n}\nint Shader::linkShaderProgram(const char* filePathVertexS, const char* filePathFragmentS) {\n    int vertexShaderId = compileShader(filePathVertexS, GL_VERTEX_SHADER);\n    int fragmentShaderId = compileShader(filePathFragmentS, GL_FRAGMENT_SHADER);\n    int programId = glCreateProgram();\n    glAttachShader(programId, vertexShaderId);\n    glAttachShader(programId, fragmentShaderId);\n    glLinkProgram(programId);\n    if (programErrorCheck(programId, "glLinkProgram") < 0)\n        return -1;\n    \/\/don't need shaders any longer - detach and delete them\n    glDetachShader(programId, vertexShaderId);\n    glDetachShader(programId, fragmentShaderId);\n    glDeleteShader(vertexShaderId);\n    glDeleteShader(fragmentShaderId);\n    return programId;\n}\n\n<\/pre><\/div>\n\n\n
              <\/p>\n\n\n\n
              \n\n\n\n
              Please note, that in compileShader(..)<\/em> function, for opening a file, we are using our own custom function myFopen_s <\/strong>(line 31, same syntax as fopen_s<\/em>). The reason is: in Windows old-fashioned fopen <\/em>is deprecated, must use fopen_s<\/em>, while on Android fopen_s <\/em>is not implemented yet, must use fopen<\/em>. So, we need 2 platform-specific<\/strong> implementations.<\/p>\n\n\n\n
              8. Open platform.h<\/em> and replace code by following:<\/p>\n\n\n
              \n#pragma once\n#include <glad\/glad.h>\n#include <stdio.h>\n\nvoid mylog(const char* _Format, ...);\nvoid mySwapBuffers();\nvoid myPollEvents();\nint myFopen_s(FILE** pFile, const char* filePath, const char* mode);\n\n<\/pre><\/div>\n\n\n
              <\/p>\n\n\n\n
              \n\n\n\n
              9. Open platform.cpp<\/em> and replace code by following: <\/p>\n\n\n
              \n#include <stdarg.h>\n#include <stdio.h>\n#include <GLFW\/glfw3.h>\n#include "platform.h"\n#include "TheGame.h"\n\nextern GLFWwindow* myMainWindow;\nextern TheGame theGame;\n\nvoid mylog(const char* _Format, ...) {\n#ifdef _DEBUG\n    va_list _ArgList;\n    va_start(_ArgList, _Format);\n    vprintf(_Format, _ArgList);\n    va_end(_ArgList);\n#endif\n};\nvoid mySwapBuffers() {\n    glfwSwapBuffers(myMainWindow);\n}\nvoid myPollEvents() {\n    glfwPollEvents();\n    \/\/check if closing the window\n    theGame.bExitGame = glfwWindowShouldClose(myMainWindow);\n    \/\/check screen size\n    int width, height;\n    glfwGetFramebufferSize(myMainWindow, &width, &height);\n    theGame.onScreenResize(width, height);\n}\nint myFopen_s(FILE** pFile, const char* filePath, const char* mode) {\n    return fopen_s(pFile, filePath, mode);\n}\n\n<\/pre><\/div>\n\n\n
              <\/p>\n\n\n\n
              \n\n\n\n
              10. Now, open TheGame.cpp<\/em> and replace code by following:<\/p>\n\n\n
              \n#include "TheGame.h"\n#include "platform.h"\n#include "linmath.h"\n#include "Shader.h"\n\nextern std::string filesRoot;\n\nstatic const struct\n{\n    float x, y, z;\n} vertices[3] =\n{\n    { -0.6f, -0.4f, 0.f },\n    {  0.6f, -0.4f, 0.f },\n    {   0.f,  0.6f, 0.f }\n};\n\nunsigned int vao_buffer, vertex_buffer, shaderProgramId;\nint umvp_location, apos_location, ucol_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_ucolor_v.txt").c_str(), (filesRoot + "\/dt\/shaders\/flat_ucolor_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    ucol_location = glGetUniformLocation(shaderProgramId, "uColor");\n\n    glUseProgram(shaderProgramId);\n\n    float uColor[4] = { 1.f, 0.f, 1.f, 1.f }; \/\/R,G,B, alpha\n    glUniform4fv(ucol_location, 1, uColor);\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_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_TRIANGLES, 0, 3);\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
              Now it’s almost twice shorter.<\/p>\n\n\n\n
              Important changes:<\/p>\n\n\n\n
              • No more hard-coded inline shaders vertex_shader_text <\/em>and fragment_shader_text<\/em>.<\/li>
              • Don’t need variables vertex_shader <\/em>and fragment_shader <\/em>either.<\/li>
              • Triangle vertex data structure is different. Instead of (2D coordinates + color) now we have (3D coordinates, no color).<\/li>
              • Few variables renamed for the sake of consistency.<\/li><\/ul>\n\n\n\n
                <\/p>\n\n\n\n
                \n\n\n\n
                11. Build and run:<\/p>\n\n\n\n
                <\/p>\n\n\n\n
                <\/p>\n\n\n\n
                Perfect.<\/p>\n\n\n\n
                \n\n\n\n
                Now – on<\/p>\n\n\n\n
                Android<\/h2>\n\n\n\n
                12. Close and re-start Visual Studio, open C:\\CPP\\a999hello\\p_android\\p_android.sln<\/em><\/p>\n\n\n\n
                \n\n\n\n
                13. Under xEngine <\/em>add Existing Item<\/strong><\/p>\n\n\n\n
                Go to C:\\CPP\\engine<\/em>, pick<\/p>\n\n\n\n
                • Shader.cpp<\/li>
                • Shader.h<\/li>
                • utils.cpp<\/li>
                • utils.h<\/li><\/ul>\n\n\n\n
                  Add<\/strong><\/p>\n\n\n\n
                  \n\n\n\n
                  Need to add Android’s myFopen_s(..)<\/em> implementation.<\/p>\n\n\n\n
                  14. Open platform.h<\/em> and replace code by following:<\/p>\n\n\n
                  \n#pragma once\n\nvoid mylog(const char* _Format, ...);\nvoid mySwapBuffers();\nvoid myPollEvents();\nint myFopen_s(FILE** pFile, const char* filePath, const char* mode);\n\n<\/pre><\/div>\n\n\n
                  <\/p>\n\n\n\n
                  \n\n\n\n
                  15.  Open platform.cpp<\/em> and replace code by following: <\/p>\n\n\n
                  \n#include <android\/log.h>\n#include "stdio.h"\n#include "TheGame.h"\n\nextern struct android_app* androidApp;\nextern const ASensor* accelerometerSensor;\nextern ASensorEventQueue* sensorEventQueue;\n\nextern EGLDisplay androidDisplay;\nextern EGLSurface androidSurface;\nextern TheGame theGame;\n\nvoid mylog(const char* _Format, ...) {\n#ifdef _DEBUG\n    char outStr[1024];\n    va_list _ArgList;\n    va_start(_ArgList, _Format);\n    vsprintf(outStr, _Format, _ArgList);\n    __android_log_print(ANDROID_LOG_INFO, "mylog", outStr, NULL);\n    va_end(_ArgList);\n#endif\n};\n\nvoid mySwapBuffers() {\n\teglSwapBuffers(androidDisplay, androidSurface);\n}\nvoid myPollEvents() {\n\t\/\/ Read all pending events.\n\tint ident;\n\tint events;\n\tstruct android_poll_source* source;\n\n\t\/\/ If not animating, we will block forever waiting for events.\n\t\/\/ If animating, we loop until all events are read, then continue\n\t\/\/ to draw the next frame of animation.\n\twhile ((ident = ALooper_pollAll(0, NULL, &events,\n\t\t(void**)&source)) >= 0) {\n\n\t\t\/\/ Process this event.\n\t\tif (source != NULL) {\n\t\t\tsource->process(androidApp, source);\n\t\t}\n\n\t\t\/\/ If a sensor has data, process it now.\n\t\tif (ident == LOOPER_ID_USER) {\n\t\t\tif (accelerometerSensor != NULL) {\n\t\t\t\tASensorEvent event;\n\t\t\t\twhile (ASensorEventQueue_getEvents(sensorEventQueue,\n\t\t\t\t\t&event, 1) > 0) {\n\t\t\t\t\t\/\/LOGI("accelerometer: x=%f y=%f z=%f",\n\t\t\t\t\t\/\/\tevent.acceleration.x, event.acceleration.y,\n\t\t\t\t\t\/\/\tevent.acceleration.z);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t\/\/ Check if we are exiting.\n\t\tif (androidApp->destroyRequested != 0) {\n\t\t\ttheGame.bExitGame = true;\n\t\t\tbreak;\n\t\t}\n\t}\n}\nint myFopen_s(FILE** pFile, const char* filePath, const char* mode) {\n\t*pFile = fopen(filePath, mode);\n\tif (*pFile == NULL) {\n\t\tmylog("ERROR: can't open file %s\\n", filePath);\n\t\treturn -1;\n\t}\n\treturn 1;\n}\n\n<\/pre><\/div>\n\n\n
                  <\/p>\n\n\n\n
                  \n\n\n\n
                  16. Turn on, unlock, plug in, allow.<\/p>\n\n\n\n
                  Build and run.<\/p>\n\n\n\n
                  Good.<\/p>\n\n\n\n
                  \n","protected":false},"excerpt":{"rendered":"
                  Finally, shaders! Let’s start from the easiest one, just flat uniform color, which we will pass to the shader as an input, along with mesh data (in our sample – a triangle). Shaders use GLSL (OpenGL Shading Language with syntax similar to C). GLSL is executed directly by the graphics pipeline. The executable shader program […]<\/p>\n","protected":false},"author":1,"featured_media":452,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-438","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\/438","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=438"}],"version-history":[{"count":26,"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/posts\/438\/revisions"}],"predecessor-version":[{"id":465,"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/posts\/438\/revisions\/465"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/media\/452"}],"wp:attachment":[{"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/media?parent=438"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/categories?post=438"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/tags?post=438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}