hello,

i try something like this:

    var g = framebuffer.g4;
    g.begin();
    g.clear(Color.fromFloats(0.0, 0.0, 0.3), 1.0);  ...
    g.end();

    var g2 = framebuffer.g2;
    zui.begin(g2); ...
    zui.end();

But unfortunately that does not work. Zui is drawn but my model vanishes.

p.s.
Slider work with negativ values:-)

Hi,

This should work. Can you upload a minimal sample project?

Hallo lubos,
shame on me, i never touch my Main.hx:

public static function main() {
	System.init({title:"Sphere", width:800, height:600}, function(){
		Assets.loadEverything(function(){
			var game = new LookAtCam();
			Scheduler.addTimeTask(game.update, 0, 1 / 60);
			System.notifyOnRender(game.render);
		});
	});
}

And then copy and paste your tutorial, but there is always a System.notifyOnRender call in your code. Remove one of these calls and everything runs smoothly.

I have one more question, specially to you. I know that your day has also only 24 hours, but can you make a last tutorial 09 wich covers picking behavior. Go from window coordinates to model coordinates is such a common task. I have played around with this, but only with software rendering (kha.graphics1). I have my model coordinates my view (only a vec3) and a projection plane wich i cover with rays. Then working with barycentric coordinates from the triangle (my great model;-) and if one ray target the triangle then calculate the depth. That works, but the real transforming pipeline with all the 4X4 matrices (especially the lookAt-matrix) overwhelms me a bit.

No problem if you have no time for such a tutorial.
And many thanks for negativ values in sliders.

For picking, what about one of the solutions here?
http://www.opengl-tutorial.org/miscellaneous/clicking-on-objects/

The tutorials are modelled after that site, so following that should be straightforward.
Physics engine may be overkill just for that, but in any case haxebullet is here.

Sliders were fixed by Romamik, can't take credit for that

Hi lubos,
thanks for the links.
But befor i dares to bullet stuff, I want to understand the capabilities of verletkha.
That is enough funny physic stuff for the first time.
But surfing from your link, I found this tutorial:
Jamie King
and the git repo
Since I have fast internet, i like youtube. And this guy is really entertaining.
Best wishes

Looks like you need to call g2.begin()

g2.begin(false); // false to not clear everything
zui.begin(g2);
....

g2.end();

hello romamik ,

first many thanks for the zui update.
After removing one of the System.notifyOnRender calls the model appears again, no matter if i call g2.begin(false) or not. I am happy, but not too long.
I have a class which splits a icosahedron for me. Now I wanted to test the performance of my video card. After 33 splits (one face of the icosahedron ), these are only 23120 triangles for the entire model, i get a strange result.

[screenshoot]
(file:///bla/bla/do not know how i can upload files/Bildschirmfoto%20vom%202016-09-24%2021-06-50.png)

That could not be, and I thought that is due to the javascript float type (or what ever). I test my program with the cpp target and now the model disappears again. After removing the g2 render calls from zui, the model is drawn and i can go up to 230 splits ca. 1,2 million triangles without the ugly hole in my sphere. Now a simple example with zui and graphics4.

private var vertices:Array<Float> = [
    0, Math.sqrt(3) / 2, 0,
    -0.5, 0, -1 / 3,
    0.5, 0, -1 / 3,
    0, 0, -1 / 3 + Math.sqrt(3) / 2,
    0, -Math.sqrt(3) / 2, 0];

private var colors:Array<Float> = [
    1, 1, 0,
    0, 1, 0,
    0, 0, 1,
    1, 0, 0,
    1, 0, 1];

private var indices:Array<Int> = [
    0, 1, 2,
    0, 2, 3,
    0, 3, 1,
    4, 2, 1,
    4, 3, 2,
    4, 1, 3];

private var font:Font;
private var structure:VertexStructure;
private var structureLength:Int;
private var vertexBuffer:VertexBuffer;
private var indexBuffer:IndexBuffer;
private var pipeline:PipelineState;
private var mvpID:ConstantLocation;
private var projection:FastMatrix4 = FastMatrix4.perspectiveProjection(45.0, 4.0 / 3.0, 0.1, 100.0);
private var view:FastMatrix4 = FastMatrix4.lookAt(
    new FastVector3(2, 0, 0), // Camera is at (2, 0, 0), in World Space
    new FastVector3(0, 0, 0), // and looks at the origin
    new FastVector3(0, 1, 0)); // Head is up (set to (0, -1, 0) to look upside-down)
private var model:FastMatrix4 = FastMatrix4.identity();
private var mvp:FastMatrix4;

private var lastTime:Float;
private var rotX:Float = 0;
private var rotY:Float = 0;
private var rotZ:Float = 0;

private var ui:Zui;
private var width:Int;
private var height:Int;

private function loadingFinish():Void {
    font = Assets.fonts.DroidSans;
    ui = new Zui(font);
    // Define vertex structure
    structure = new VertexStructure();
    structure.add("pos", VertexData.Float3);
    structure.add("col", VertexData.Float3);
    structureLength = 6;

    // Compile pipeline state
    pipeline = new PipelineState();
    pipeline.inputLayout = [structure];
    pipeline.vertexShader = Shaders.simple_vert;
    pipeline.fragmentShader = Shaders.simple_frag;

    // Set depth mode
    pipeline.depthWrite = true;
    pipeline.depthMode = CompareMode.Less;
    pipeline.cullMode = CullMode.CounterClockwise;
    pipeline.compile();

    // Get a handle for our "MVP" uniform
    mvpID = pipeline.getConstantLocation("MVP");
    mvp = FastMatrix4.identity();
    mvp = mvp.multmat(projection);
    mvp = mvp.multmat(view);
    mvp = mvp.multmat(model);

    vertexBuffer = new VertexBuffer(
        /* Vertex count - 5 vertices * 6 floats */ 30,
        /* Vertex structure */ structure,
        /* Vertex data will stay the same */ Usage.StaticUsage);
    var vbData = vertexBuffer.lock();
    for (i in 0...Std.int(vbData.length / structureLength)) {
        vbData.set(i * structureLength, vertices[i * 3]);
        vbData.set(i * structureLength + 1, vertices[i * 3 + 1]);
        vbData.set(i * structureLength + 2, vertices[i * 3 + 2]);
        vbData.set(i * structureLength + 3, colors[i * 3]);
        vbData.set(i * structureLength + 4, colors[i * 3 + 1]);
        vbData.set(i * structureLength + 5, colors[i * 3 + 2]);
    }
    vertexBuffer.unlock();

    // Create index buffer
    indexBuffer = new IndexBuffer(
        /* Number of indices for tetraeder */ indices.length,
        /* Index data will stay the same*/ Usage.StaticUsage);
    // Copy indices to index buffer
    var iData = indexBuffer.lock();
    for (i in 0...iData.length) {
        iData[i] = indices[i];
    }
    indexBuffer.unlock();

    width = System.windowWidth();
    height = System.windowHeight();
    lastTime = 0;
    Scheduler.addTimeTask(update, 0, 1 / 60);
    System.notifyOnRender(render);
}

public function new() {
    Assets.loadEverything(loadingFinish);
}

public function update():Void {
    model = FastMatrix4.rotation(rotY, rotX, rotZ);
    mvp = FastMatrix4.identity();
    mvp = mvp.multmat(projection);
    mvp = mvp.multmat(view);
    mvp = mvp.multmat(model);
}

public function render(framebuffer:Framebuffer):Void {
    var g = framebuffer.g4;
    g.begin();
    g.clear(Color.fromFloats(0.05, 0.0, 0.15), 1.0);
    g.setVertexBuffer(vertexBuffer);
    g.setIndexBuffer(indexBuffer);
    g.setPipeline(pipeline);
    g.setMatrix(mvpID, mvp);
    g.drawIndexedVertices();
    g.end();

    var g2 = framebuffer.g2; // g2.begin(false);
    ui.begin(g2);
    if (ui.window("", 0, 0, width, height)) {
        if (ui.node(Id.node(), "Rotations", true)) {
            ui.row([1/3, 1/3, 1/3]);
            rotX = ui.slider(Id.slider(), "X", -Math.PI, Math.PI);
            rotY = ui.slider(Id.slider(), "Y", -Math.PI, Math.PI);
            rotZ = ui.slider(Id.slider(), "Z", -Math.PI, Math.PI);
        }
    }
    ui.end(); //g2.end();
}

It works with the html target, but the cpp target does not show the model.
It flickers a little bit if i move the sliders. Maybe it's because of my onboard Intel graphics card, but in fact I have no idea what's wrong.

If you are on windows you can try running khamake with option "--graphics opengl" and see if it works.