使用Pixijs和WebGL构建图像库

该教程展示了使用Pixijs和WebGL构建图像库，从而达到了视觉上吸引人的立方透镜失真效果。让我们探索这个过程：

WebGL是用于渲染2D和3D图形的JavaScript API，具有强大的功能，但可能很复杂。像Pixijs这样的库简化了WebGL开发。该教程利用Pixijs创建了一个灵感来自Dribbble Design的画廊。尽管某些JavaScript（ES6）知识是有用的，但不需要高级WebGL或Pixijs专业知识。熟悉碎片着色器（建议使用“着色书”之类的资源是有益的。

设置：

1. 作为脚本，将Pixijs库包含在您的HTML中。
2. 使用<canvas></canvas>元素（或动态创建一个用于渲染）。
3. 使用new PIXI.Application(options)初始化Pixijs应用程序。

提供了一个基本的JavaScript样板板：

 //获取画布视图
const view = document.queryselector（'。view'）;
令宽度，高度，应用程序；

//设置尺寸
函数initDimensions（）{
  width = window.innerwidth;
  高度= window.innerheight;
}

// init the pixijs申请
函数initapp（）{
  app = new Pixi.Application（{view}）;
  app.renderer.autodentys = true;
  app.renderer.resize（宽度，高度）;
}

//启动一切
函数init（）{
  initdimensions（）;
  initapp（）;
}

//初始通话
init（）;

运行此代码在控制台中显示黑屏和Pixijs版本消息。

创建网格背景：

网格背景增强了失真效果的可见度。这需要一个碎片着色器：

 #ifdef gl_es
精密中等浮点；
#endif

float iSgridline（vec2 coord）{
  VEC2 PixelSperGrid = Vec2（50.0，50.0）;
  vec2 gridcoords = fract（coord / pixelspergrid）;
  VEC2 GridPixelCoords = GridCoords * PixelSperGrid;
  vec2 gridline = step（gridpixelcoords，vec2（1.0））;
  float isGridline = max（gridline.x，gridline.y）;
  返回iSgridline;
}

void main（）{
  vec2 coord = gl_fragcoord.xy;
  VEC3颜色= VEC3（0.0）;
  color.b = iSgridline（coord） * 0.3;
  gl_fragcolor = Vec4（颜色，1.0）;
}

该着色器已加载，并将过滤器应用于舞台上添加的空精灵：

 //加载资源，然后启动应用程序
pixi.loader.shared.add（['shaders/backgroundfragment.glsl']）。加载（init）;

//启动网格背景
功能initbackground（）{
  背景= new Pixi.sprite（）;
  background.width = width;
  背景=高度;
  const BackgroundFragmentShader = Resources ['着色器/背景fragment.glsl']。
  const BackgroundFilter = new Pixi.filter（未定义，背景范围shader）;
  Background.Filters = [BackgroundFilter];
  app.stage.addchild（background）;
}

这揭示了栅格的背景。

失真效应：

使用基于Shadertoy演示的另一个着色器添加了立方透镜失真效果。该着色器使用从JavaScript传递的制服（ uResolution ， uPointerDown ）：

 // ...（着色器代码类似于原始代码，但有可能简化或重组为了清楚起见）...

JavaScript代码更新这些制服以控制效果的强度：

 // ...（JavaScript代码初始化和更新制服）...

将此过滤器应用于舞台会产生失真。

指针事件和动画：

舞台变得互动，聆听pointerdown ， pointerup ， pointerupoutside和pointermove事件。这些事件更新了制服（ uPointerDown ， uPointerDiff ），以使失真动画并实现拖放功能。 app.ticker.add()创建一个动画循环以平滑更新制服。

随机砌体网格布局：

算法生成随机的砌体布局。这涉及递归分裂矩形，直到达到最小尺寸。然后，该布局用于定位图像。

绘图矩形：

使用PIXI.Graphics绘制实心矩形，以在添加图像之前可视化布局。一个容器（ PIXI.Container ）包含这些矩形和未来图像，从而简化了运动。

添加Unsplash的图像：

为每个图像创建空精灵。 loadTextureForImage函数仅在Sprite在视口内，使用AbortController取消不必要的请求，从Sprite尺寸中获取图像。 checkRectsAndImages管理加载和α转换。函数rectIntersectsWithViewport确定视口交叉点。

处理视口度调整大小：

事件侦听器（ window.addEventListener('resize', onResize) ）和onResize函数句柄句柄视口大小更改，清理了现有资源并重新定制了应用程序。 clean功能可以停止动画，删除事件的听众，并中止尚待提取请求。

这种全面的方法导致具有动态失真效果的功能齐全，响应式图像库。可以通过其他功能进一步优化代码并扩展。

以上是使用Pixijs和WebGL构建图像库的详细内容。更多信息请关注PHP中文网其他相关文章！