Added texture related functions to gl_functions.js

This commit is contained in:
2025-09-01 20:46:25 -07:00
parent 81f5457b61
commit 7c61189d3a
5 changed files with 259 additions and 38 deletions

View File

@@ -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";