LaurentTreguier
6/20/2015 - 9:25 AM

OpenFL stage3D with GLSL example

OpenFL stage3D with GLSL example

// based on this example from Adobe : https://www.adobe.com/devnet/flashplayer/articles/hello-triangle.html
// OpenFL reference : http://docs.openfl.org/
// some GLSL documentation can be found here : http://wiki.lwjgl.org/wiki/Main_Page

import sys.io.*;
import openfl.*;
import openfl.gl.*;
import openfl.display.*;
import openfl.display3D.*;
import openfl.events.*;

class Main
{
    public static function main()
    {
        // first we have to request a 3D context, and then we can work with it
        Lib.current.stage.stage3Ds[0].addEventListener(Event.CONTEXT3D_CREATE, init);
        Lib.current.stage.stage3Ds[0].requestContext3D();
        
        // Lib.current.stage.stage3Ds is an array of 3D scenes;
        // in most cases only one is needed
    }
    
    private static function init(event : Event)
    {
        // never forget to remove uneeded event listeners
        Lib.current.stage.stage3Ds[0].removeEventListener(Event.CONTEXT3D_CREATE, init);
        
        // Context
        
        // this is the created 3D context
        var context = Lib.current.stage.stage3Ds[0].context3D;
        
        context.configureBackBuffer(Lib.current.stage.stageWidth, Lib.current.stage.stageHeight, 0, true);
        
        // Buffers
        
        var vertices = Vector.ofArray([ // the first 3 numbers are coordinates,
            -0.5, -0.5,  0,  1,  0,  0, // and the second 3 are colors
            -0.5,  0.5,  0,  0,  1,  0, // screen space go from -1 to 1 in both width and height
             0.5,  0  ,  0,  0,  0,  1  // colors values can go from 0 (no color) to 1 (full color)
        ]);
        var vertexBuffer = context.createVertexBuffer(3, 6); // we create a buffer for 3 vertices, with 6 data numbers each (coords and color)
        var indices = Vector.ofArray([0, 1, 2]); // these are the vertex indices of the triangle's coords
        var indexBuffer = context.createIndexBuffer(3); // we create a buffer for 3 indices
        
        vertexBuffer.uploadFromVector(vertices, 0, 3); // we then upload the verts and indices to their respective buffers
        indexBuffer.uploadFromVector(indices, 0, 3);
        
        // Shaders
        
        // we simply create our shaders, source them and compile them
        var vertexShader = GL.createShader(GL.VERTEX_SHADER);
        var fragmentShader = GL.createShader(GL.FRAGMENT_SHADER);
        
        GL.shaderSource(vertexShader, File.getContent("assets/shaders/test.vert"));
        GL.shaderSource(fragmentShader, File.getContent("assets/shaders/test.frag"));
        
        GL.compileShader(vertexShader);
        GL.compileShader(fragmentShader);
        
        // Program
        
        // the program will use the compiled shaders and is quite important :
        // it is what will be loaded in the graphics card, allowing for great computing power
        var program = context.createProgram();
        
        program.upload(vertexShader, fragmentShader);
        
        // this function will be called upon rendering
        context.setRenderMethod(function(e : Event)
            {
                // we tell the context what program to use
                context.setProgram(program);
                // in_Vertex and in_Color will be the names of input variables in our GLSL vertex shader
                // their values will be 3 floats long (Context3DVertexBufferFormat.FLOAT_3),
                // and will start at index 0 and 3 respectively in the vertex buffer
                context.setGLSLVertexBufferAt("in_Vertex", vertexBuffer, 0, Context3DVertexBufferFormat.FLOAT_3);
                context.setGLSLVertexBufferAt("in_Color", vertexBuffer, 3, Context3DVertexBufferFormat.FLOAT_3);
                // we clear the stage3D with grey color
                context.clear(0.5, 0.5, 0.5);
                // then we draw our triangle according to our index buffer, starting from index 0 and drawing 1 triangle
                context.drawTriangles(indexBuffer, 0, 1);
                // don't forget to refresh the screen buffer
                context.present();
                // now, you should have a triangle with different colors for each of its vertices
            });
    }
}
#version 130

void main()
{
    gl_FragColor = gl_Color;
}
#version 130

in vec3 in_Vertex;
in vec3 in_Color;

void main()
{
    gl_Position = vec4(in_Vertex, 1);
    gl_FrontColor = vec4(in_Color, 1);
    gl_BackColor = vec4(in_Color, 1);
}