? ????? Pixijs ? WebGL??? ??? ???? ???? ????? ???? ?? ?? ?? ??? ???? ?? ?????. ??? ?????.

2D ? 3D ??? ?????? JavaScript API ? WebGL? ??? ??? ????? ?? ? ? ????. Pixijs? ?? ?????? WebGL ??? ??????. ? ????? pixijs? ???? ???? ????? ??? ?? ???? ????. ?? JavaScript (ES6) ??? ?????? ?? WebGL ?? Pixijs ?? ??? ???? ????. Fragment Shaders ( "The Book of Shaders"? ?? ???? ???)? ?? ?? ?? ?????.

??:

1. HTML? ????? pixijs ?????? ??????.
2. a<canvas></canvas> ???? ?? ?? (?? ???? ??? ??).
3. new PIXI.Application(options) ???? pixijs ?? ????? ???????.

?? JavaScript ??? ????? ?????.

 // ?????? ????
const view = document.querySelector ( '. view');
??, ??, ?;

// ??? ?????
?? initDimensions () {
  ?? = Window.innerWidth;
  ?? = Window.innerHeight;
}

// pixijs ?? ????? ?????
?? initapp () {
  app = new pixi.application ({view});
  app.renderer.autodensity = 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 color = vec3 (0.0);
  color.b = isgridline (coord) * 0.3;
  GL_FRAGCOLOR = VEC4 (?, 1.0);
}

? ???????? ??? ??? ?? ? ? ?????? ?????.

 // ????? ? ?? ?? ??????
pixi.loader.shared.add ([ '???/?? ???? .glsl']. load (init);

// ??? ??? ?????
?? initbackground () {
  ?? = new pixi.sprite ();
  background.width = ??;
  ??. ??? = ??;
  Const BackgroundFragmentShader = Resources [ '???/BackgroundFragment.glsl']. ???;
  const backgroundfilter = new pixi.filter (???? ??, backgroundFragmentShader);
  background.filters = [backgroundFilter];
  app.stage.addchild (??);
}

??? ??? ??? ?????.

?? ?? :

?? ?? ?? ??? Shadertoy ??? ???? ?? ???? ???? ?????. ? ???? JavaScript?? ?? ? ??? ( uResolution , uPointerDown )? ?????.

 // ... (??? ??? ??? ????? ???? ?? ?????? ????????) ...

JavaScript ???? ???? ?????? ??? ??? ?????.

 // ... (???? ????? ?????? JavaScript ??) ...

? ??? ??? ???? ??? ?????.

??? ??? ? ????? :

??? ?????, pointerdown , pointerup , pointerupoutside ? pointermove ???? ????. ? ???? ??? ??????? ??? ? ?? ??? ???? ?? ??? ( uPointerDown , uPointerDiff )? ???????. app.ticker.add() ???? ???? ?????? ?? ????? ??? ????.

??? ?? ??? ???? :

????? ??? ?? ????? ?????. ???? ?? ??? ?? ? ??? ???? ?? ??? ???? ?? ?????. ? ????? ???? ???? ? ?????.

??? ??? :

??? ???? PIXI.Graphics ???? ??? ???? ???? ?? ????? ??????. ???? ( PIXI.Container )? ??? ????? ??? ???? ???? ???? ??????.

unsplash?? ??? ?? :

? ?????? ? ????? ?????. loadTextureForImage ??? ?????? ??? ???? ?? ????? ??? ???? Unsplash?? ???? ???? AbortController ???? ???? ??? ?????. checkRectsAndImages ?? ? ?? ??? ?????. ?? rectIntersectsWithViewport viewport ???? ?????.

??? ?? ?? ?? :

??? ??? onResize window.addEventListener('resize', onResize) clean ??? ?????? ???? ??? ???? ???? ???? ?? ??? ?????.

? ??? ? ?? ??? ?? ?? ??? ?? ??? ????? ?? ? ??? ???? ?????. ?? ???? ??? ??? ????? ?? ? ? ????.

? ??? Pixijs ? WebGL? ???? ??? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!