Home Explore Help
Sign In
lu
/
lp
mirror of git://github.com/heyLu/lp
Watch 1
Star 0
Fork 0
Code Issues 0 Commits 502 Releases 1 Wiki
Browse Source

first pass at actually using sliders

(you must fiddle with the origin first, but it does *something*!)
Lucas Stadler 10 years ago
parent
78d7413bda
commit
584a3a38d9
4 changed files with 58 additions and 9 deletions
Unified View Show 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
View File

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

+ 14 - 0
glsl/raymarching.html
View File

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
View File

150 
  return mat3( cu, cv, cw );
 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 
void main() {
 156 
void main() {
154 
  vec2 q = gl_FragCoord.xy / iResolution.xy;
 157 
  vec2 q = gl_FragCoord.xy / iResolution.xy;
155 
  vec2 p = -1.0 + 2.0*q;
 158 
  vec2 p = -1.0 + 2.0*q;
159 
  float time = 15.0 + 0.0; // iGlobalTime
 162 
  float time = 15.0 + 0.0; // iGlobalTime
160
163
161 
  // camera
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 
  vec3 ta = vec3(0.0); //vec3( -0.5, -0.4, 0.5 );
 167 
  vec3 ta = vec3(0.0); //vec3( -0.5, -0.4, 0.5 );
164
168
165 
  // camera-to-world transformation
 169 
  // camera-to-world transformation
172 
  float dist = trace(ro, rd);
 176 
  float dist = trace(ro, rd);
173 
  vec3 col = vec3(dist, dist, dist);
 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 
  //col = pow( col, vec3(0.4545));
 180 
  //col = pow( col, vec3(0.4545));
177
181
178 
  gl_FragColor = vec4( col, 1.0 );
 182 
  gl_FragColor = vec4( col, 1.0 );
241 
  };
 245 
  };
242
246
243 
  render();
 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 
} catch (e) {
 270 
} catch (e) {
271 
  window.error = e;
245 
  var msg = document.createElement("pre");
 272 
  var msg = document.createElement("pre");
246 
  msg.style = "color: red; position: absolute; right: 0; bottom: 0";
 273 
  msg.style = "color: red; position: absolute; right: 0; bottom: 0";
247 
  msg.textContent = e;
 274 
  msg.textContent = e;

+ 12 - 6
glsl/sliders.js
View File

72 
}
 72 
}
73
73
74 
function initSliders(gl, program, sliders, onChange) {
 74 
function initSliders(gl, program, sliders, onChange) {
75 
  return sliders.map(function(slider) {
75 
  sliders.forEach(function(slider) {
76 
    switch (slider.type) {
 76 
    switch (slider.type) {
77 
      case "float":
 77 
      case "float":
78 
        slider.uniform = gl.uniformLocation(program, slider.name);
78 
        slider.uniform = gl.getUniformLocation(program, slider.name);
79
79
80 
        slider.onChange = function(ev) {
 80 
        slider.onChange = function(ev) {
81 
          gl.uniform1f(slider.uniform, parseFloat(ev.target.value));
 81 
          gl.uniform1f(slider.uniform, parseFloat(ev.target.value));
90 
      case "vec2":
 90 
      case "vec2":
91 
      case "vec3":
 91 
      case "vec3":
92 
        slider.values = slider.range.map((r) => r[1]);
 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 
        slider.onChange = function(ev, i) {
 95 
        slider.onChange = function(ev, i) {
96 
          slider.values[0] = parseFloat(ev.target.value);
 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 
          if (onChange) {
 105 
          if (onChange) {
100 
            onChange(ev, slider, i);
 106 
            onChange(ev, slider, i);
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);