QueryTimerDemo/render.js at master · takumelo/QueryTimerDemo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
let cnvs;
let gl;
const enableDebug = true;

let sceneRender;
let laplacianRender;

let WINDOW_WIDTH = 600;
let WINDOW_HEIGHT = 600;

let info;
let post_process_info;
let ext;
let queryPool = [];
let then = 0;

function init(){
    cnvs = document.getElementById("canvas");
    cnvs.width = WINDOW_WIDTH;
    cnvs.height = WINDOW_HEIGHT;
    if(enableDebug){
        gl = WebGLDebugUtils.makeDebugContext(cnvs.getContext('webgl2'));
        info = document.getElementById("info");
        post_process_info = document.getElementById("post_process_info");
        ext = gl.getExtension('EXT_disjoint_timer_query_webgl2');
    }else{
        gl = cnvs.getContext('webgl2');
    }

    gl.enable(gl.DEPTH_TEST);

    sceneRender = new SceneRender();
    nothingRender = new ScreenRender(postVs, passFs);
    laplacianRender = new ScreenRender(postVs, laplacianFs);
    gaussianRender = new ScreenRender(postVs, gaussianFs);
    mozaicRender = new ScreenRender(postVs, mozaicFs);
}

function getQueryResult(){
    let elapsedMSList = [];
    let hit_ind = [];
    let cnt = 0;
    while(true){
        let available = gl.getQueryParameter(queryPool[cnt], gl.QUERY_RESULT_AVAILABLE);
        if(available){
            let elapsedMS = gl.getQueryParameter(queryPool[cnt], gl.QUERY_RESULT) * 0.000001;
            elapsedMSList.push(elapsedMS);
            hit_ind.push(cnt);
        }else{
            break;
        }
        cnt++;
    }
    queryPool = queryPool.map((e,i) => hit_ind.includes(i) ? undefined : e).filter(x => x);
    return elapsedMSList;
}

function drawLoop(now){
    if(enableDebug){
        now *= 0.001;
        const deltaTime = now - then;
        then = now;
        const fps = 1 / deltaTime;
        info.textContent = "FPS: " + fps;
    }

    sceneRender.drawScene();
    let tex = sceneRender.getTex();
    let choice = document.querySelector('input[name="choice"]:checked').value;
    if(choice == "doNothing"){
        nothingRender.setTex(tex);
    }else if(choice == "gaussian"){
        gaussianRender.setTex(tex);
    }else if(choice == "laplacian"){
        laplacianRender.setTex(tex);
    }else if(choice == "mozaic"){
        mozaicRender.setTex(tex);
    }

    if(enableDebug){
        queryPool.push(gl.createQuery());
        gl.beginQuery(ext.TIME_ELAPSED_EXT, queryPool.slice(-1)[0]);
    }
    if(choice == "doNothing"){
        nothingRender.drawScene();
    }else if(choice == "gaussian"){
        gaussianRender.drawScene();
    }else if(choice == "laplacian"){
        laplacianRender.drawScene();
    }else if(choice == "mozaic"){
        mozaicRender.drawScene();
    }

    if(enableDebug){
        gl.endQuery(ext.TIME_ELAPSED_EXT);
        let timeList = getQueryResult(queryPool)
        timeList.forEach(i => post_process_info.textContent = "post process draw time:" + i + "ms");
    }

    requestAnimationFrame(drawLoop);
}

function main(){
    console.log("start");
    init();
    drawLoop();
}

onload = function(){
    main();
}