Abubu.js
The WebGL Computational Library
Tutorials 0 - Introduction 1 - Hello, triangle! 2 - Hello, rectangle! 3 - Unit rectangle 4 - Scaled unit rectangle 5 - Pixel positions 6 - Default vertex shader 7 - Circle by the fragment shader 8 - Iterations and the Mandelbrot set 9 - Macros and the Julia set 10 - Using textures as output 11 - Uniforms and interactions 12 - Time marching

Default vertex shader

The vertex shader below, which was also presented in the previous example is the default vertex shader in Abubu.Solver class.

#version 300 es
precision highp float ; // high percision for float variables 
precision highp int ;   // high percision for integer variables

in vec4 position;   // position of vertices as input of the shader

out vec2 pixPos ;   // pixel positions (out to fragment shader)
out vec2 cc    ;    // pixel positions (out to fragment shader)
// Main body of the vertex shader
void main() {
    pixPos = position.xy ;  // interpolate based on xy values
    cc     = position.xy ;  // interpolate based on xy values
    gl_Position = vec4(
                    position.x*2.-1.,   /* x-coordinate */
                    position.y*2.-1.,   /* y-coordinate */
                    position.z,         /* z-coordinate */
                    1.0);
}

If no vertex shader is provided to the Abubu.Solver, a vertex shader similar to the one above will be assumed. This shader is versatile enough for almost any computational need that we encountered when using Abubu.js.

We modified the previous example to the one below.

<!DOCTYPE html>
<html>
<!-- Head -->
<head>
<script src='http://abubujs.org/libs/Abubu.latest.js'
	type='text/javascript'></script>
</head>
<!-- body of the html page -->
<body>
    <canvas id="canvas_1" 
            width=512 height=512
            style="border:1px solid #000000;" >
        <!-- This message is displayed if canvas is not available -->
        Your browser does not support the HTML5 canvas tag.
    </canvas>
</body>

<!--!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!-->
<!-- NOTICE THE VERTEX SHADER IS REMOVED -->
<!--!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!-->

<!--&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&-->
<!-- fragment shader                                                  -->
<!--&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&-->
<script id='fshader' type='shader'>#version 300 es
precision highp float ;
precision highp int ;

out vec4 outcolor ; /*  output of the shader
                        pixel color             */
in vec2 pixPos ;    /* input from vertex shader */
in vec2 cc ;        /* input from vertex shader */

// Main body of the shader
void main() {
    /* setting r,g,b,a values of the output color as an
       opaque red */
    outcolor = vec4(pixPos.x,0.,0.,1.) ;
    return ;
}</script>

<!--&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&-->
<!-- Main script -->
<!--&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&-->
<script>
// get the shader source by its id ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function source(id){
    return document.getElementById(id).text ;
}

// Get the canvas ------------------------------------------------------
var canvas_1 = document.getElementById('canvas_1') ;

// Setup a solver ------------------------------------------------------
var renderer = new Abubu.Solver( {
    /* NO VERTEX SHADER PROVIDED */
    fragmentShader  : source('fshader'),
    canvas          : canvas_1,
} ) ;

// rendering (running) the solver
renderer.render() ;
</script>
</html>

If you open this page in the browser it will produce the page below:

which is identical to the result from the previous example.

The default vertex shader program

Download the source code for all tutorials