fix: moved all shader logic into lensflare function
This commit is contained in:
		
							parent
							
								
									777527d0a8
								
							
						
					
					
						commit
						97718c9619
					
				
							
								
								
									
										96
									
								
								main.js
									
									
									
									
									
								
							
							
						
						
									
										96
									
								
								main.js
									
									
									
									
									
								
							|  | @ -80,25 +80,17 @@ function settings_apply(event) { | |||
|   draw(true); | ||||
| } | ||||
| 
 | ||||
| function length(vec) { | ||||
|   return Math.sqrt(vec.reduce((acc, e) => acc + e * e, 0)) | ||||
| } | ||||
| function mul(vec, scalar) { | ||||
|   return vec.map(e => e * scalar); | ||||
| } | ||||
| function add(vec_a, vec_b) { | ||||
|   return vec_a.map((e, i) => e + vec_b[i]); | ||||
| } | ||||
| function mix(vec_x, vec_y, scalar) { | ||||
|   return add(mul(vec_x, 1 - scalar), mul(vec_y, scalar)); | ||||
| } | ||||
| 
 | ||||
| function len_add_mul(vev_a, vec_b, scalar) { | ||||
|    | ||||
| } | ||||
| 
 | ||||
| // https://www.shadertoy.com/view/ldSXWK
 | ||||
| function lensflare(u, v, pos_x, pos_y) { | ||||
| function lensflare(pos_x, pos_y) { | ||||
|   const imgdata = ctx.getImageData(0, 0, canvas.width, canvas.height); | ||||
|   const pixel_count = imgdata.data.length / 4; | ||||
|   const aspect_ratio = canvas.width / canvas.height; | ||||
|   for (let i = 0; i < pixel_count; i++) { | ||||
|     const x = i % canvas.width; | ||||
|     const y = i / canvas.width; | ||||
|     const u = (x / canvas.width - .5) * aspect_ratio; | ||||
|     const v = y / canvas.height - .5; | ||||
| 
 | ||||
|     const intensity = 1.5; | ||||
|     const uv_len = Math.sqrt(u * u + v * v); | ||||
|     const uvd_x = u * uv_len; | ||||
|  | @ -107,54 +99,47 @@ function lensflare(u, v, pos_x, pos_y) { | |||
| 
 | ||||
|     const uvd_pos_x = uvd_x + pos_x; | ||||
|     const uvd_pos_y = uvd_y + pos_y; | ||||
|   let temp = (uvd_pos_x * uvd_pos_x + uvd_pos_y * uvd_pos_y) * .8 * .8 | ||||
|   const f2 = Math.max(1.0 / (1.0 + 32.0 * (temp)), .0) * 0.1; | ||||
|   temp = (uvd_pos_x * uvd_pos_x + uvd_pos_y * uvd_pos_y) * .85 * .85 | ||||
|   const f22 = Math.max(1.0 / (1.0 + 32.0 * (temp)), .0) * 0.08; | ||||
|   temp = (uvd_pos_x * uvd_pos_x + uvd_pos_y * uvd_pos_y) * .9 * .9 | ||||
|   const f23 = Math.max(1.0 / (1.0 + 32.0 * (temp)), .0) * 0.06; | ||||
|     let temp = uvd_pos_x * uvd_pos_x + uvd_pos_y * uvd_pos_y | ||||
|     const f2 = Math.max(1.0 / (1.0 + 32.0 * (temp * .64)), .0) * 0.1; | ||||
|     const f22 = Math.max(1.0 / (1.0 + 32.0 * (temp * .72)), .0) * 0.08; | ||||
|     const f23 = Math.max(1.0 / (1.0 + 32.0 * (temp * .81)), .0) * 0.06; | ||||
| 
 | ||||
|     let uvx_x = u * (1 + 0.5) + uvd_x * 0.5; | ||||
|     let uvx_y = v * (1 + 0.5) + uvd_y * 0.5; | ||||
|     let uvx_pos_x = uvx_x + pos_x; | ||||
|     let uvx_pos_y = uvx_y + pos_y; | ||||
| 
 | ||||
|   temp = (uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y) * .4 * .4 | ||||
|   const f4 = Math.max(0.01 - Math.pow((temp), 1.2), .0) * 6.0; | ||||
|   temp = (uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y) * .45 * .45 | ||||
|   const f42 = Math.max(0.01 - Math.pow((temp), 1.2), .0) * 5.0; | ||||
|   temp = (uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y) * .5 * .5 | ||||
|   const f43 = Math.max(0.01 - Math.pow((temp), 1.2), .0) * 3.0; | ||||
|     temp = uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y | ||||
|     const f4 = Math.max(0.01 - Math.pow((temp * .16), 1.2), .0) * 6.0; | ||||
|     const f42 = Math.max(0.01 - Math.pow((temp * .2025), 1.2), .0) * 5.0; | ||||
|     const f43 = Math.max(0.01 - Math.pow((temp * .25), 1.2), .0) * 3.0; | ||||
| 
 | ||||
|     uvx_x = u * (1 + 0.4) + uvd_x * 0.4; | ||||
|     uvx_y = v * (1 + 0.4) + uvd_y * 0.4; | ||||
|     uvx_pos_x = uvx_x + pos_x; | ||||
|     uvx_pos_y = uvx_y + pos_y; | ||||
| 
 | ||||
|   temp = (uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y) * .2 * .2 | ||||
|   const f5 = Math.max(0.01 - Math.pow((temp), 2.475), .0) * 2.0; | ||||
|   temp = (uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y) * .4 * .4 | ||||
|   const f52 = Math.max(0.01 - Math.pow((temp), 2.475), .0) * 2.0; | ||||
|   temp = (uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y) * .6 * .6 | ||||
|   const f53 = Math.max(0.01 - Math.pow((temp), 2.75), .0) * 2.0; | ||||
|     temp = uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y | ||||
|     const f5 = Math.max(0.01 - Math.pow((temp * .04), 2.475), .0) * 2.0; | ||||
|     const f52 = Math.max(0.01 - Math.pow((temp * .16), 2.475), .0) * 2.0; | ||||
|     const f53 = Math.max(0.01 - Math.pow((temp * .36), 2.75), .0) * 2.0; | ||||
| 
 | ||||
|     uvx_x = u * (1 + 0.5) + uvd_x * 0.5; | ||||
|     uvx_y = v * (1 + 0.5) + uvd_y * 0.5; | ||||
|     uvx_pos_x = uvx_x - pos_x; | ||||
|     uvx_pos_y = uvx_y - pos_y; | ||||
| 
 | ||||
|   temp = (uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y) * .3 * .3 | ||||
|   const f6 = Math.max(0.01 - Math.pow(temp, 0.8), .0) * 6.0; | ||||
|   temp = (uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y) * .325 * .325 | ||||
|   const f62 = Math.max(0.01 - Math.pow(temp, 0.8), .0) * 3.0; | ||||
|   temp = (uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y) * .35 * .35 | ||||
|   const f63 = Math.max(0.01 - Math.pow(temp, 0.8), .0) * 5.0; | ||||
|     temp = uvx_pos_x * uvx_pos_x + uvx_pos_y * uvx_pos_y | ||||
|     const f6 = Math.max(0.01 - Math.pow(temp * .9, 0.8), .0) * 6.0; | ||||
|     const f62 = Math.max(0.01 - Math.pow(temp * .1, 0.8), .0) * 3.0; | ||||
|     const f63 = Math.max(0.01 - Math.pow(temp * .12, 0.8), .0) * 5.0; | ||||
| 
 | ||||
|   return [ | ||||
|     ((f2 + f4 + f5 + f6) * 1.3 - uvd_len * .05) * intensity, | ||||
|     ((f22 + f42 + f52 + f62) * 1.3 - uvd_len * .05) * intensity, | ||||
|     ((f23 + f43 + f53 + f63) * 1.3 - uvd_len * .05) * intensity | ||||
|   ]; | ||||
|     imgdata.data[4 * i + 0] += 1.2 * ((f2 + f4 + f5 + f6) * 1.3 - uvd_len * .05) * intensity * 255; | ||||
|     imgdata.data[4 * i + 1] += 1.5 * ((f22 + f42 + f52 + f62) * 1.3 - uvd_len * .05) * intensity * 255; | ||||
|     imgdata.data[4 * i + 2] += 1.3 * ((f23 + f43 + f53 + f63) * 1.3 - uvd_len * .05) * intensity * 255; | ||||
|     imgdata.data[4 * i + 3] = 255; | ||||
|   } | ||||
|   ctx.putImageData(imgdata, 0, 0); | ||||
| } | ||||
| 
 | ||||
| function draw(viewport_scale) { | ||||
|  | @ -175,22 +160,7 @@ function draw(viewport_scale) { | |||
|   ctx.drawImage(img, 0, 0, canvas.width, canvas.height); | ||||
|   ctx.filter = ''; | ||||
| 
 | ||||
|   var imgdata = ctx.getImageData(0, 0, canvas.width, canvas.height); | ||||
|   const pixel_count = imgdata.data.length / 4; | ||||
|   for (let i = 0; i < pixel_count; i++) { | ||||
|     let x = i % canvas.width; | ||||
|     let y = i / canvas.width; | ||||
|     let u = (x / canvas.width - .5) * canvas.width / canvas.height; | ||||
|     let v = y / canvas.height - .5; | ||||
| 
 | ||||
|     let color = lensflare(u, v, 0.3, 0.3); | ||||
|     const a = (color[0] + color[1] + color[2]) / 3; | ||||
|     imgdata.data[4 * i] += 1.2 * color[0] * 255; | ||||
|     imgdata.data[4 * i + 1] += 1.5 * color[1] * 255; | ||||
|     imgdata.data[4 * i + 2] += 1.3 * color[2] * 255; | ||||
|     imgdata.data[4 * i + 3] = 255; | ||||
|   } | ||||
|   ctx.putImageData(imgdata, 0, 0); | ||||
|   lensflare(.3,.3); | ||||
| 
 | ||||
| } | ||||
| 
 | ||||
|  |  | |||
		Loading…
	
		Reference in a new issue