Create index.js (#2)

- Create index.js (5ff24d76e55e503c147ead44acec8632ffc7ce8b)

index.js

@@ -0,0 +1,187 @@
+const canvas = document.getElementById('gl');
+const gl = canvas.getContext('webgl');
+if (!gl) { alert('此瀏覽器不支援 WebGL'); }
+
+function resize() {
+  const dpr = Math.min(window.devicePixelRatio || 1, 2);
+  const w = Math.floor(window.innerWidth * dpr);
+  const h = Math.floor((window.innerHeight - document.querySelector('.ui').offsetHeight) * dpr);
+  canvas.width = w; canvas.height = Math.max(h, 2);
+  canvas.style.width = '100%'; canvas.style.height = '100%';
+  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+}
+window.addEventListener('resize', resize);
+
+const vertSrc = `
+attribute vec2 aPos;
+attribute vec2 aUV;
+varying vec2 vUV;
+void main(){
+  vUV = aUV;
+  gl_Position = vec4(aPos, 0.0, 1.0);
+}`;
+
+// fragment shader（點質量透鏡公式 β = θ - θ_E² θ / |θ|²）
+const fragSrc = `
+precision highp float;
+varying vec2 vUV;
+uniform sampler2D uTex;
+uniform vec2  uPosition;
+uniform float uThetaE2;
+uniform float uRatio;
+uniform float uShadowScale;
+
+void main(){
+  float eps = 1e-6;
+  vec2 d = vUV - uPosition;
+  vec2 d_n = d / vec2(uRatio, 1.0);
+  float r2 = dot(d_n, d_n) + eps;
+  vec2 beta_n = d_n - (uThetaE2 * d_n / r2);
+  vec2 sampleUV = beta_n * vec2(uRatio, 1.0) + uPosition;
+  vec4 res = texture2D(uTex, clamp(sampleUV, 0.0, 1.0));
+  if (length(d_n) < uShadowScale * sqrt(uThetaE2)) {
+    res.rgb = vec3(0.0);
+  }
+  gl_FragColor = res;
+}`;
+
+function compile(type, src){
+  const sh = gl.createShader(type);
+  gl.shaderSource(sh, src);
+  gl.compileShader(sh);
+  if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
+    throw new Error(gl.getShaderInfoLog(sh) || 'shader compile error');
+  }
+  return sh;
+}
+
+const vs = compile(gl.VERTEX_SHADER, vertSrc);
+const fs = compile(gl.FRAGMENT_SHADER, fragSrc);
+const prog = gl.createProgram();
+gl.attachShader(prog, vs);
+gl.attachShader(prog, fs);
+gl.linkProgram(prog);
+if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+  throw new Error(gl.getProgramInfoLog(prog) || 'program link error');
+}
+gl.useProgram(prog);
+
+const quad = new Float32Array([
+  -1, -1,  0, 0,
+   1, -1,  1, 0,
+  -1,  1,  0, 1,
+   1,  1,  1, 1,
+]);
+const ibo = new Uint16Array([0,1,2,2,1,3]);
+const vbo = gl.createBuffer();
+const ebo = gl.createBuffer();
+
+gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+gl.bufferData(gl.ARRAY_BUFFER, quad, gl.STATIC_DRAW);
+gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ebo);
+gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, ibo, gl.STATIC_DRAW);
+
+const aPos = gl.getAttribLocation(prog, 'aPos');
+const aUV  = gl.getAttribLocation(prog, 'aUV');
+gl.enableVertexAttribArray(aPos);
+gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
+gl.enableVertexAttribArray(aUV);
+gl.vertexAttribPointer(aUV, 2, gl.FLOAT, false, 16, 8);
+
+const uTex = gl.getUniformLocation(prog, 'uTex');
+const uPosition = gl.getUniformLocation(prog, 'uPosition');
+const uThetaE2 = gl.getUniformLocation(prog, 'uThetaE2');
+const uRatio = gl.getUniformLocation(prog, 'uRatio');
+const uShadowScale = gl.getUniformLocation(prog, 'uShadowScale');
+
+gl.uniform1i(uTex, 0);
+
+let state = {
+  position: { x: 0.5, y: 0.5 },
+  thetaE2: parseFloat(document.getElementById('thetaE').value),
+  shadowScale: parseFloat(document.getElementById('shadowScale').value)
+};
+
+function updateUniforms(){
+  const ratio = gl.drawingBufferWidth / gl.drawingBufferHeight;
+  gl.uniform2f(uPosition, state.position.x, state.position.y);
+  gl.uniform1f(uThetaE2, state.thetaE2);
+  gl.uniform1f(uRatio, ratio);
+  gl.uniform1f(uShadowScale, state.shadowScale);
+}
+
+let texture = gl.createTexture();
+function useTextureFromImage(img){
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+}
+
+function genStarfield(w=1024, h=512){
+  const cvs = document.createElement('canvas');
+  cvs.width = w; cvs.height = h; const ctx = cvs.getContext('2d');
+  ctx.fillStyle = '#000'; ctx.fillRect(0,0,w,h);
+  for(let i=0;i<5000;i++){
+    const x=Math.random()*w, y=Math.random()*h; const s=Math.random()*1.6+0.2;
+    const a=Math.random()*0.9+0.1; ctx.fillStyle = `rgba(255,255,255,${a})`;
+    ctx.fillRect(x, y, s, s);
+  }
+  return cvs;
+}
+
+useTextureFromImage(genStarfield());
+
+const imgInput = document.getElementById('img');
+imgInput.addEventListener('change', e => {
+  const file = e.target.files[0]; if (!file) return;
+  const img = new Image();
+  img.onload = () => useTextureFromImage(img);
+  img.src = URL.createObjectURL(file);
+});
+
+let dragging = false;
+let animate = true;
+const chkAnimate = document.getElementById('animate');
+chkAnimate.addEventListener('change', () => animate = chkAnimate.checked);
+
+canvas.addEventListener('mousedown', (e)=>{ dragging = true; move(e); });
+window.addEventListener('mouseup',   ()=> dragging = false);
+window.addEventListener('mousemove', (e)=>{ if (dragging) move(e); });
+
+function move(e){
+  const rect = canvas.getBoundingClientRect();
+  const x = (e.clientX - rect.left) / rect.width;
+  const y = (e.clientY - rect.top)  / rect.height;
+  state.position.x = x; state.position.y = 1.0 - y;
+}
+
+const thetaEEl = document.getElementById('thetaE');
+const shadowEl = document.getElementById('shadowScale');
+thetaEEl.addEventListener('input', ()=> state.thetaE2 = parseFloat(thetaEEl.value));
+shadowEl.addEventListener('input', ()=> state.shadowScale = parseFloat(shadowEl.value));
+
+document.getElementById('reset').addEventListener('click', ()=>{
+  state = { position: {x:0.5, y:0.5}, thetaE2: 0.01, shadowScale: 2.598 };
+  thetaEEl.value = state.thetaE2; shadowEl.value = state.shadowScale; chkAnimate.checked = false; animate = false;
+});
+
+resize();
+let t0 = performance.now();
+function render(now){
+  if (animate){
+    const t = (now - t0) * 0.001;
+    const r = 0.25; const cx = 0.5, cy = 0.55;
+    state.position.x = cx + r * Math.cos(t*0.3);
+    state.position.y = cy + r * Math.sin(t*0.3);
+    state.thetaE2 = 0.01 + 0.005*Math.sin(t*0.7);
+  }
+  updateUniforms();
+  gl.clearColor(0,0,0,1); gl.clear(gl.COLOR_BUFFER_BIT);
+  gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
+  requestAnimationFrame(render);
+}
+requestAnimationFrame(render);