Pixi.js: WebGL ์ปจํ…์ŠคํŠธ๊ฐ€ ์ž˜๋ชป ๋ณต์›๋จ(pixi v5)

์— ๋งŒ๋“  2019๋…„ 05์›” 20์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: pixijs/pixi.js

pixi v4์—์„œ๋Š” ๋ชจ๋“  ๊ฒƒ์ด ์ž˜ ์ž‘๋™ํ•˜์ง€๋งŒ v5(WebGL 2) ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์—์„œ๋Š” ์ž˜๋ชป ๋ณต์›๋จ

์˜ˆ์ƒ๋˜๋Š” ๋™์ž‘

๋‘ ๋ฒ„์ „์˜ pixi ๋ชจ๋‘ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ๋ณต์›ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

ํ˜„์žฌ ํ–‰๋™

webgl2๋กœ v5 pixi ๋ฒ„์ „์„ ์„ ํƒํ•˜๋ฉด ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์ด ๋ณต์›๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
webgl๋กœ v4 pixi ๋ฒ„์ „์„ ์„ ํƒํ•˜๋ฉด ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์ด ์ž˜ ๋ณต์›๋ฉ๋‹ˆ๋‹ค.

๋ฒˆ์‹ ๋‹จ๊ณ„

  1. PC ํฌ๋กฌ์—์„œ https://pixijs.io/examples/#/demos -basic/container.js ์—ด๊ธฐ
  2. v5 pixi ๋ฒ„์ „ ์„ ํƒ
  3. iframe ์ปจํ…์ŠคํŠธ๋กœ ํฌ๋กฌ ๊ฐœ๋ฐœ ๋„๊ตฌ ์ฝ˜์†” ์—ด๊ธฐ
  4. webgl ์ปจํ…์ŠคํŠธ๋ฅผ ์žƒ๋Š” ๋‹ค์Œ ๋ช…๋ น ์ž‘์„ฑ document.querySelector('canvas').getContext('webgl2').getExtension('WEBGL_lose_context').loseContext()
  5. ๋ช‡ ์ดˆ๋งŒ ๊ธฐ๋‹ค๋ฆฌ์„ธ์š”
  6. webgl ์ปจํ…์ŠคํŠธ๋ฅผ ๋ณต์›ํ•˜๋Š” ๋‹ค์Œ ๋ช…๋ น ์ž‘์„ฑ document.querySelector('canvas').getContext('webgl2').getExtension('WEBGL_lose_context').restoreContext()

    ํ™˜๊ฒฝ

  • pixi.js ๋ฒ„์ „ : _5.0.3_
  • ๋ธŒ๋ผ์šฐ์ € ๋ฐ ๋ฒ„์ „ : _ํฌ๋กฌ 74.0.3729.157_
  • OS ๋ฐ ๋ฒ„์ „ : _MacOS ๋ชจํ•˜๋น„ 10.14.4_
๐Ÿ•ท Bug

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

@ivanpopelyshev ๋‹น์‹ ์€ ์ด๋ฏธ ์ด๊ฒƒ์„ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ? ๊ทธ๋ ‡์ง€ ์•Š์€ ๊ฒฝ์šฐ PR์„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  3 ๋Œ“๊ธ€

์•Œ๋ ค์ง„ ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค. ๊ธฐํ•˜ํ•™์  ๊ตฌ์กฐ๋Š” ์ˆ˜์ •ํ–ˆ์ง€๋งŒ ํ…์Šค์ฒ˜์™€ ์…ฐ์ด๋”๋Š” ์ˆ˜์ •ํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. :) ๊ทธ๊ฒƒ์ด ๋‹น์‹ ์—๊ฒŒ ์–ผ๋งˆ๋‚˜ ์ค‘์š”ํ•œ์ง€, ํ•œ ๋‹ฌ ํ›„์— ์•ฑ์— ํ†ตํ•ฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ž…๋‹ˆ๊นŒ, ์•„๋‹ˆ๋ฉด ์ด๋ฒˆ ์ฃผ์— ํ•„์š”ํ•ฉ๋‹ˆ๊นŒ?

์ข‹์€. ํ•œ ๋‹ฌ ์ •๋„ ๊ธฐ๋‹ค๋ ค๋„ ๊ดœ์ฐฎ์„ ๊ฒƒ ๊ฐ™์•„์š”.

@ivanpopelyshev ๋‹น์‹ ์€ ์ด๋ฏธ ์ด๊ฒƒ์„ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ? ๊ทธ๋ ‡์ง€ ์•Š์€ ๊ฒฝ์šฐ PR์„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰