# My step by step guides for SDL3 to build for Android and WebAssembly

**URL:** <https://discourse.libsdl.org/t/my-step-by-step-guides-for-sdl3-to-build-for-android-and-webassembly/50766>\
**Category:** SDL Development\
**Created:** [April 30, 2024, 11:39am UTC](https://discourse.libsdl.org/t/my-step-by-step-guides-for-sdl3-to-build-for-android-and-webassembly/50766 "2024-04-30T11:39:33Z")\
**Posts on this page:** 1\
**Showing post:** 46

<div class="post-metadata">

**Author:** ![8Observer8](https://discourse.libsdl.org/letter_avatar_proxy/v4/letter/8/bbe5ce/32.png) [@8Observer8](https://discourse.libsdl.org/u/8Observer8)\
**Post date:** [July 6, 2024, 12:44pm UTC](https://discourse.libsdl.org/t/my-step-by-step-guides-for-sdl3-to-build-for-android-and-webassembly/50766/46 "2024-07-06T12:44:42Z")

</div>

Tutorial: **How to add shaders and shader problem files to the CMake project of `sdl3-sample`**

- [Install the `sdl3-sample` template](https://8observer8.github.io/tutorials/sdl3/how-to-run-sd3-app-on-web/public/index.html)
- [Convert SDL rendering to OpenGL rendering](https://8observer8.github.io/tutorials/sdl3/convert-sdl3-api-rendering-to-opengles2-rendering/public/index.html)
- Create two shader files: `color.vert` and `color.frag` in the `sdl3-sample/assets/shaders` folder
- Open the `sdl3-sample/CMakeLists.txt` file and add this code:

```plaintext
if(CMAKE_SYSTEM_NAME MATCHES Emscripten)
	set(CMAKE_EXECUTABLE_SUFFIX ".html" CACHE INTERNAL "")

    target_link_options("${EXECUTABLE_NAME}" PRIVATE "SHELL:--embed-file ${CMAKE_CURRENT_SOURCE_DIR}/assets/shaders/color.vert@/assets/shaders/color.vert")
    set_property(TARGET "${EXECUTABLE_NAME}" APPEND PROPERTY LINK_DEPENDS "${CMAKE_CURRENT_SOURCE_DIR}/assets/shaders/color.vert")

    target_link_options("${EXECUTABLE_NAME}" PRIVATE "SHELL:--embed-file ${CMAKE_CURRENT_SOURCE_DIR}/assets/shaders/color.frag@/assets/shaders/color.frag")
    set_property(TARGET "${EXECUTABLE_NAME}" APPEND PROPERTY LINK_DEPENDS "${CMAKE_CURRENT_SOURCE_DIR}/assets/shaders/color.frag")

endif()

```

- Create the `sdl3-sample/src/shader_program.cpp` and `shader_probram.cpp` files inside of the `sdl3-sample/src` folder
- Add the `sdl3-sample/src/shader_program.cpp` line to the `sdl3-sample/CMakeLists.txt` file:

```plaintext
target_sources(${EXECUTABLE_NAME} 
PRIVATE 
    src/main.cpp
    src/iosLaunchScreen.storyboard
    src/Sample.appxManifest
    src/shader_program.cpp
)

```

- Copy the next content to the files:

assets/shaders/color.vert

```plaintext
attribute vec3 aPosition;

uniform mat4 uMvpMatrix;

void main()
{
    gl_Position = uMvpMatrix * vec4(aPosition, 1.0);
}

```

assets/shaders/color.frag

```plaintext
#ifdef GL_ES
precision mediump float;
#endif

uniform vec3 uColor;

void main()
{
    gl_FragColor = vec4(uColor, 1.0);
}

```

src/shader\_program.h

```cpp
#ifndef SHADER_PROGRAM_H
#define SHADER_PROGRAM_H

#include <SDL3/SDL_opengles2.h>
#include <string>

// Helper function for creating shaders
GLuint createShader(const char *shaderSource, int shaderType);

// Helper function for creating a shader program
GLuint createShaderProgram(const std::string vShaderPath, const std::string fShaderPath);

#endif // SHADER_PROGRAM_H

```

src/shader\_program.cpp

```cpp
#include "shader_program.h"

#include <iostream>
#include <fstream>
#include <iostream>
#include <sstream>

// Helper function for creating shaders
GLuint createShader(const char *shaderSource, int shaderType)
{
    GLuint shader = glCreateShader(shaderType);
    glShaderSource(shader, 1, &shaderSource, NULL);
    glCompileShader(shader);
    GLint status;
    glGetShaderiv(shader, GL_COMPILE_STATUS, &status);
    if (status == GL_FALSE)
    {
        GLint maxLength = 0;
        glGetShaderiv(shader, GL_INFO_LOG_LENGTH, &maxLength);
        std::vector<GLchar> errorLog(maxLength);
        glGetShaderInfoLog(shader, maxLength, &maxLength, &errorLog[0]);
        glDeleteShader(shader); // Don't leak the shader
        std::cout << &(errorLog[0]) << std::endl;
        std::cout << shaderSource << std::endl;
    }
    return shader;
}

// Helper function for creating a shader program
GLuint createShaderProgram(const std::string vShaderPath,
    const std::string fShaderPath)
{
    std::ifstream vf(vShaderPath);
    if (!vf.is_open())
    {
        std::cout << "Failed to open the file: " << vShaderPath << std::endl;
        return 0;
    }
    std::stringstream vsstr;
    vf >> vsstr.rdbuf();
    std::string vContent = vsstr.str();
    vf.close();

    std::ifstream ff(fShaderPath);
    if (!ff.is_open())
    {
        std::cout << "Failed to open the file: " << fShaderPath << std::endl;
        return 0;
    }
    std::stringstream fsstr;
    ff >> fsstr.rdbuf();
    std::string fContent = fsstr.str();
    ff.close();

    GLuint program = glCreateProgram();
    GLuint vShader = createShader(vContent.c_str(), GL_VERTEX_SHADER);
    GLuint fShader = createShader(fContent.c_str(), GL_FRAGMENT_SHADER);

    glAttachShader(program, vShader);
    glAttachShader(program, fShader);
    glLinkProgram(program);
    glUseProgram(program);

    return program;
}

```

---

_[View the full topic](https://discourse.libsdl.org/t/my-step-by-step-guides-for-sdl3-to-build-for-android-and-webassembly/50766)._