Home Verkennen Help
Inloggen
lu
/
lp
spiegel van git://github.com/heyLu/lp
Volgen 1
Ster 0
Vork 0
Code Kwesties 0 Commits 502 Publicaties 1 Wiki
Bladeren bron

first pass at actually using sliders

(you must fiddle with the origin first, but it does *something*!)
Lucas Stadler 10 jaren geleden
bovenliggende
78d7413bda
commit
584a3a38d9
4 gewijzigde bestanden met toevoegingen van 58 en 9 verwijderingen
Split View Toon Diff Stats
  1. 3 1
      glsl/findSlider.js
  2. 14 0
      glsl/raymarching.html
  3. 29 2
      glsl/raymarching.js
  4. 12 6
      glsl/sliders.js

+ 3 - 1
glsl/findSlider.js
Bestand weergeven 

@ -43,6 +43,7 @@ if (type == "float") {
43 43 
return {name: name, type: type, range: vals};
44 44 
}
45 45
46 
function findSliders(input) {
46 47 
var vars = [];
47 48 
input.split("\n").forEach(function(line) {
48 49 
  var slider = findSlider(line);
 
@ -51,4 +52,5 @@ input.split("\n").forEach(function(line) {
51 52 
  }
52 53 
});
53 54
54 
return vars;
55 
return vars;
56 
}

+ 14 - 0
glsl/raymarching.html
Bestand weergeven 

@ -0,0 +1,14 @@
1 
<!doctype html>
2 
<html>
3 
  <head>
4 
    <meta charset="utf-8" />
5
6 
    <title>Raymarching!</title>
7 
  </head>
8
9 
  <body>
10 
    <script src="findSlider.js"></script>
11 
    <script src="sliders.js"></script>
12 
    <script src="raymarching.js"></script>
13 
  </body>
14 
</html>

+ 29 - 2
glsl/raymarching.js
Bestand weergeven 

@ -150,6 +150,9 @@ mat3 setCamera( in vec3 ro, in vec3 ta, float cr ) {
150 150 
  return mat3( cu, cv, cw );
151 151 
}
152 152
153 
uniform vec3 origin; //#slider[(-10.0,1.0,10.0),(-10.0,2.0,10.0),(-10.0,-1.0,10.0)]
154 
uniform vec3 color; //#slider[(0.0, 1.0, 1.0),(0.0,0.0,1.0),(0.0,0.0,1.0)]
155
153 156 
void main() {
154 157 
  vec2 q = gl_FragCoord.xy / iResolution.xy;
155 158 
  vec2 p = -1.0 + 2.0*q;
 
@ -159,7 +162,8 @@ void main() {
159 162 
  float time = 15.0 + 0.0; // iGlobalTime
160 163
161 164 
  // camera
162 
  vec3 ro = vec3(1.0, 2.0, -1.0); //vec3( -0.5+3.2*cos(0.1*time + 6.0*mo.x), 1.0 + 2.0*mo.y, 0.5 + 3.2*sin(0.1*time + 6.0*mo.x) );
165 
  //vec3 ro = vec3(1.0, 2.0, -1.0); //vec3( -0.5+3.2*cos(0.1*time + 6.0*mo.x), 1.0 + 2.0*mo.y, 0.5 + 3.2*sin(0.1*time + 6.0*mo.x) );
166 
  vec3 ro = origin;
163 167 
  vec3 ta = vec3(0.0); //vec3( -0.5, -0.4, 0.5 );
164 168
165 169 
  // camera-to-world transformation
 
@ -172,7 +176,7 @@ void main() {
172 176 
  float dist = trace(ro, rd);
173 177 
  vec3 col = vec3(dist, dist, dist);
174 178
175 
  col = mix(vec3(1.0, 0.0, 0.0), col, 0.9);
179 
  col = mix(color, col, 0.9);
176 180 
  //col = pow( col, vec3(0.4545));
177 181
178 182 
  gl_FragColor = vec4( col, 1.0 );
 
@ -241,7 +245,30 @@ void main() {
241 245 
  };
242 246
243 247 
  render();
248
249 
  var sidebarEl = document.createElement("div");
250 
  sidebarEl.style = `
251 
    position: absolute;
252 
    top: 0;
253 
    right: 0;
254
255 
    padding: 1ex;
256
257 
    font-family: monospace;
258 
    font-weight: bold;
259
260 
    background-color: rgba(255, 255, 255, 0.5);
261 
  `;
262 
  document.body.appendChild(sidebarEl);
263
264 
  var sliders = findSliders(fragmentShaderSrc);
265 
  initSliders(gl, program, sliders, function(ev) {
266 
    render();
267 
  });
268
269 
  addSliders(sidebarEl, sliders);
244 270 
} catch (e) {
271 
  window.error = e;
245 272 
  var msg = document.createElement("pre");
246 273 
  msg.style = "color: red; position: absolute; right: 0; bottom: 0";
247 274 
  msg.textContent = e;

+ 12 - 6
glsl/sliders.js
Bestand weergeven 

@ -72,10 +72,10 @@ function addSliders(parent, sliders) {
72 72 
}
73 73
74 74 
function initSliders(gl, program, sliders, onChange) {
75 
  return sliders.map(function(slider) {
75 
  sliders.forEach(function(slider) {
76 76 
    switch (slider.type) {
77 77 
      case "float":
78 
        slider.uniform = gl.uniformLocation(program, slider.name);
78 
        slider.uniform = gl.getUniformLocation(program, slider.name);
79 79
80 80 
        slider.onChange = function(ev) {
81 81 
          gl.uniform1f(slider.uniform, parseFloat(ev.target.value));
 
@ -90,11 +90,17 @@ function initSliders(gl, program, sliders, onChange) {
90 90 
      case "vec2":
91 91 
      case "vec3":
92 92 
        slider.values = slider.range.map((r) => r[1]);
93 
        slider.uniform = gl.uniformLocation(program, slider.name);
93 
        slider.uniform = gl.getUniformLocation(program, slider.name);
94 94
95 95 
        slider.onChange = function(ev, i) {
96 96 
          slider.values[0] = parseFloat(ev.target.value);
97 
          gl.uniform2f(slider.uniform, slider.values[0], slider.values[1]);
97 
          if (slider.type == "vec2") {
98 
            gl.uniform2f(slider.uniform, slider.values[0], slider.values[1]);
99 
          } else if (slider.type == "vec3") {
100 
            gl.uniform3f(slider.uniform, slider.values[0], slider.values[1], slider.values[2]);
101 
          } else {
102 
            throw new Error("unknown slider type " + slider.type);
103 
          }
98 104
99 105 
          if (onChange) {
100 106 
            onChange(ev, slider, i);
 
@ -109,6 +115,6 @@ function initSliders(gl, program, sliders, onChange) {
109 115 
  });
110 116 
}
111 117
112 
var sliders = [{"name":" iPosition","type":"vec3","range":[[0.01,0.52,1.03],[0.04,0.55,1.06],[0.07,0.58,1.09]]},{"name":" iResolution","type":"vec2","range":[[0.01,0.52,1.03],[0.04,0.55,1.06]]},{"name":"fancyness","type":"float","range":[0.01,0.52,1.03]}];
118 
//var sliders = [{"name":" iPosition","type":"vec3","range":[[0.01,0.52,1.03],[0.04,0.55,1.06],[0.07,0.58,1.09]]},{"name":" iResolution","type":"vec2","range":[[0.01,0.52,1.03],[0.04,0.55,1.06]]},{"name":"fancyness","type":"float","range":[0.01,0.52,1.03]}];
113 119
114 
addSliders(document.body, sliders);
120 
//addSliders(document.body, sliders);