Главная Обзор Помощь
Войти
lu
/
lp
зеркало из git://github.com/heyLu/lp
Следить 1
В избранное 0
Ответвить 0
Код Обсуждения 0 Коммиты 539 Релизы 1 Вики
Просмотр исходного кода

integrate file saving & default files with the main editor

Lucas Stadler лет назад: 10
Родитель
912fd37f35
Сommit
e89887cd64
3 измененных файлов с 130 добавлено и 108 удалено
Единый вид Показать статистику Diff
  1. 108 0
      glsl/defaultFiles.js
  2. 2 0
      glsl/raymarching.html
  3. 20 108
      glsl/raymarching.js

+ 108 - 0
glsl/defaultFiles.js
Просмотреть файл

1 
files.current = "default.frag";
2 
files.builtin = {
3 
  "colors.frag": `precision highp float;
4
5 
uniform vec2 iResolution;
6
7 
uniform float blue; //#slider[0.0,0.0,1.0]
8
9 
void main() {
10 
  gl_FragColor = vec4(gl_FragCoord.xy / iResolution, blue, 1.0);
11 
}`,
12 
  "default.frag": `precision highp float;
13
14 
uniform float iGlobalTime;
15 
uniform vec2 iResolution;
16 
uniform vec3 iMouse;
17
18 
const int MaximumRaySteps = 150;
19 
const float MinimumDistance = 0.0001;
20
21 
float DistanceEstimator(vec3 pos);
22
23 
float trace(vec3 from, vec3 direction) {
24 
	float totalDistance = 0.0;
25 
  int stepsDone = 0;
26 
	for (int steps = 0; steps < MaximumRaySteps; steps++) {
27 
		vec3 p = from + totalDistance * direction;
28 
		float distance = DistanceEstimator(p);
29 
		totalDistance += distance;
30 
    stepsDone = steps;
31 
		if (distance < MinimumDistance) break;
32 
	}
33 
	return 1.0-float(stepsDone)/float(MaximumRaySteps);
34 
}
35
36 
float sphere(vec3 pos) {
37 
  return length(pos) - 1.0;
38 
}
39
40 
float sphere(vec3 pos, float size) {
41 
  return length(pos) - size;
42 
}
43
44 
float udBox( vec3 p, vec3 b ) {
45 
  return length(max(abs(p)-b,0.0));
46 
}
47
48 
float pMod1(inout float p, float size) {
49 
  float halfsize = size * 0.5;
50 
  float c = floor((p + halfsize)/size);
51 
  p = mod(p+halfsize, size)-halfsize;
52 
  return c;
53 
}
54
55 
uniform vec3 offset; //#slider[(0.0,10.0,20.0),(0.0,10.0,20.0),(0.0,2.5,20.0)]
56
57 
float DistanceEstimator(vec3 pos) {
58 
  pMod1(pos.x, offset.x);
59 
  pMod1(pos.y, offset.y);
60 
  pMod1(pos.z, offset.z + sin(iGlobalTime));
61 
  //return sphere(pos);
62 
  //return min(sphere(vec3(pos.x, pos.y - 0.5, pos.z), 0.75),
63 
  //           udBox(pos, vec3(1.0, 0.3, 1.0)));
64 
  return min(max(-sphere(pos), udBox(pos, vec3(0.75))),
65 
             sphere(pos, 0.05 + 0.25 * (1.0 + sin(iGlobalTime * 0.5)*0.5)));
66 
}
67
68 
mat3 setCamera( in vec3 ro, in vec3 ta, float cr ) {
69 
	vec3 cw = normalize(ta-ro);
70 
	vec3 cp = vec3(sin(cr), cos(cr),0.0);
71 
	vec3 cu = normalize( cross(cw,cp) );
72 
	vec3 cv = normalize( cross(cu,cw) );
73 
  return mat3( cu, cv, cw );
74 
}
75
76 
uniform vec3 origin; //#slider[(-10.0,0.41,10.0),(-10.0,2.03,10.0),(-10.0,-1.34,10.0)]
77 
uniform vec3 angle; //#slider[(-3.0,0.31,3.0),(-3.0,1.77,3.0),(-3.0,-0.18,3.0)]
78 
uniform vec3 color; //#slider[(0.0, 1.0, 1.0),(0.0,0.0,1.0),(0.0,0.0,1.0)]
79 
uniform float colorMix; //#slider[0.0,0.9,1.0]
80
81 
void main() {
82 
  vec2 q = gl_FragCoord.xy / iResolution.xy;
83 
  vec2 p = -1.0 + 2.0*q;
84 
  p.x *= iResolution.x / iResolution.y;
85 
  vec2 mo = iMouse.xy/iResolution.xy;
86
87 
  float time = 15.0 + 0.0; // iGlobalTime
88
89 
  // camera
90 
  vec3 ro = origin; //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) );
91 
  vec3 ta = angle; //vec3( -0.5, -0.4, 0.5 );
92
93 
  // camera-to-world transformation
94 
  mat3 ca = setCamera( ro, ta, 0.0 );
95
96 
  // ray direction
97 
  vec3 rd = ca * normalize( vec3(p.xy, 2.5) );
98
99 
  // render
100 
  float dist = trace(ro, rd);
101 
  vec3 col = vec3(dist, dist, dist);
102
103 
  col = mix(color, col, colorMix);
104 
  //col = pow( col, vec3(0.4545));
105
106 
  gl_FragColor = vec4( col, 1.0 );
107 
}`
108 
};

+ 2 - 0
glsl/raymarching.html
Просмотреть файл

9 
  <body>
 9 
  <body>
10 
    <script src="findSlider.js"></script>
 10 
    <script src="findSlider.js"></script>
11 
    <script src="sliders.js"></script>
 11 
    <script src="sliders.js"></script>
12 
    <script src="files.js"></script>
13 
    <script src="defaultFiles.js"></script>
12 
    <script src="raymarching.js"></script>
 14 
    <script src="raymarching.js"></script>
13 
  </body>
 15 
  </body>
14 
</html>
 16 
</html>

+ 20 - 108
glsl/raymarching.js
Просмотреть файл

72 
void main() {
 72 
void main() {
73 
  gl_Position = aPosition;
 73 
  gl_Position = aPosition;
74 
}
 74 
}
75 
`
76
77 
  var fragmentShaderSrc = `precision highp float;
78
79 
uniform float iGlobalTime;
80 
uniform vec2 iResolution;
81 
uniform vec3 iMouse;
82
83 
const int MaximumRaySteps = 150;
84 
const float MinimumDistance = 0.0001;
85
86 
float DistanceEstimator(vec3 pos);
87
88 
float trace(vec3 from, vec3 direction) {
89 
	float totalDistance = 0.0;
90 
  int stepsDone = 0;
91 
	for (int steps = 0; steps < MaximumRaySteps; steps++) {
92 
		vec3 p = from + totalDistance * direction;
93 
		float distance = DistanceEstimator(p);
94 
		totalDistance += distance;
95 
    stepsDone = steps;
96 
		if (distance < MinimumDistance) break;
97 
	}
98 
	return 1.0-float(stepsDone)/float(MaximumRaySteps);
99 
}
100
101 
float sphere(vec3 pos) {
102 
  return length(pos) - 1.0;
103 
}
104
105 
float sphere(vec3 pos, float size) {
106 
  return length(pos) - size;
107 
}
108
109 
float udBox( vec3 p, vec3 b ) {
110 
  return length(max(abs(p)-b,0.0));
111 
}
112
113 
float pMod1(inout float p, float size) {
114 
  float halfsize = size * 0.5;
115 
  float c = floor((p + halfsize)/size);
116 
  p = mod(p+halfsize, size)-halfsize;
117 
  return c;
118 
}
119
120 
uniform vec3 offset; //#slider[(0.0,10.0,20.0),(0.0,10.0,20.0),(0.0,2.5,20.0)]
121
122 
float DistanceEstimator(vec3 pos) {
123 
  pMod1(pos.x, offset.x);
124 
  pMod1(pos.y, offset.y);
125 
  pMod1(pos.z, offset.z + sin(iGlobalTime));
126 
  //return sphere(pos);
127 
  //return min(sphere(vec3(pos.x, pos.y - 0.5, pos.z), 0.75),
128 
  //           udBox(pos, vec3(1.0, 0.3, 1.0)));
129 
  return min(max(-sphere(pos), udBox(pos, vec3(0.75))),
130 
             sphere(pos, 0.05 + 0.25 * (1.0 + sin(iGlobalTime * 0.5)*0.5)));
131 
}
132
133 
mat3 setCamera( in vec3 ro, in vec3 ta, float cr ) {
134 
	vec3 cw = normalize(ta-ro);
135 
	vec3 cp = vec3(sin(cr), cos(cr),0.0);
136 
	vec3 cu = normalize( cross(cw,cp) );
137 
	vec3 cv = normalize( cross(cu,cw) );
138 
  return mat3( cu, cv, cw );
139 
}
140
141 
uniform vec3 origin; //#slider[(-10.0,0.41,10.0),(-10.0,2.03,10.0),(-10.0,-1.34,10.0)]
142 
uniform vec3 angle; //#slider[(-3.0,0.31,3.0),(-3.0,1.77,3.0),(-3.0,-0.18,3.0)]
143 
uniform vec3 color; //#slider[(0.0, 1.0, 1.0),(0.0,0.0,1.0),(0.0,0.0,1.0)]
144 
uniform float colorMix; //#slider[0.0,0.9,1.0]
145
146 
void main() {
147 
  vec2 q = gl_FragCoord.xy / iResolution.xy;
148 
  vec2 p = -1.0 + 2.0*q;
149 
  p.x *= iResolution.x / iResolution.y;
150 
  vec2 mo = iMouse.xy/iResolution.xy;
151
152 
  float time = 15.0 + 0.0; // iGlobalTime
153
154 
  // camera
155 
  vec3 ro = origin; //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) );
156 
  vec3 ta = angle; //vec3( -0.5, -0.4, 0.5 );
157
158 
  // camera-to-world transformation
159 
  mat3 ca = setCamera( ro, ta, 0.0 );
160
161 
  // ray direction
162 
  vec3 rd = ca * normalize( vec3(p.xy, 2.5) );
163
164 
  // render
165 
  float dist = trace(ro, rd);
166 
  vec3 col = vec3(dist, dist, dist);
167
168 
  col = mix(color, col, colorMix);
169 
  //col = pow( col, vec3(0.4545));
170
171 
  gl_FragColor = vec4( col, 1.0 );
172 
}
173 
`
 75 
`
174
76
175 
  var styleEl = document.createElement("style");
 77 
  var styleEl = document.createElement("style");
198 
  position: absolute;
 100 
  position: absolute;
199 
  top: 0;
 101 
  top: 0;
200 
  left: 0;
 102 
  left: 0;
103 
}
201
104
202 
  border: none;
203 
  background-color: rgba(255, 255, 255, 0.8);
204
105 
#editor textarea {
205 
  min-width: 72ex;
 106 
  min-width: 72ex;
206 
  height: 100vh;
 107 
  height: 100vh;
207 
}
 108 
}
109
110 
#editor textarea, #editor input {
111 
  border: none;
112 
  background-color: rgba(255, 255, 255, 0.8);
113 
}
208 
  `
 114 
  `
209 
  document.head.appendChild(styleEl);
 115 
  document.head.appendChild(styleEl);
210
116
312 
  var canvas = document.createElement("canvas");
 218 
  var canvas = document.createElement("canvas");
313 
  document.body.appendChild(canvas);
 219 
  document.body.appendChild(canvas);
314
220
315 
  var tt = TwoTriangles(canvas, fragmentShaderSrc);
221 
  var tt = TwoTriangles(canvas, files.open('default.frag').content);
316
222
317 
  var sidebarEl = document.createElement("div");
 223 
  var sidebarEl = document.createElement("div");
318 
  sidebarEl.id = "sidebar";
 224 
  sidebarEl.id = "sidebar";
329 
  tt.render();
 235 
  tt.render();
330
236
331 
  var editor = {};
 237 
  var editor = {};
332 
  editor.visible = false;
333 
  editor.el = document.createElement("textarea");
 238 
  editor.el = document.createElement("textarea");
334 
  editor.el.id = "editor";
335 
  editor.el.style.display = "none";
336 
  editor.el.value = tt.fragmentShaderSrc;
 239 
  editor.el.value = tt.fragmentShaderSrc;
337 
  document.body.appendChild(editor.el);
338
240
339 
  editor.el.onkeydown = function(ev) {
 241 
  editor.el.onkeydown = function(ev) {
340 
    try {
 242 
    try {
363
265
364 
  editor.toggle = function() {
 266 
  editor.toggle = function() {
365 
    if (editor.visible) {
 267 
    if (editor.visible) {
366 
      editor.el.style.display = "none";
268 
      editor.container.style.display = "none";
367 
    } else {
 269 
    } else {
368 
      editor.el.style.display = "inherit";
270 
      editor.container.style.display = "inherit";
369 
      editor.el.focus();
 271 
      editor.el.focus();
370 
    }
 272 
    }
371 
    editor.visible = !editor.visible;
 273 
    editor.visible = !editor.visible;
377 
      editor.toggle();
 279 
      editor.toggle();
378 
    }
 280 
    }
379 
  });
 281 
  });
282
283 
  editor.ui = files.setupUI(editor.el);
284 
  editor.container = document.createElement("div");
285 
  editor.container.id = "editor";
286 
  editor.visible = false;
287 
  editor.container.style.display = "none";
288 
  editor.container.appendChild(editor.ui);
289 
  editor.container.appendChild(editor.el);
290
291 
  document.body.appendChild(editor.container);
380 
} catch (e) {
 292 
} catch (e) {
381 
  displayError(e);
 293 
  displayError(e);
382 
}
 294 
}