const canvas = document.getElementById(“canvas”);
const gl = canvas.getContext(“webgl”);
const VERTEX_SHADER_SOURCE = attribute vec4 pointPosition; attribute vec4 aTex; varying vec2 vTex; varying vec4 vPosition; void main(){ vPosition = pointPosition; vTex = vec2(aTex.x,aTex.y); gl_Position = pointPosition; };
const FRAGMENT_SHADER_SOURCE = precision lowp float; uniform sampler2D uSampler; varying vec2 vTex; uniform vec2 lookAt; varying vec4 vPosition; void main(){ vec2 uv=vTex; float fOpacity = 0.0; float fDistinct = distance(lookAt,vec2(vPosition)); if(fDistinct>=0.2){ fOpacity=0.05; }else{ vec2 deff = vPosition.xy-lookAt; uv.x -=(deff.x*0.2); uv.y +=(deff.y*0.2); fOpacity=1.0; } vec4 color = texture2D(uSampler,uv); gl_FragColor = vec4(color.xyz*fOpacity,fOpacity); };
const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE);

const attr = gl.getAttribLocation(program, "pointPosition");
const aTex = gl.getAttribLocation(program, "aTex");
const uSampler = gl.getUniformLocation(program, "uSampler");
const lookAt = gl.getUniformLocation(program, "lookAt");

// 创建所有顶点
let points = new Float32Array([
    0.9, 0.6, 0.0, 1.0,
    0.9, -0.6, 0.0, 0.0,
    -0.9, 0.6, 1.0, 1.0,
    -0.9, -0.6, 1.0, 0.0
]);

// 创建缓冲区域
let buffer = gl.createBuffer();

// buffer绑定到webgl上
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

// 把数据写入到buffer中
gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

// 获取类型化数组中每个元素的字节数
let bytes = points.BYTES_PER_ELEMENT;

// 把缓冲区数据传到顶点着色器的参数中
gl.vertexAttribPointer(attr, 2, gl.FLOAT, false, bytes * 4, 0);

// 激活顶点位置
gl.enableVertexAttribArray(attr);

// 把缓冲区数据传到顶点着色器的参数中
gl.vertexAttribPointer(aTex, 2, gl.FLOAT, false, bytes * 4, bytes * 2);
// 激活顶点位置
gl.enableVertexAttribArray(aTex);

let img = new Image();
img.onload = function () {
    // 创建纹理对象
    let texture = gl.createTexture();

    // 翻转纹理图片
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);

    // 开启纹理单元
    gl.activeTexture(gl.TEXTURE0);

    // 绑定纹理单元
    gl.bindTexture(gl.TEXTURE_2D, texture);

    // 处理放大和缩小的逻辑
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_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);

    // 配置纹理图像
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img);

    // 给uniform赋值
    gl.uniform1i(uSampler, 0);
}

img.src = "../img/4.jpeg";

function draw() {
    // 绘制
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    requestAnimationFrame(draw);
}

draw();

function mouseMove(e) {
    let x = e.offsetX;
    let y = e.offsetY;
    let xx = (x - 200) / 200;
    let yy = (200 - y) / 200;
    gl.uniform2fv(lookAt, [xx, yy]);
}