250x250
Rainbow๐ŸŒˆCoder
My dev Note๐Ÿ“’
Rainbow๐ŸŒˆCoder
์ „์ฒด ๋ฐฉ๋ฌธ์ž
์˜ค๋Š˜
์–ด์ œ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (411)
    • ๊ณต์ง€์‚ฌํ•ญ (0)
    • Debugger (10)
      • Visual Studio Debugger (1)
      • Chrome DevTools (3)
      • Visual Studio Code Debugger (4)
      • eclipse (1)
      • intelliJ (1)
    • OOP (2)
      • OOP (2)
    • TypeScript (54)
      • ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ TypeScript (54)
    • Javascript (87)
      • Javascript (45)
      • Node.js (19)
      • React (5)
      • FE ๊ฐœ๋ฐœํ™˜๊ฒฝ์„ค์ • (3)
      • React์™€ Node ๊ฐ™์ด ๋•Œ๋ ค์žก๊ธฐ (6)
      • next.js (2)
      • pixi.js (7)
    • ๋งˆํฌ์—… (23)
      • Html & Css (23)
    • C# (80)
      • C# (12)
      • ์ด๊ฒƒ์ด C#์ด๋‹ค (68)
    • C++ (30)
      • c++ (27)
      • win api (3)
    • Unity (18)
      • Unity(๊ธฐ์ดˆ) (8)
      • Unity(C#์ค‘๊ธ‰) (5)
      • ์œ ๋‹ˆํ‹ฐ ํฌํ†ค(๋„คํŠธ์›Œํฌ) (4)
      • unity c# MyCode (1)
    • Java & Spring (29)
      • Java (11)
      • ์Šคํ”„๋ง (8)
      • Java Algorithm (9)
      • Javs Data Structures (1)
    • ์ž๋ฃŒ๊ตฌ์กฐ์™€ ์•Œ๊ณ ๋ฆฌ์ฆ˜ (15)
      • ์ž๋ฃŒ๊ตฌ์กฐ (5)
      • ์•Œ๊ณ ๋ฆฌ์ฆ˜ (10)
    • ํ˜•์ƒ๊ด€๋ฆฌ (15)
      • Git (11)
      • ์†Œ์ŠคํŠธ๋ฆฌ (3)
    • ๊ทธ๋ž˜ํ”ฝ์Šค (7)
      • WebGl (7)
    • AWS (3)
      • aws (3)
    • ๋ฆฌ๋ˆ…์Šค (5)
      • ๋ฆฌ๋ˆ…์Šค (5)
    • ์ฑ… ๋ฆฌ๋ทฐ (13)
      • ํด๋ฆฐ์ฝ”๋“œ(์ฑ…๋ฆฌ๋ทฐ) (3)
      • ์œ ์ง€๋ณด์ˆ˜๊ฐ€๋Šฅํ•œ์ฝ”๋”ฉ์˜๊ธฐ์ˆ C#ํŽธ(์ฑ…๋ฆฌ๋ทฐ) (1)
      • ๋ฆฌํŒฉํ† ๋ง(์ž๋ฐ”์Šคํฌ๋ฆฝํŠธํŒ) (9)
    • Server (2)
      • ๊ฒŒ์ž„ ์„œ๋ฒ„(๋„คํŠธ์›Œํฌ, ๋ฉ€ํ‹ฐ์“ฐ๋ ˆ๋“œ,OS) (2)
    • ์„ค๊ณ„, ์•„ํ‚คํ…์ณ (4)
    • ํŒŒ์ด์ฌ (5)
    • ๋””์ž์ธํŒจํ„ด (2)
    • mocha (2)
    • Jest (1)
    • Spine (1)
    • ์ธ๊ณต์ง€๋Šฅ (1)
      • ํ˜ผ์ž๊ณต๋ถ€ํ•˜๋Š”๋จธ์‹ ๋Ÿฌ๋‹+๋”ฅ๋Ÿฌ๋‹ (1)

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • ํ™ˆ
  • ํƒœ๊ทธ
  • ๋ฐฉ๋ช…๋ก

๊ณต์ง€์‚ฌํ•ญ

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • ใ…ฃใ„ท
  • ์œ„์ž„
  • ์ปดํฌ์ง€์…˜
  • MySQL

์ตœ๊ทผ ๋Œ“๊ธ€

์ตœ๊ทผ ๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌ

hELLO ยท Designed By ์ •์ƒ์šฐ.
Rainbow๐ŸŒˆCoder

My dev Note๐Ÿ“’

๊ทธ๋ž˜ํ”ฝ์Šค/WebGl

WebGL์ด๋ž€, three.js๋ž€, pixi.js๋ž€

2022. 5. 1. 19:56
728x90

WebGL์ด๋ž€ ๋ฌด์—‡์ธ๊ฐ€(+ HTML Canvas, WebGL ๊ธฐ์ดˆ) (tistory.com)

 

WebGL์ด๋ž€ ๋ฌด์—‡์ธ๊ฐ€(+ HTML Canvas, WebGL ๊ธฐ์ดˆ)

 ์ด ๊ธ€์— ๋“ค์–ด๊ฐ€๊ธฐ ์•ž์„œ, ํ˜น์‹œ ํ™”๋ คํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜๋งŒ ๋ณด๊ณ  ํฅ๋ฏธ๋ฅผ ๊ฐ€์กŒ๋‹ค๋ฉด, ํ•œ ๊ฐ€์ง€๋ฅผ ๋” ์ƒ๊ฐํ•˜๋ฉด ์ข‹์„ ๊ฑฐ ๊ฐ™๋‹ค. ์˜ˆ์ƒํ–ˆ๊ฒ ์ง€๋งŒ ์ˆ˜ํ•™์ด๋‹ค. ๊ฒฐ๊ตญ 3D ๊ทธ๋ž˜ํ”ฝ์€ ์„ธ ๊ฐœ์˜ ์ขŒํ‘œ๋ฅผ ์„ ์œผ๋กœ ์—ฐ๊ฒฐํ•ด์„œ ์ž…

code-masterjung.tistory.com

WEB GL์€ ์›น์ƒ์—์„œ ๊ทธ๋ž˜ํ”ฝ์„ ํ‘œํ˜„ํ•  ๋•Œ ์“ฐ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์–ธ์–ด๋กœ ์“ฐ์ด๋ฉฐ 2D์™€ 3D ๊ทธ๋ž˜ํ”ฝ์„ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค. 

WEB GL์€ GPU๋ฅผ ์ด์šฉํ•ด์„œ ๊ทธ๋ฆผ์„ ๊ทธ๋ฆฌ๊ธฐ ๋•Œ๋ฌธ์— ์„ฑ๋Šฅ๋ฉด์—์„œ ์œ ๋ฆฌํ•จ์ด ์žˆ๋‹ค. 

ํŠนํžˆ ์›น์ƒ์—์„œ 3D๋กœ ๊ทธ๋ ค์ง€๋Š” ๊ฒƒ๋“ค์€ WEB GL๋กœ ๊ทธ๋ ค์กŒ๋‹ค๊ณ  ๋ด๋„ ๋ฌด๋ฐฉํ•œ๋ฐ,

WEB GL API๋“ค ์ž์ฒด๊ฐ€ ๋กœ์šฐ๋ ˆ๋ฒจ์ด๋ผ์„œ(๊ฐœ๋ฐœ์‹œ, ๋ฐ”๋‹ฅ๋ถ€ํ„ฐ ๊ตฌํ˜„ํ•ด์•ผํ•จ) ์ž‘์€ ๋„ํ˜• ํ•˜๋‚˜๋ฅผ ๊ทธ๋ฆฌ๋ ค๊ณ  ํ•ด๋„ ๊ฝค๋‚˜ ๋งŽ์€ ์ฝ”๋“œ๊ฐ€ ์ž‘์„ฑ๋˜์–ด์•ผ ํ•œ๋‹ค. (์ƒ์‚ฐ์„ฑ ์ธก๋ฉด์—์„œ ๋‹จ์  ์กด์žฌ)

 

three.js๋Š” ์ด๋Ÿฌํ•œ WEB GL์„ ์‰ฝ๊ณ  ๊ฐ„ํŽธํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค.

์œ„ํ‚ค๋ฐฑ๊ณผ Three.js๋Š” ์›น ๋ธŒ๋ผ์šฐ์ €์—์„œ 3์ฐจ์› ์ปดํ“จํ„ฐ ๊ทธ๋ž˜ํ”ฝ์Šค ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‘์šฉ์„ ๋งŒ๋“ค๊ณ  ํ‘œํ˜„ํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋˜๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด์ž API์ด๋‹ค. ์˜คํ”ˆ ์†Œ์Šค ํ”„๋กœ์ ํŠธ๋กœ ๊นƒํ—ˆ๋ธŒ์—์„œ ๊ณต๊ฐœ๋˜์–ด ์žˆ๋‹ค. 

3D ๋ชจ๋ธ๋ง ์‚ฌ์ดํŠธ๋“ค์€ ํฐ ์šฉ๋Ÿ‰์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๋กœ๋“œํ•˜๋‹ค ๋ณด๋‹ˆ, ๋Œ€์ฒด๋กœ ๋กœ๋”ฉ ์‹œ๊ฐ„์ด ํ•„์š”ํ•˜๋‹ค. 3์ฐจ์› ๊ทธ๋ž˜ํ”ฝ์„ ์›น์ƒ์— ํ‘œํ˜„ํ•ด์ค„ ๋•Œ WEB GL three.js๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.

 

 

pixi.js๋Š” PixiJS๋Š” ์›น์šฉ 2D ๊ทธ๋ž˜ํ”ฝ ๋ Œ๋”๋ง ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ. ์บ”๋ฒ„์Šค API์™€ webgl API๋ฅผ ์›๋ž˜ FlashAPI๋กœ ๋Œ€๋žต ๋ชจ๋ธ๋งํ•œ ๊ฐ„๋‹จํ•œ ์žฅ๋ฉด์„ ๊ทธ๋ž˜ํ”„๋กœ ์ •๊ทœํ™”ํ•˜๊ธฐ ์œ„ํ•ด MattGroves์— ์˜ํ•ด ๋งŒ๋“ค์–ด์กŒ๋‹ค. ๊ทธ ์ฃผ์š” ์ดˆ์ ์€ ํ•ญ์ƒ ์„ฑ๋Šฅ์— ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋งค์šฐ ๋น ๋ฅด๋‹ค. ์ฃผ๋กœ canvas2d ํด๋ฐฑ์ด์žˆ๋Š” webGL ๋ Œ๋”๋ง ํ‘œ๋ฉด์ด๋‹ค

PixiJS ๊ณต์‹ ์›น์‚ฌ์ดํŠธ: http://www.pixijs.com

PixiJS is a 2D Graphics Rendering library for the web.  It was created by Matt Groves to normalize the canvas and webgl APIs into a simple scene graph originally modeled loosely on the Flash API.  Its primary focus has always been on performance so that it is really fast.  Because of this it is primarily a webGL rendering surface with canvas 2d fallback. Official PixiJS Website: 

728x90

'๊ทธ๋ž˜ํ”ฝ์Šค > WebGl' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[Spine][pixiJs] Api ์‚ฌ์ดํŠธ  (0) 2022.05.11
[2D WebGL][pixi.Js] ์„ธ๋ถ€์‚ฌํ•ญ  (0) 2022.05.10
[2D WebGL][pixiJS] Getting Started!  (0) 2022.05.09
[2D WebGL][pixiJS] Architecture Overview  (0) 2022.05.09
[3D WebGL][three.js] three.js ํ”„๋กœ์ ํŠธ ์‹œ์ž‘ํ•ด๋ณด๊ธฐ  (0) 2022.05.09
    '๊ทธ๋ž˜ํ”ฝ์Šค/WebGl' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
    • [2D WebGL][pixi.Js] ์„ธ๋ถ€์‚ฌํ•ญ
    • [2D WebGL][pixiJS] Getting Started!
    • [2D WebGL][pixiJS] Architecture Overview
    • [3D WebGL][three.js] three.js ํ”„๋กœ์ ํŠธ ์‹œ์ž‘ํ•ด๋ณด๊ธฐ
    Rainbow๐ŸŒˆCoder
    Rainbow๐ŸŒˆCoder
    ๋ชฐ๋ผ๋„ ๊ฒฐ๊ตญ์€ ์•„๋Š” ๊ฐœ๋ฐœ์ž, ๊ทธ๋Ÿฐ ์‚ฌ๋žŒ์ด ๋˜๊ธฐ ์œ„ํ•œ ๋งค์ผ์˜ ํ•œ๊ฑธ์Œ

    ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”