31st week: Goodbye WHV NZ

This week is my last chance to get a NZ WHV visa of my life. I didn’t get it, sad.

I wrote a page as a meme about Twitter changing its logo into X. Which was as a tutorial to learn shader in babylonjs.

raczzalan.webgl-glsl-editor is an extension for vscode to write glsl without a language server.

Using a shader material is simple, just pass ther vertex and fragments as a parameter.

        <sphere name="fireworks" ref={setSphere}>
            <shaderMaterial name="fireworks-mat"
                ref={setMat}
                shaderPath={{vertexSource, fragmentSource}}
                options={{
                    attributes: ["position", "normal", "uv"],
                    uniforms: ["worldViewProjection", "time"],
                    needAlphaBlending: true,
                }}
                backFaceCulling={false}
            />
        </sphere>

the attributes and uniforms are the variables that can be used in the shader. There are some varaibles that are automatically passed to the shader, like worldViewProjection and time. They are documented in threejs and babylonjs.

attribute is the data passed before compile and uniforms can be changed during rendering.

There are two functions to send attributes. mesh.setVerticesBuffer and mesh.registerInstancedBuffer. The first one is for the data that is the same for every vertex, this is a simple example, like the position of the vertex. The second one is for the data that is different for every instance, This is the example.

const centroidBuffer = new Buffer(engine, centroid, false, 3)
const centroidVBuffer = centroidBuffer.createVertexBuffer("center", 0, 3)
mesh.setVerticesBuffer(centroidVBuffer)

mesh.registerInstancedBuffer("direction", 3)
mesh.instancedBuffers.direction = directionBuffer

sending uniforms is simple. Like material.setFloat("time", time). Sadly the animation in babylon has not support shader material.

Next week, I will try to learn how to use the node editor with this video.