Supported Shapes

  • Unit Triangle - unit_triangle
  • Unit Square - unit_square
  • Unit Circle - unit_circle (diameter = 1, radius = 0.5)

Limitations

  • Fixed orientation to X/Z plane. This is just a matter of the project being in development.

Future

  • Level-of-Detail support - e.g. number of vertices needed to render a smooth circle depends on the view point
  • N-gon - generic polygon support

Example Code


$(function()
{   
    var sc3 = require("surfacecurve-gfx");   
    
    /* 
        The scene description is a flexible, user-friendly JSON format.  It allows the scene
        to be specified "practically".  
        
        A parser produces a normalized, device-independent scene format.
        
        The renderer itself then can attach device-dependent caches to the scene as it 
        renders the objects.
     */
    var sceneDesc = 
    {
        camera :
        {
            type        : "spinning_camera",
            target      : [ 0, 0, .5 ],
            radius      : 4,
            height      : .75
        },
    
        objects : 
        [
            {
                type     : "unit_triangle",
                position : [-2.25, 0.0, 0.5 ]
            },
            {
                type     : "unit_square",
                position : [ -.75, 0, 0.5 ]
            },
            {
                type     : "unit_circle",
                position : [ .75, 0, 0.5 ]
            },
            {
                type     : "unit_polygon",
                position : [ 2.25, 0, 0.5 ],
                sides    : 7
            },            
        ]
    };
    
    var canvas = $("#canvas").get(0);
    
    var engine = new sc3.Engine;
    engine.renderer = new sc3.Renderer(canvas);
    engine.renderer.loadBundle("/data/resources/shaderbuilder/shaderbuilder-bundle.json");
    engine.add("scene", sceneDesc);
        
    var dataUrl = "/data/resources/shaders/";    
    engine.renderer.loadShader(dataUrl, "simple.vert", "simple-blue.frag");
    engine.renderer.ready(function()
    {            
        var camera = _.first( engine.select(".camera") );
    
        engine.interval(function(ctx) {
            var instances = engine.select(".renderable");
            camera.update(2 * Math.PI * ctx.virttime / 20000);
            engine.renderer.renderScene(camera, instances);
        }, 1000 / 30);
    });        
});

Setup