Przeglądaj źródła

support continuous animation/playing and iGlobalTime

interesting aside: `uniforms` are only availlable if they are actually
*used* in the program, i.e. it isn't enough to just declare them, they
must really be used somewhere.
Lucas Stadler 10 lat temu
rodzic
commit
94a9a0b697
1 zmienionych plików z 43 dodań i 7 usunięć
  1. 43 7
      glsl/raymarching.js

+ 43 - 7
glsl/raymarching.js

76
76
77
  var fragmentShaderSrc = `precision highp float;
77
  var fragmentShaderSrc = `precision highp float;
78
78
79
uniform float iGlobalTime;
79
uniform vec2 iResolution;
80
uniform vec2 iResolution;
80
uniform vec3 iMouse;
81
uniform vec3 iMouse;
81
82
170
float DistanceEstimator(vec3 pos) {
171
float DistanceEstimator(vec3 pos) {
171
  pMod1(pos.x, offset.x);
172
  pMod1(pos.x, offset.x);
172
  pMod1(pos.y, offset.y);
173
  pMod1(pos.y, offset.y);
173
  pMod1(pos.z, offset.z);
174
  pMod1(pos.z, offset.z + sin(iGlobalTime));
174
  return sphere(pos);
175
  return sphere(pos);
175
}
176
}
176
177
298
      gl.drawArrays(gl.TRIANGLES, 0, 6);
299
      gl.drawArrays(gl.TRIANGLES, 0, 6);
299
    };
300
    };
300
    
301
    
301
    tt.draw = function() {
302
      requestAnimationFrame(draw);
303
      render();
302
    tt.playing = false;
303
    tt.draw = function(timestamp) {
304
      if (tt.playing) {
305
        requestAnimationFrame(tt.draw);
306
      }
307
      gl.uniform1f(iGlobalTime, timestamp / 1000);
308
      tt.render();
309
    }
310
    
311
    tt.playingControls = document.createElement("div");
312
    var playPauseButton = document.createElement("button");
313
    playPauseButton.textContent = "Play";
314
    playPauseButton.onclick = function(ev) {
315
      tt.togglePlaying();
316
    }
317
    tt.playingControls.appendChild(playPauseButton);
318
    
319
    tt.togglePlaying = function() {
320
      if (!tt.playing) {
321
        tt.playing = true;
322
        tt.draw();
323
      } else {
324
        tt.playing = false;
325
      }
326
      playPauseButton.textContent = tt.playing ? "Pause" : "Play";
304
    }
327
    }
305
    
328
    
329
    window.addEventListener('keydown', function(ev) {
330
      if (ev.keyCode == 32 && document.activeElement != editor.el) { // Space
331
        ev.preventDefault();
332
        tt.togglePlaying();
333
      }
334
    });
335
    
306
    tt.canvas.addEventListener("mousemove", function(ev) {
336
    tt.canvas.addEventListener("mousemove", function(ev) {
307
      gl.uniform3f(iMouse, ev.mouseX, ev.mouseY, 0.0);
337
      gl.uniform3f(iMouse, ev.mouseX, ev.mouseY, 0.0);
308
    });
338
    });
329
  sidebarEl.id = "sidebar";
359
  sidebarEl.id = "sidebar";
330
  document.body.appendChild(sidebarEl);
360
  document.body.appendChild(sidebarEl);
331
  
361
  
332
  var sliders = findSliders(fragmentShaderSrc);
362
  var sliders = findSliders(tt.fragmentShaderSrc);
333
  initSliders(tt.gl, tt.program, sliders, function(ev) {
363
  initSliders(tt.gl, tt.program, sliders, function(ev) {
334
    requestAnimationFrame(tt.render);
364
    requestAnimationFrame(tt.render);
335
  });
365
  });
336
  
337
  addSliders(sidebarEl, sliders);
366
  addSliders(sidebarEl, sliders);
338
  
367
  
368
  sidebarEl.appendChild(tt.playingControls);
369
  
339
  tt.render();
370
  tt.render();
340
  
371
  
341
  var editor = {};
372
  var editor = {};
354
        sidebarEl.innerHTML = "";
385
        sidebarEl.innerHTML = "";
355
        sliders = findSliders(tt.fragmentShaderSrc);
386
        sliders = findSliders(tt.fragmentShaderSrc);
356
        initSliders(tt.gl, tt.program, sliders, function(ev) {
387
        initSliders(tt.gl, tt.program, sliders, function(ev) {
357
          requestAnimationFrame(tt.render);
388
          // rerender if not in animation mode (otherwise `tt.draw` will already do that)
389
          if (!tt.playing) {
390
            requestAnimationFrame(tt.render);
391
          }
358
        });
392
        });
359
        addSliders(sidebarEl, sliders);
393
        addSliders(sidebarEl, sliders);
394
        
395
        sidebarEl.appendChild(tt.playingControls);
360
396
361
        tt.render();
397
        tt.render();
362
        clearError();
398
        clearError();