WebGL
JSON
Buckyball
WebGL
Børre Stenseth
Basis >Ball

En fotball (buckyball)

Hva
buckyflat
Polygoner på en Buckyball

"Buckyball" [1] er et kjent fenomen både i matematikken, naturen og på fotballbanen. Formen på en buckyball er beskrevet ved hjelp av det gyldne snitt (1.61803399...). Dette forholdstallet kan beregnes som kvotienten mellom to nabotall i Fibonacci-rekka [2] og det inngår i mange resonnementer i matematikken og det finnes i naturlige former. Det tillegges også en estetisk betydning som et "naturlig" eller balansert forhold, f.eks. som forholdet mellom høyde og bredde i et rektangel. Det ser ut til at det gyldne snitt i en del sammenhenger beskriver fenomener som er forbundet med maksimal pakking av former.

Buckyball er et kjent begrep for kjemikere og beskriver en ordning av 60 carbonatomer i hjørnene til figuren. Figuren er oppkalt etter R. Buckminster Fuller [4] . En buckball har 60 hjørner, 20 6-kanter og 12 5-kanter. Figuren er fra GoldenNumber.net [5] . Dataene som er brukt til å tegne buckyball i denne modulen ser du her i Javascript form, slik de genereres i programmet: polygoner

En roterende ball ser slik ut (i en iframe):

Du kan også inspisere resultatet og kildekoden på en enklere side:
simple.html https://borres.hiof.no/wep/webgl/basis/ball/simple.html

Javascript

Det er to javascript involvert, foruten Sylvester og GLUtils: render.js som drar dynamikken og ball.js som lager selve ballen og forbereder punkter, normaler og materialer.

_render.js

_ball.js

Shadere

_fragment shader

_vertex shader

JSON

På lignende måte som i modulen Pipe kan vi skille datagenereringen fra framvisningen ved å lage en vevside som ikke har noen annen oppgave enn å generere en beskrivelse av geometrien i form av en JSON-string. I dette tilfellet kan det gjøres på mange måter. Her er valgt en svært enkel variant der vi uten videre dumper de listene som er laget som beskrevet ovenfor. Dette innebærer at ett og samme punkt beskrives mange ganger. Vi kunne lett redusert JSON-stringen betraktelig med noen litt smartere algoritmer.

Koden som lager JSON blir en forenklet variant av ball.js som beskrevet over:

_ball.js

Du kan inspisere resultatet her.
makejson https://borres.hiof.no/wep/webgl/basis/ball/makejson/index.html

Bruken av JSON-formatet, blir igjen en forenklet ball.js.

_ball.js
// a bucky ball with radius phi (1.61803398)
function Ball()
{
    // evaluate JSON
    var buckyObj=eval('('+Bucky+')');
    // make buffers and fill them from buckObj
    this.verticesBuffer= gl.createBuffer();
    this.verticesNormalBuffer= gl.createBuffer();  
    this.verticesMaterialBuffer=gl.createBuffer();
    this.verticesBlackMaterialBuffer=gl.createBuffer();
    this.verticesIndexBuffer= gl.createBuffer(); 
            
    gl.bindBuffer(gl.ARRAY_BUFFER,this.verticesBuffer);
    gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(buckyObj.vertexPositions),gl.STATIC_DRAW);
    
    gl.bindBuffer(gl.ARRAY_BUFFER,this.verticesNormalBuffer);
    gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(buckyObj.vertexPositions),gl.STATIC_DRAW);
    
    gl.bindBuffer(gl.ARRAY_BUFFER,this.verticesMaterialBuffer);
    gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(buckyObj.vertexMatIx),gl.STATIC_DRAW);
    
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,this.verticesIndexBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,new Uint16Array(buckyObj.indices),gl.STATIC_DRAW)    
    
    // want blackmaterial all over when we sraw outline
    var blacks=new Array();
    for (var ix=0;ix<buckyObj.vertexMatIx.length;ix++)
        blacks=blacks.concat([0.9]);
    
    gl.bindBuffer(gl.ARRAY_BUFFER,this.verticesBlackMaterialBuffer);
    gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(blacks),gl.STATIC_DRAW);
   
    
    // draw based on prepared buffers
    this.draw=function()
    {
        // vertices
        gl.bindBuffer(gl.ARRAY_BUFFER, this.verticesBuffer);
        gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,3,gl.FLOAT,false,0,0);
        // Set the normal attribute for the vertices. 
        gl.bindBuffer(gl.ARRAY_BUFFER,this.verticesNormalBuffer);
        gl.vertexAttribPointer(shaderProgram.vertexNormalAttribute,3,gl.FLOAT,false,0,0);
        // set material index attribute
        gl.bindBuffer(gl.ARRAY_BUFFER,this.verticesMaterialBuffer);
        gl.vertexAttribPointer(shaderProgram.vertexMaterialIndexAttribute,1,gl.FLOAT,false,0,0);
        
        // Draw the ball.
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.verticesIndexBuffer);       
        var startix=0;
        // whites  ( 6 edges, one is doubled and a center is supplied)
        for(var pix=0; pix < 20; pix++)
        {
            if(showWhite)
                gl.drawElements(gl.TRIANGLE_FAN,8,gl.UNSIGNED_SHORT,startix);
            startix=startix+16;
        }

        // blacks (5 edges, one is doubled and a center is supplied))
        for(var pix=20; pix < 32; pix++)
        {
            if(showBlack)
                gl.drawElements(gl.TRIANGLE_FAN,7,gl.UNSIGNED_SHORT,startix);
            startix=startix+14;                
        }
        if(showLines)
        {
            // switch to all black 
            gl.bindBuffer(gl.ARRAY_BUFFER,this.verticesBlackMaterialBuffer);
            gl.vertexAttribPointer(shaderProgram.vertexMaterialIndexAttribute,1,gl.FLOAT,false,0,0);
            // lines on white (is all lines)
            // offset +2 to ignore center point
            startix=2;
            for(var pix=0; pix < 20; pix++)
            {
                gl.drawElements(gl.LINE_STRIP,7,gl.UNSIGNED_SHORT,startix);
                startix=startix+16; 
            }
        }
    }
}

Du kan inspisere resultatet på en enklere side:
showjson https://borres.hiof.no/wep/webgl/basis/ball/showjson/index.html

Referanser
  1. Buckyballs – a new sphere of science Australian Academy of Science www.science.org.au/nova/024/024key.htm 14-03-2014
  1. Fibonacci Numbers and the Golden Section www.mcs.surrey.ac.uk/Personal/R.Knott/Fibonacci/fib.html 24-05-2009
  1. Sylvester sylvester.jcoglan.com/ 14-05-2011
  1. R. Buckminster Fuller www.newciv.org/whole/bucky.html 24-05-2009
  1. Bucky Balls GOLDENNUMBER.NET www.goldennumber.net/buckyball.htm 14-10-2011
Basis >Ball