該教程展示了使用Pixijs和WebGL構(gòu)建圖像庫(kù)，從而達(dá)到了視覺(jué)上吸引人的立方透鏡失真效果。讓我們探索這個(gè)過(guò)程：

WebGL是用于渲染2D和3D圖形的JavaScript API，具有強(qiáng)大的功能，但可能很復(fù)雜。像Pixijs這樣的庫(kù)簡(jiǎn)化了WebGL開(kāi)發(fā)。該教程利用Pixijs創(chuàng)建了一個(gè)靈感來(lái)自Dribbble Design的畫(huà)廊。盡管某些JavaScript（ES6）知識(shí)是有用的，但不需要高級(jí)WebGL或Pixijs專(zhuān)業(yè)知識(shí)。熟悉碎片著色器（建議使用“著色書(shū)”之類(lèi)的資源是有益的。

設(shè)置：

1. 作為腳本，將Pixijs庫(kù)包含在您的HTML中。
2. 使用<canvas></canvas>元素（或動(dòng)態(tài)創(chuàng)建一個(gè)用于渲染）。
3. 使用new PIXI.Application(options)初始化Pixijs應(yīng)用程序。

提供了一個(gè)基本的JavaScript樣板板：

 //獲取畫(huà)布視圖
const view = document.queryselector（'。view'）;
令寬度，高度，應(yīng)用程序；

//設(shè)置尺寸
函數(shù)initDimensions（）{
  width = window.innerwidth;
  高度= window.innerheight;
}

// init the pixijs申請(qǐng)
函數(shù)initapp（）{
  app = new Pixi.Application（{view}）;
  app.renderer.autodentys = true;
  app.renderer.resize（寬度，高度）;
}

//啟動(dòng)一切
函數(shù)init（）{
  initdimensions（）;
  initapp（）;
}

//初始通話
init（）;

運(yùn)行此代碼在控制臺(tái)中顯示黑屏和Pixijs版本消息。

創(chuàng)建網(wǎng)格背景：

網(wǎng)格背景增強(qiáng)了失真效果的可見(jiàn)度。這需要一個(gè)碎片著色器：

 #ifdef gl_es
精密中等浮點(diǎn)；
#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）;
}

該著色器已加載，并將過(guò)濾器應(yīng)用于舞臺(tái)上添加的空精靈：

 //加載資源，然后啟動(dòng)應(yīng)用程序
pixi.loader.shared.add（['shaders/backgroundfragment.glsl']）。加載（init）;

//啟動(dòng)網(wǎng)格背景
功能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）;
}

這揭示了柵格的背景。

失真效應(yīng)：

使用基于Shadertoy演示的另一個(gè)著色器添加了立方透鏡失真效果。該著色器使用從JavaScript傳遞的制服（ uResolution ， uPointerDown ）：

 // ...（著色器代碼類(lèi)似于原始代碼，但有可能簡(jiǎn)化或重組為了清楚起見(jiàn)）...

JavaScript代碼更新這些制服以控制效果的強(qiáng)度：

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

將此過(guò)濾器應(yīng)用于舞臺(tái)會(huì)產(chǎn)生失真。

指針事件和動(dòng)畫(huà)：

舞臺(tái)變得互動(dòng)，聆聽(tīng)pointerdown ， pointerup ， pointerupoutside和pointermove事件。這些事件更新了制服（ uPointerDown ， uPointerDiff ），以使失真動(dòng)畫(huà)并實(shí)現(xiàn)拖放功能。 app.ticker.add()創(chuàng)建一個(gè)動(dòng)畫(huà)循環(huán)以平滑更新制服。

隨機(jī)砌體網(wǎng)格布局：

算法生成隨機(jī)的砌體布局。這涉及遞歸分裂矩形，直到達(dá)到最小尺寸。然后，該布局用于定位圖像。

繪圖矩形：

使用PIXI.Graphics繪制實(shí)心矩形，以在添加圖像之前可視化布局。一個(gè)容器（ PIXI.Container ）包含這些矩形和未來(lái)圖像，從而簡(jiǎn)化了運(yùn)動(dòng)。

添加Unsplash的圖像：

為每個(gè)圖像創(chuàng)建空精靈。 loadTextureForImage函數(shù)僅在Sprite在視口內(nèi)，使用AbortController取消不必要的請(qǐng)求，從Sprite尺寸中獲取圖像。 checkRectsAndImages管理加載和α轉(zhuǎn)換。函數(shù)rectIntersectsWithViewport確定視口交叉點(diǎn)。

處理視口度調(diào)整大小：

事件偵聽(tīng)器（ window.addEventListener('resize', onResize) ）和onResize函數(shù)句柄句柄視口大小更改，清理了現(xiàn)有資源并重新定制了應(yīng)用程序。 clean功能可以停止動(dòng)畫(huà)，刪除事件的聽(tīng)眾，并中止尚待提取請(qǐng)求。

這種全面的方法導(dǎo)致具有動(dòng)態(tài)失真效果的功能齊全，響應(yīng)式圖像庫(kù)?？梢酝ㄟ^(guò)其他功能進(jìn)一步優(yōu)化代碼并擴(kuò)展。

以上是使用Pixijs和WebGL構(gòu)建圖像庫(kù)的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！