Cargo Collective上许多艺术家的作品集页面，背景是流动的WebGL画布，前景则是普通的HTML导航和项目列表。这种组合让页面既有沉浸式视觉，又保留了清晰的可点击结构。从实现角度看，它并不是把整个界面做进WebGL，而是让一个全屏<canvas>位于底层，多个<div>叠加层浮在上面。jQuery在这个过程中经常被用来处理叠加层与画布之间的事件协调、坐标转换和状态同步。虽然现在有React、Vue等框架，但Cargo Collective大量页面仍沿用jQuery，原因在于它轻量、选择器直观，并且能快速绑定全局事件。
要理解jQuery在其中具体解决什么问题，首先得把渲染循环和交互事件分开看。WebGL请求动画帧只负责重绘画布，它不关心用户点击了哪个按钮；DOM按钮只负责响应点击，也不直接修改着色器参数。两者之间的所有通信，必须通过一个共享的JavaScript对象来完成。这个对象里通常存放鼠标在画布上的归一化位置、当前滚动距离、视口尺寸以及某个交互状态标记。jQuery的职责就是在mousemove、click、resize、scroll等事件触发时更新这些数据，而WebGL渲染循环每一帧读取它们。这样DOM和GPU各司其职，避免在事件回调里直接触发绘制导致逻辑混乱。
一、WebGL画布与DOM叠加的架构难点
混合架构最直观的难题是事件穿透和命中检测。一个覆盖在画布上的透明<div>如果设置了大尺寸，它自身会成为鼠标事件的唯一目标，底层画布永远收不到mousemove，除非把叠加层的pointer-events设为none。但设为none后，叠加层里的按钮又会失去点击能力。常见做法是把最外层事件层设为pointer-events: none，再对内部可交互元素重新开启pointer-events: auto。jQuery可以批量处理这些样式，或者通过事件委托在父容器上判断目标元素。
另一个难点是坐标空间不一致。鼠标事件给出的clientX和clientY是相对于浏览器视口的，而WebGL着色器通常需要0到1之间的归一化坐标，并且要考虑画布的实际像素尺寸与CSS显示尺寸的比值。如果画布CSS宽高是100%视口，物理像素尺寸又受devicePixelRatio影响，直接把客户端坐标除以CSS宽高会得到错误结果。尤其是当页面发生滚动或画布上方有固定导航时，坐标原点还会偏移。
此外，性能问题也不容忽视。艺术网站经常在背景里运行高帧率的粒子系统，如果每个mousemove都去操作DOM或重新计算布局，很容易造成掉帧。jQuery本身的选择器查找和样式读取也会触发重排，所以需要把高频事件与渲染循环解耦，只在必要时读写布局信息。
<div class="stage">
<canvas class="webgl-layer"></canvas>
<div class="overlay">
<nav class="site-nav">
<a href="#" class="nav-link">作品集</a>
</nav>
<button class="menu-trigger">菜单</button>
</div>
</div>
二、jQuery如何做事件桥接与坐标映射
jQuery在这里的核心价值是快速建立全局事件监听，并且把浏览器原生事件转换成渲染循环可读的数据。一般来说，不建议把mousemove回调里的计算直接写入WebGL的uniform，因为事件触发频率远高于屏幕刷新率。更合适的做法是缓存最新鼠标位置，然后在requestAnimationFrame循环中读取。
获取画布相对坐标可以使用getBoundingClientRect，但要注意该方法会返回浮点数并且包含滚动偏移。代码可以这样写：先通过jQuery获取画布元素，再在事件回调里读取event.clientX和event.clientY，减去画布左上角坐标，最后除以画布CSS宽度和高度。如果需要归一化坐标，还要乘以devicePixelRatio换算成物理像素。
var $window = $(window);
var $canvas = $('.webgl-layer');
var sharedState = {
mouseX: 0.5,
mouseY: 0.5,
scrollY: 0
};
function updateMousePosition(event) {
var rect = $canvas[0].getBoundingClientRect();
var cssX = event.clientX - rect.left;
var cssY = event.clientY - rect.top;
sharedState.mouseX = Math.max(0, Math.min(1, cssX / rect.width));
sharedState.mouseY = Math.max(0, Math.min(1, cssY / rect.height));
}
function animate() {
// WebGL渲染循环读取sharedState
renderWebGL(sharedState);
requestAnimationFrame(animate);
}
$window.on('mousemove', function (event) {
updateMousePosition(event);
});
requestAnimationFrame(animate);
上面的代码里，mousemove处理器只做了轻量的矩形读取和数学计算，没有直接操作DOM样式，所以即使事件频率较高，对主线程的影响也有限。不过getBoundingClientRect仍可能引起浏览器重新计算布局，特别是在窗口尺寸变化后。为了进一步减少开销，可以在resize事件里缓存画布的矩形信息，并在滚动时更新纵向偏移，而不是每次mousemove都重新调用。
对于叠加层自身的点击，jQuery的事件委托能有效区分用户点击的是菜单按钮还是透明区域。可以给整个.stage容器绑定click，然后在回调中检查event.target是否匹配某个选择器。如果匹配就执行对应DOM操作，否则把点击视为背景交互，可能触发WebGL的某个过渡动画。这样就不需要给每个按钮单独绑定事件，也便于动态加入新的DOM节点。
$('.stage').on('click', function (event) {
var $target = $(event.target);
if ($target.hasClass('menu-trigger')) {
$('.site-nav').toggleClass('is-visible');
return;
}
if ($target.closest('.site-nav').length) {
// 处理导航项点击
var index = $target.closest('.site-nav').index();
sharedState.activeIndex = index;
return;
}
// 点击透明区域时通知WebGL产生背景反馈
sharedState.backgroundPulse = true;
});
三、叠加层交互与动画同步策略
做完事件桥接后，下一个问题是怎样让DOM层的动画和WebGL背景保持同步。典型的交互是：鼠标悬停在某个作品卡片上，背景粒子会朝该卡片的位置聚拢；或者点击导航按钮时，WebGL场景切换相机角度。这些效果不能只靠CSS过渡完成，因为背景画布的内容由着色器控制，需要把DOM层的变化翻译成uniform参数。
一种简单可靠的方案是使用data-*属性配合jQuery的data方法。例如每个卡片可以携带data-target-x和data-target-y，表示它在页面上的位置。鼠标进入卡片时，jQuery读取这些值并把归一化后的坐标写入sharedState，同时设置一个缓动起点。渲染循环在每一帧根据当前鼠标位置和目标位置做插值，这样背景动画就能平滑地朝卡片方向移动。
另一种更灵活的做法是修改CSS自定义属性。jQuery可以给根元素设置style属性，比如--bg-intensity，WebGL这边无法直接读取CSS变量，但JavaScript可以在渲染循环里通过getComputedStyle读取。不过这种方法性能不如直接维护共享对象，而且getComputedStyle在每帧调用也会造成较大开销。在Cargo Collective这类追求视觉流畅的页面上，更推荐使用共享状态对象，CSS变量只作为调试观察值。
$('.project-card').on('mouseenter', function () {
var $card = $(this);
var rect = $card[0].getBoundingClientRect();
var stageRect = $('.stage')[0].getBoundingClientRect();
sharedState.targetX = (rect.left + rect.width / 2 - stageRect.left) / stageRect.width;
sharedState.targetY = (rect.top + rect.height / 2 - stageRect.top) / stageRect.height;
sharedState.cardHovered = true;
}).on('mouseleave', function () {
sharedState.cardHovered = false;
});
滚动也是影响同步体验的重要因素。当用户快速滚动时，DOM内容会移动，背景画布如果继续以高帧率渲染粒子，容易造成视觉脱节或移动端发热。可以利用jQuery监听scroll事件，更新sharedState.scrollY，同时根据滚动速度临时降低WebGL的帧率或暂停不需要的动画。例如滚动开始后设置sharedState.isScrolling为真，滚动停止200毫秒后再恢复。这个防抖逻辑用jQuery的setTimeout就能实现，不必引入额外库。
四、移动端适配与性能避坑
移动端上的触摸事件和鼠标事件并不完全等价，如果只绑定mousemove，在iOS Safari上可能无法获得连续的触摸轨迹。现在更推荐统一使用pointermove、pointerdown等指针事件，但旧版浏览器需要回退到touchmove。jQuery 3.x已经支持部分指针事件，可以通过事件名直接绑定。需要注意的是，touchmove默认在移动端可能被浏览器标记为被动监听，调用preventDefault会失败。如果背景画布不需要阻止页面滚动，就保持默认被动行为；如果确实需要阻止，建议在原生监听器里设置passive: false，而不是完全依赖jQuery。
画布尺寸与设备像素比是移动端最容易踩坑的地方。很多开发者会把画布宽高设置为视口宽高，却忘了乘以devicePixelRatio，结果在Retina屏幕上画面模糊。WebGL的绘图缓冲区尺寸需要按window.devicePixelRatio缩放，而CSS尺寸保持不变。在resize或orientationchange事件里，jQuery可以用来统一触发尺寸更新，更新后重新设置gl.viewport和投影矩阵。
function resizeCanvas() {
var dpr = window.devicePixelRatio || 1;
var width = window.innerWidth;
var height = window.innerHeight;
$canvas
.attr('width', Math.round(width * dpr))
.attr('height', Math.round(height * dpr))
.css('width', width + 'px')
.css('height', height + 'px');
gl.viewport(0, 0, Math.round(width * dpr), Math.round(height * dpr));
// 更新投影矩阵...
}
$window.on('resize orientationchange', function () {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(resizeCanvas, 120);
});
最后要强调，jQuery虽然适合做事件层面的协调，但绝不应该出现在WebGL渲染循环内部。每帧都执行$('.element').css(...)会触发样式计算和重排，在移动端可能直接把帧率拉到个位数。正确做法是把所有需要传递给GPU的数据保存在普通JavaScript对象里，由jQuery在事件回调中更新，渲染循环只读取这些数据。对于需要高频更新的动画，比如鼠标跟随，事件回调也可以只负责把原始事件数据写入，实际的插值和阻尼计算放到requestAnimationFrame里完成。这样既保留了jQuery在DOM操作上的便利，又避免了它对渲染性能的负面影响。
Cargo Collective上的许多作品集页面之所以能兼顾艺术性和流畅度，正是因为它们把WebGL渲染和DOM交互做了清晰分离。jQuery在其中像是一个轻量的接线员，把来自鼠标、触摸、滚动的意图翻译成共享状态，再交给渲染层消费。对开发者来说，这套模式并不复杂，关键在于不要混淆两个层的职责，并且在坐标转换、事件委托和移动端DPR上做足细节。理解了这些，即便不用jQuery，换用原生API或其它框架，也能搭建出同样稳定高效的混合交互页面。