My experiments with Wasm and OpenGL

The last few weeks, OpenGL got my eye (straightforward, it’s a plague challenge that nerd seizes me). I have 0 experience with OpenGL WhatsSover and think it can be a good time to give a shot the graphics! If there is nothing at least the graphic concepts I have forgotten after my 6th semester.

However, I need to discuss that this post is not intended to be a learning guide for OpenGL or WASM, I am attached resources at the end of the same. This is to be my journal of kinds about all the mistakes I do in the last 10 days.

Challenge specifics

• Provide 1 million spheres.
• Maintain the dynamic light in the scene.
• Highlight for each space.
• Press to 60 fps.

My way

The specs in which my bad M1 was able to give its spheres –

1. Translated 10k spheres with instances of techniques.
2. A light source to imitate Phong’s light with accurate attention method.
3. 4 Extraordinary Texture Support (You can add as much as you want).

Stress attempt at this project appears to be around 100k spheres can be translated locally before it starts cracking. .

It gives the following mini demo

Wasm and OpenGL

A funny thing happened as I try to demo it. Bad laptop decides to disrupt and load half-backed scene with a quarter of scene lost! At that time the coming times, maybe time to push it on the web and not my machine is a blocker for the demo.

The solution?

Port is the full WASM and WebGL project. The project is already in C ++ and OpenGL, so this is something that finds the correct libraries and tools to enable it on the web. Grateful, LLM is your friend to conversions while marshes is the tool for this job.

Iframe below is project demo built specifically for the web. (Remember, give it sometimes, it takes a few seconds to stay away from a brown screen to real scenery).

🎮 Camera Control

To play around the demo, use these keys –

Errors through the process 🤦🏾

I believe someone can learn this tech with the resource and LLMS presence, it’s worth talking about the errors that your cursor will not know the error after a period of composition.

Error 1: Extraordinary flat space instead of a round space.

VBO and VAO are the bread and butter in OpenLL despite likely not always girecumented by LLMS or tutorials. I added add colors, changes and then textures to my Spheranced spheres. For some reason, textures are issued as shown in the image.

Before I talk about guilty, let me explain what to enter something. There is a VAO (vertex array thing) which stores mapping of VBO (vertex buffer object) to shader characteristics. VBO stores vertices, indexes and texture coordinates. The shader then used these attitudes to give the item.

Your shader (written to glsl) Looking forward to the inputs provided by VAO. My vertex shader (the one responsible for changing vertices) like this –

#version 330 core
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec3 aNormal;
layout (location = 2) in vec2 aTexCoords;
layout (location = 3) in mat4 instanceMatrix;
layout (location = 7) in vec4 instanceColor;
layout (location = 8) in int textureIndex;

out vec3 Normal;
out vec3 currentPosition;
out vec4 color;
out vec2 textCoords;
flat out int TexIndex; 

uniform mat4 camMatrix;
uniform mat4 model;

void main()
{
    currentPosition = vec3(instanceMatrix * vec4(aPos, 1.0f));
    gl_Position = camMatrix * vec4(currentPosition, 1.0);
    Normal = normalize(aNormal);
    color = instanceColor;
    TexIndex = textureIndex;
    textCoords = aTexCoords;
}

It removes the following elements as input –

1. In position 0, vertex positions.
2. In position 1, the norms.
3. In position 2, texture coordination.
4. In position 3, the matrix change for the occasion of the content.
5. In position 7, the color of the occasion. (Why 7? The Matrix Change 4×4 in size).
6. In position 8, the texture index, ie, which texture should be given here.

It’s nice to hear, now how can I map it? See the code below.

// src/InstancedSphere.cpp
    shapeVAO.LinkAttrib(shapeVBO, 0, 3, GL_FLOAT, 8 * sizeof(float), (void *)0);                   // saved the basic mesh points.
    shapeVAO.LinkAttrib(shapeVBO, 1, 3, GL_FLOAT, 8 * sizeof(float), (void *)(3 * sizeof(float))); // save the indices from the same shape buffer
    shapeVAO.LinkAttrib(shapeVBO, 2, 2, GL_FLOAT, 8 * sizeof(float), (void *)(6 * sizeof(float))); // save texture coords

    instanceVBO = VBO(mat4s);
    for (int i = 0; i < 4; i++)
    {
        shapeVAO.LinkAttrib(instanceVBO, 2 + i, 4, GL_FLOAT, sizeof(glm::mat4), (void *)(i * sizeof(glm::vec4)));
        glVertexAttribDivisor(2 + i, 1); // This tells OpenGL this is per-instance
    }
    colorVBO = VBO(instanceColors);                                              // this should be dynamic
    shapeVAO.LinkAttrib(colorVBO, 6, 4, GL_FLOAT, 4 * sizeof(float), (void *)0); // link the indices from the color buffer.
    glVertexAttribDivisor(6, 1);

    textureVBO = VBO(instanceTextures);
    textureVBO.Bind();
    shapeVAO.LinkAttrib(textureVBO, 7, 1, GL_INT, sizeof(int), (void *)0); // link texture ids

Here I link the following:

1. In position 0, map the first 3 shader buffer elements to act as Vertex locations.
2. In position 1, map map map
3. In position 2, map map of shader buffer elements to act as texture coordinates.
4. In position 2 + i, map the chance buffer iTh element of shader to act as an array of change in matrix, $ (i \ in (0.3)) $.
5. In position 6, map 4 elements of color buffer
6. In position 7, map the element of the shader’s texture buffer to act as the texture index.

Did the mistake see?

I beat the texture coordinate in the matte change row 🙂 The correct map should be

    for (int i = 0; i < 4; i++)
    {
        shapeVAO.LinkAttrib(instanceVBO, 3 + i, 4, GL_FLOAT, sizeof(glm::mat4), (void *)(i * sizeof(glm::vec4)));
        glVertexAttribDivisor(3 + i, 1); // This tells OpenGL this is per-instance
    }
    colorVBO = VBO(instanceColors);                                              // this should be dynamic
    shapeVAO.LinkAttrib(colorVBO, 7, 4, GL_FLOAT, 4 * sizeof(float), (void *)0); // link the indices from the color buffer.
    glVertexAttribDivisor(7, 1);

    textureVBO = VBO(instanceTextures);
    textureVBO.Bind();
    shapeVAO.LinkAttrib(textureVBO, 8, 1, GL_INT, sizeof(int), (void *)0); // link texture ids

Error 2: Vao used between spheres and lightly resources.

There is a reason why I use points in individual meters for spheres and light things. Earlier when I am using individual things to attract more spheres (see src/Spheres.cpp), I informed that spheres suddenly interpreted as cubes with some hemispherical lights on it, like this:

Why is it happening? Let’s see how it started:

        std::vector<Sphere> spheres = {
		new Sphere(0.3f, 20, 20, glm::vec3(-1.0f, 0.0f, -2.0f)),
		new Sphere(0.3f, 20, 20, glm::vec3(1.0f, 0.0f, -2.0f)),
		new Sphere(0.3f, 20, 20, glm::vec3(0.0f, 1.0f, -3.0f)),
		new Sphere(0.3f, 20, 20, glm::vec3(0.0f, -1.0f, -3.0f)),
		new Sphere(0.3f, 20, 20, glm::vec3(-1.5f, 1.5f, -4.0f)),
		new Sphere(0.3f, 20, 20, glm::vec3(1.5f, 1.5f, -4.0f)),
		new Sphere(0.3f, 20, 20, glm::vec3(-1.5f, -1.5f, -4.0f)),
		new Sphere(0.3f, 20, 20, glm::vec3(1.5f, -1.5f, -4.0f))};
		
		// some code
		
		VAO lightVAO;
		lightVAO.Bind();

• You start spheres in their own VAO and voos inside. IDs from 1-8 registered in each space.
• The moment these things in the sphere were made and vector pushed, they were deconstructs and the id before spheres (1-8) were released.
• Today, you tie light and the id 1 used for the light object, so broke vertex transding to all spheres!

Solution? You can laugh at it.

   std::vector<Sphere*> spheres

Finally

I’m having fun. In fact it is fun to do something without purpose and only for learning to learn. I’ll read those who gather next (now a big black box for me in terms of implementation, very happy for it!)

See you next? : D

Outset

1. Open resources
2. Webgl resource
3. Tutorial series