webgl game engine

WebGL(Web Graphics Library)은 플러그인을 사용하지 않고 웹 브라우저에서 상호작용 가능한 3D와 2D 그래픽을 표현하기 위한 JavaScript API입니다. WebGL은 HTML5 canvas 요소에서 사용할 수 있는, OpenGL ES 2.0을 대부분 충족하는 API를 제공합니다.

WebGL은 웹 기반의 그래픽 라이브러리이다. 자바스크립트 프로그래밍 언어를 통해서 사용할 수 있으며 호환성이 있는 웹 브라우저에서 인터랙티브한 3D 그래픽을 사용할 수 있도록 제공된다.

도움이되는 자바스크립트 라이브러리
  • html5gameengine

  • WebGL

    개발자가 작접 webgl 코드구현을 할 경우 배우기도 어렵고 실제 구현도 복잡하고 어려워 간단한 코드만으로 webgl 구현이 가능한 라이브러리 기술이 나옴. 단순 모델 뷰어에서 자바스크립트로 3D게임제작까지 가능한 라이브러리들이 나옴.

  • Three Js
  • Babylon Js우리의 임무는 세계에서 가장 강력하고 아름답고 단순하며 개방적인 웹 렌더링 엔진 중 하나를 구축하는 것
  • Play Canvas웹 퍼스트 게임 엔진, 멋진 HTML5 게임 및 시각화를 공동으로 구축
  • Aframe 3D/AR/VR 경험 구축을 위한 웹 프레임워크 HTML 및 Entity-Component로 3D 세계 만들기. 모든 헤드셋, 모바일 및 데스크탑
  • Clay GL ClayGL은 확장 가능한 Web3D 애플리케이션을 구축하기 위한 WebGL 그래픽 라이브러리입니다.
  • Turbulenz Engine Turbulenz는 몰입형 3D 효과와 실시간 물리학을 통해 전례 없는 놀라운 웹 콘텐츠의 완전히 새로운 세계를 여는 고품질 게임을 구축, 게시, 반복 및 수익화할 수 있는 기능을 제공합니다.
  • pixijs HTML5 생성 ​​엔진: 가장 빠르고 유연한 2D WebGL 렌더러로 아름다운 디지털 콘텐츠를 생성합니다.
  • Cesium JsCesiumJS는 가능한 최고의 성능, 정밀도, 시각적 품질 및 사용 편의성을 갖춘 세계적 수준의 3D 지구본 및 지도를 만들기 위한 오픈 소스 JavaScript 라이브러리입니다.
  • Deck GLdeck.gl은 대규모 데이터 세트의 시각적 탐색 데이터 분석을 위한 WebGL 기반 프레임워크입니다.
  • D3 Js맞춤형 데이터 시각화 위한 자바스크립트 라이브러리 비교할 수 없는 유연성으로 맞춤형 동적 시각화 생성
  • Whitestorm JsWhitestormJS 는 Three.js 기술로 구축된 3D 웹 앱용 프레임워크입니다.물리를 이용한 3D 장면의 빠른 개발을 위한 구성 요소 시스템 및 플러그인 지원으로 코어를 구현합니다.
  • Cannon Js 웹을 위한 가볍고 간단한 3D 물리 엔진. three.js 및 ammo.js 에서 영감을 받아 웹에 물리 엔진이 없다는 사실에 힘입어 cannon.js 가 등장합니다 .
  • filament
  • philogl
  • picogl

  • X3D/VRML -> X3D4

    (https://www.web3d.org/)

    플러그인 없이 X3D/VRML 모델을 웹페이지에 3D로 표시할수 있는 라이브러리. X3D/VRML은 웹에서 대화형 3D 모델을 게시, 보기, 인쇄 및 보관하기 위한 로열티 없는 공개 표준입니다.

  • x3dom X3D 장면을 HTML5/DOM 요소로 통합하고 조작하기 위한 프레임워크입니다. X3D Script를 제외하고 HTML의 자바스크립트로 접근.
  • X_ITE HTML5에서 X3D/VRML 콘텐츠를 표시하여 콘텐츠를 3D로 표시할 수 있습니다

  • Canvas

  • P5 Jsp5.js는 크리에이티브 코딩을 위한 자바스크립트 라이브러리로, 예술가, 디자이너, 교육자, 입문자, 그리고 모두에게 접근성 높고 포용적인 언어를 지향합니다!
  • ZDog 캔버스 및 SVG를 위한 원형, 평면, 디자이너 친화적 유사 3D 엔진

    glTF(GL Transmission Format) https://d2.naver.com/helloworld/6152907

    3D 모델을 WebGL을 통해 렌더링하려면 canvas 태그를 사용하여 WebGL 컨텍스트를 받아와 렌더링하는 코드를 직접 작성할 필요가 있으며, 3D 모델 파일(glTF, FBX, OBJ 등) 또한 일종의 인코딩된 형태이기 때문에 실제 사용할 데이터를 받아오려면 파일을 로드하여 디코딩하는 과정을 거쳐야 한다. 이 과정은 Three.js나 Babylon.js와 같이 각종 3D 형식의 로드 및 디코딩을 지원하는 라이브러리를 사용하거나, View3D와 같은 3D 뷰어 컴포넌트를 활용하면 단순화할 수 있다.