Added texture related functions to gl_functions.js
This commit is contained in:
167
test_app.c
167
test_app.c
@@ -12,11 +12,15 @@ struct
|
||||
{
|
||||
GlId positionBuffer;
|
||||
GlId colorBuffer;
|
||||
GlId texCoordBuffer;
|
||||
GlId vao;
|
||||
GlId dotTexture;
|
||||
GlId testTexture;
|
||||
|
||||
GlId vertexShader;
|
||||
GlId fragmentShader;
|
||||
GlId testShader;
|
||||
GlId testUniformLocation;
|
||||
GlId texture1Location;
|
||||
GlId worldMatrixLocation;
|
||||
GlId viewMatrixLocation;
|
||||
GlId projMatrixLocation;
|
||||
@@ -53,9 +57,13 @@ WASM_EXPORT(App_Initialize) void App_Initialize()
|
||||
memset(&app, 0x00, sizeof(app));
|
||||
|
||||
r32 positions[] = {
|
||||
-0.7, -0.7, // left bottom corner
|
||||
0.7, -0.7, // right bottom corner
|
||||
0.0, 0.7 // center top corner
|
||||
0.0, 0.0,
|
||||
1.0, 0.0,
|
||||
0.0, 1.0,
|
||||
|
||||
1.0, 1.0,
|
||||
0.0, 1.0,
|
||||
1.0, 0.0
|
||||
};
|
||||
app.positionBuffer = jsGlCreateBuffer();
|
||||
jsGlBindBuffer(GL_ARRAY_BUFFER, app.positionBuffer);
|
||||
@@ -63,14 +71,32 @@ WASM_EXPORT(App_Initialize) void App_Initialize()
|
||||
|
||||
u8 colors[] = {
|
||||
// R , G , B
|
||||
255, 0, 0, // red
|
||||
0, 255, 0, // green
|
||||
0, 0, 255 // blue
|
||||
255, 255, 255,
|
||||
255, 255, 255,
|
||||
255, 255, 255,
|
||||
|
||||
255, 255, 255,
|
||||
255, 255, 255,
|
||||
255, 255, 255,
|
||||
};
|
||||
app.colorBuffer = jsGlCreateBuffer();
|
||||
jsGlBindBuffer(GL_ARRAY_BUFFER, app.colorBuffer);
|
||||
jsGlBufferData(GL_ARRAY_BUFFER, sizeof(colors), &colors[0], GL_STATIC_DRAW);
|
||||
|
||||
r32 texCoords[] = {
|
||||
// U, V
|
||||
0.0f, 0.0f,
|
||||
1.0f, 0.0f,
|
||||
0.0f, 1.0f,
|
||||
|
||||
1.0f, 1.0f,
|
||||
0.0f, 1.0f,
|
||||
1.0f, 0.0f,
|
||||
};
|
||||
app.texCoordBuffer = jsGlCreateBuffer();
|
||||
jsGlBindBuffer(GL_ARRAY_BUFFER, app.texCoordBuffer);
|
||||
jsGlBufferData(GL_ARRAY_BUFFER, sizeof(texCoords), &texCoords[0], GL_STATIC_DRAW);
|
||||
|
||||
app.vao = jsGlCreateVertexArray();
|
||||
jsGlBindVertexArray(app.vao); // start "recording"
|
||||
// position attribute data
|
||||
@@ -79,7 +105,7 @@ WASM_EXPORT(App_Initialize) void App_Initialize()
|
||||
jsGlVertexAttribPointer(
|
||||
0, // attrib location
|
||||
2, // components per element: vec2 for our postition data
|
||||
GL_FLOAT, // buffer data type: we have Float32Array
|
||||
GL_FLOAT,
|
||||
false, // whether the data is normalized to 0.0 1.0 range in shaders
|
||||
0, // stride, not important atm
|
||||
0 // offset, not important atm
|
||||
@@ -92,11 +118,77 @@ WASM_EXPORT(App_Initialize) void App_Initialize()
|
||||
3, // components per element:
|
||||
GL_UNSIGNED_BYTE, // we have Uint8Array
|
||||
true, // the 0..255 is normalized into 0.0...1.0 in shaders
|
||||
0,
|
||||
0
|
||||
0, //stride
|
||||
0 //offset
|
||||
);
|
||||
// texCoord attribute data
|
||||
jsGlBindBuffer(GL_ARRAY_BUFFER, app.texCoordBuffer);
|
||||
jsGlEnableVertexAttribArray(2);
|
||||
jsGlVertexAttribPointer(
|
||||
2, // attrib location
|
||||
2, // components per element:
|
||||
GL_FLOAT,
|
||||
false, // not normalized
|
||||
0, //stride
|
||||
0 //offset
|
||||
);
|
||||
jsGlBindVertexArray(0); // end "recording"
|
||||
|
||||
app.dotTexture = jsGlCreateTexture();
|
||||
jsGlActiveTexture(GL_TEXTURE0);
|
||||
jsGlBindTexture(GL_TEXTURE_2D, app.dotTexture);
|
||||
u32 dotPixel = 0xFFFFFFFF;
|
||||
jsGlTexImage2D(
|
||||
GL_TEXTURE_2D, //bound texture type
|
||||
0, //image level
|
||||
GL_RGBA, //internal format
|
||||
1, //image width
|
||||
1, //image height
|
||||
0, //border
|
||||
GL_RGBA, //format
|
||||
GL_UNSIGNED_BYTE, //type
|
||||
sizeof(dotPixel), //dataLength
|
||||
&dotPixel //dataPntr
|
||||
);
|
||||
jsGlTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST_MIPMAP_NEAREST);
|
||||
jsGlTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
|
||||
jsGlTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
|
||||
jsGlTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
|
||||
jsGlGenerateMipmap(GL_TEXTURE_2D);
|
||||
|
||||
app.testTexture = jsGlCreateTexture();
|
||||
jsGlActiveTexture(GL_TEXTURE0);
|
||||
jsGlBindTexture(GL_TEXTURE_2D, app.testTexture);
|
||||
u32 testPixels[] = {
|
||||
0xFFEEEEEE, 0xFFDDDDEE, 0xFFCCCCEE, 0xFFBBBBEE, 0xFFAAAAEE, 0xFF9999EE, 0xFF8888EE, 0xFF7777EE, 0xFF6666EE, 0xFF5555EE,
|
||||
0xFFEEEEDD, 0xFFDDDDDD, 0xFFCCCCDD, 0xFFBBBBDD, 0xFFAAAADD, 0xFF9999DD, 0xFF8888DD, 0xFF7777DD, 0xFF6666DD, 0xFF5555DD,
|
||||
0xFFEEEECC, 0xFFDDDDCC, 0xFFCCCCCC, 0xFFBBBBCC, 0xFFAAAACC, 0xFF9999CC, 0xFF8888CC, 0xFF7777CC, 0xFF6666CC, 0xFF5555CC,
|
||||
0xFFEEEEBB, 0xFFDDDDBB, 0xFFCCCCBB, 0xFFBBBBBB, 0xFFAAAABB, 0xFF9999BB, 0xFF8888BB, 0xFF7777BB, 0xFF6666BB, 0xFF5555BB,
|
||||
0xFFEEEEAA, 0xFFDDDDAA, 0xFFCCCCAA, 0xFFBBBBAA, 0xFFAAAAAA, 0xFF9999AA, 0xFF8888AA, 0xFF7777AA, 0xFF6666AA, 0xFF5555AA,
|
||||
0xFFEEEE99, 0xFFDDDD99, 0xFFCCCC99, 0xFFBBBB99, 0xFFAAAA99, 0xFF999999, 0xFF888899, 0xFF777799, 0xFF666699, 0xFF555599,
|
||||
0xFFEEEE88, 0xFFDDDD88, 0xFFCCCC88, 0xFFBBBB88, 0xFFAAAA88, 0xFF999988, 0xFF888888, 0xFF777788, 0xFF666688, 0xFF555588,
|
||||
0xFFEEEE77, 0xFFDDDD77, 0xFFCCCC77, 0xFFBBBB77, 0xFFAAAA77, 0xFF999977, 0xFF888877, 0xFF777777, 0xFF666677, 0xFF555577,
|
||||
0xFFEEEE66, 0xFFDDDD66, 0xFFCCCC66, 0xFFBBBB66, 0xFFAAAA66, 0xFF999966, 0xFF888866, 0xFF777766, 0xFF666666, 0xFF555566,
|
||||
0xFFEEEE55, 0xFFDDDD55, 0xFFCCCC55, 0xFFBBBB55, 0xFFAAAA55, 0xFF999955, 0xFF888855, 0xFF777755, 0xFF666655, 0xFF555555,
|
||||
};
|
||||
jsGlTexImage2D(
|
||||
GL_TEXTURE_2D, //bound texture type
|
||||
0, //image level
|
||||
GL_RGBA, //internal format
|
||||
10, //image width
|
||||
10, //image height
|
||||
0, //border
|
||||
GL_RGBA, //format
|
||||
GL_UNSIGNED_BYTE, //type
|
||||
sizeof(testPixels), //dataLength
|
||||
&testPixels //dataPntr
|
||||
);
|
||||
jsGlTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
|
||||
jsGlTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
|
||||
jsGlTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
|
||||
jsGlTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
|
||||
jsGlGenerateMipmap(GL_TEXTURE_2D);
|
||||
|
||||
app.vertexShader = jsGlCreateShader(GL_VERTEX_SHADER);
|
||||
jsGlShaderSource(app.vertexShader, (int)strlen(VertexShaderCodeStr), VertexShaderCodeStr);
|
||||
jsGlCompileShader(app.vertexShader);
|
||||
@@ -112,8 +204,10 @@ WASM_EXPORT(App_Initialize) void App_Initialize()
|
||||
// also debug the program status
|
||||
if (!jsGlGetProgramParameterBool(app.testShader, GL_LINK_STATUS)) { WriteLine_E("Failed to link shader program!"); } //TODO: jsGlGetProgramInfoLog
|
||||
|
||||
const char* uniformName = "TestUniform";
|
||||
app.testUniformLocation = jsGlGetUniformLocation(app.testShader, (int)strlen(uniformName), uniformName);
|
||||
// const char* uniformName = "TestUniform";
|
||||
// app.testUniformLocation = jsGlGetUniformLocation(app.testShader, (int)strlen(uniformName), uniformName);
|
||||
const char* texture1Name = "Texture1";
|
||||
app.texture1Location = jsGlGetUniformLocation(app.testShader, (int)strlen(texture1Name), texture1Name);
|
||||
const char* worldMatrixName = "WorldMatrix";
|
||||
app.worldMatrixLocation = jsGlGetUniformLocation(app.testShader, (int)strlen(worldMatrixName), worldMatrixName);
|
||||
const char* viewMatrixName = "ViewMatrix";
|
||||
@@ -127,10 +221,10 @@ WASM_EXPORT(App_Initialize) void App_Initialize()
|
||||
// +--------------------------------------------------------------+
|
||||
WASM_EXPORT(App_Close) void App_Close()
|
||||
{
|
||||
//TODO: Delete vao
|
||||
jsGlDeleteProgram(app.testShader);
|
||||
jsGlDeleteShader(app.vertexShader);
|
||||
jsGlDeleteShader(app.fragmentShader);
|
||||
jsGlDeleteVertexArray(app.vao);
|
||||
jsGlDeleteBuffer(app.positionBuffer);
|
||||
jsGlDeleteBuffer(app.colorBuffer);
|
||||
}
|
||||
@@ -155,6 +249,8 @@ WASM_EXPORT(App_UpdateAndRender) bool App_UpdateAndRender(r64 programTimeR64)
|
||||
jsGlClear(GL_COLOR_BUFFER_BIT);
|
||||
jsGlBindVertexArray(app.vao); // our vertex array object
|
||||
jsGlUseProgram(app.testShader); // our shader program
|
||||
jsGlActiveTexture(GL_TEXTURE0);
|
||||
jsGlBindTexture(GL_TEXTURE_2D, app.testTexture);
|
||||
|
||||
r32 identityMatrix[] = {
|
||||
1.0f, 0.0f, 0.0f, 0.0f,
|
||||
@@ -165,15 +261,16 @@ WASM_EXPORT(App_UpdateAndRender) bool App_UpdateAndRender(r64 programTimeR64)
|
||||
jsGlUniformMatrix4fv(app.viewMatrixLocation, &identityMatrix[0]);
|
||||
jsGlUniformMatrix4fv(app.projMatrixLocation, &identityMatrix[0]);
|
||||
|
||||
#if 0
|
||||
const u64 numTris = 75;
|
||||
for (u64 tIndex = 0; tIndex < numTris; tIndex++)
|
||||
{
|
||||
r32 uniformValues[] = {
|
||||
OscillateBy(programTime, 0.0f, 1.0f, 2000, 0 + tIndex*(2000/numTris)),
|
||||
OscillateBy(programTime, 0.0f, 1.0f, 2000, 1200 + tIndex*(2000/numTris)),
|
||||
OscillateBy(programTime, 0.0f, 1.0f, 2000, 700 + tIndex*(2000/numTris)),
|
||||
};
|
||||
jsGlUniform1fv(app.testUniformLocation, ArrayCount(uniformValues), &uniformValues[0]);
|
||||
// r32 uniformValues[] = {
|
||||
// OscillateBy(programTime, 0.0f, 1.0f, 2000, 0 + tIndex*(2000/numTris)),
|
||||
// OscillateBy(programTime, 0.0f, 1.0f, 2000, 1200 + tIndex*(2000/numTris)),
|
||||
// OscillateBy(programTime, 0.0f, 1.0f, 2000, 700 + tIndex*(2000/numTris)),
|
||||
// };
|
||||
// jsGlUniform1fv(app.testUniformLocation, ArrayCount(uniformValues), &uniformValues[0]);
|
||||
|
||||
r32 offsetX = OscillateBy(programTime, -0.1f, 0.1f, 3000, 0 + tIndex*(3000/numTris));
|
||||
r32 offsetY = OscillateBy(programTime, -0.1f, 0.1f, 3000, 750 + tIndex*(3000/numTris));
|
||||
@@ -186,8 +283,26 @@ WASM_EXPORT(App_UpdateAndRender) bool App_UpdateAndRender(r64 programTimeR64)
|
||||
0.0f, 0.0f, 0.0f, 1.0f,
|
||||
};
|
||||
jsGlUniformMatrix4fv(app.worldMatrixLocation, &worldMatrix[0]);
|
||||
jsGlDrawArrays(GL_TRIANGLES, 0, 3);
|
||||
jsGlDrawArrays(GL_TRIANGLES, 0, 6);
|
||||
}
|
||||
#endif
|
||||
|
||||
{
|
||||
r32 offsetX = 0.0f;
|
||||
r32 offsetY = 0.0f;
|
||||
r32 scaleX = 1.0f;
|
||||
r32 scaleY = 1.0f;
|
||||
r32 worldMatrix[] = {
|
||||
scaleX, 0.0f, 0.0f, offsetX,
|
||||
0.0f, scaleY, 0.0f, offsetY,
|
||||
0.0f, 0.0f, 1.0f, 0.0f,
|
||||
0.0f, 0.0f, 0.0f, 1.0f,
|
||||
};
|
||||
jsGlUniformMatrix4fv(app.worldMatrixLocation, &worldMatrix[0]);
|
||||
jsGlDrawArrays(GL_TRIANGLES, 0, 6);
|
||||
}
|
||||
|
||||
// if (programTime > 5000) { shouldContinue = false; }
|
||||
|
||||
app.frameIndex++;
|
||||
app.prevProgramTimeR64 = programTimeR64;
|
||||
@@ -219,12 +334,18 @@ static const char* VertexShaderCodeStr = "#version 300 es\n"
|
||||
"// this is the color attrib at index: 1\n"
|
||||
"layout(location=1) in vec3 aCol;\n"
|
||||
"\n"
|
||||
"// this is the texCoord attrib at index: 2\n"
|
||||
"layout(location=2) in vec2 aTexCoord;\n"
|
||||
"\n"
|
||||
"// this is the interpolate color which is\n"
|
||||
"// passed to the fragment shader\n"
|
||||
"out vec3 vCol;\n"
|
||||
"\n"
|
||||
"out vec2 vTexCoord;\n"
|
||||
"\n"
|
||||
"void main(){\n"
|
||||
" vCol = aCol; // just pass through the value \n"
|
||||
" vTexCoord = aTexCoord; // just pass through the value \n"
|
||||
" \n"
|
||||
" // vertex position for the shader program\n"
|
||||
" // always a vec4 value\n"
|
||||
@@ -234,14 +355,16 @@ static const char* VertexShaderCodeStr = "#version 300 es\n"
|
||||
static const char* FragmentShaderCodeStr = "#version 300 es\n"
|
||||
"precision highp float;\n"
|
||||
"\n"
|
||||
"uniform float TestUniform[3];\n"
|
||||
"uniform sampler2D Texture1;\n"
|
||||
"\n"
|
||||
"in vec3 vCol; // the data from vertex shader\n"
|
||||
"in vec2 vTexCoord; // the data from vertex shader\n"
|
||||
"\n"
|
||||
"// fragment output value\n"
|
||||
"// essentially the color of the output pixel\n"
|
||||
"out vec4 outCol;\n"
|
||||
"\n"
|
||||
"void main(){\n"
|
||||
" outCol = vec4(vec3(vCol.r * TestUniform[0], vCol.g * TestUniform[1], vCol.b * TestUniform[2]), 1.0);\n"
|
||||
" vec4 sampleColor = texture(Texture1, vTexCoord);\n"
|
||||
" outCol = vec4(vCol, 1.0) * sampleColor;\n"
|
||||
"}\n";
|
||||
|
||||
Reference in New Issue
Block a user