Real~Currents

Shaders

ESSL 3.00 provides two types of constants (uniform and attribute) and one type of variable (varying). The scope of a uniform (uniform) is global, available to all shaders in the program, while the scope of an attribute (in) is limited to the shader in which it is defined. The scope of a varying (in and out) bridges the shader in which it is defined and initialized with the shader in which it is received. There are multiple classes (storage qualifiers) available for uniforms, attributes and varyings, like:

vec3
vec4
mat4

There are also multiple levels of precision:

lowp
mediump
highp

I’ve had to make some changes to @sveltejs/gl, in order to create custom shaders, beginning by adding a declaration to all shaders compiled by Material.mjs:

    const { program, uniforms, attributes } = compile(
        gl,
        '#version 300 es' + '\n\n' + scene.defines + defines + '\n\n' + vert_builtin + '\n\n' + vert,
        '#version 300 es' + '\n\n' + scene.defines + defines + '\n\n' + frag_builtin + '\n\n' + frag
    );

Updating the shader version to 3.00 also required all attributes and varyings in the existing shaders to be re-declared using the new syntax. For example, what used to say:

attribute vec3 position;
attribute vec3 normal;

… had to be changed to say:

in vec3 position;
in vec3 normal;

The final output varying in the fragment shader also had to be changed because the gl_FragColor builtin was no longer valid:

out mediump vec4 fragColor;
...

#elif defined(has_color)
fragColor = vec4(color, 1.0);
#endif

#ifdef has_alpha
fragColor.a *= alpha;
#endif

fragColor.rgb *= mix(AMBIENT_LIGHT, vec3(1.0, 1.0, 1.0), lighting);
fragColor.rgb += spec_amount;

With these changes in place I can now use all the latest shader features within GL-powered SveltR apps and pages.