3.js, React 및 WebGL로 게임 구축

코어 포인트

게임 개발에서 3D 장면을 드라이브하기 위해 React를 사용하면 게임 논리에서 렌더링하는 장면 분리, 이해하기 쉬운 구성 요소, 게임 리소스의 실시간 재 장전 및 기본 브라우저 도구를 사용하는 기능 3D 장면은 마커로 점검하고 디버그합니다.

R3R (React-Three-Renderer)은 3.js를 캡슐화하고 게임 로직에서 뷰 코드를 분리 할 수있는 선언적 API를 제공하며 작고 이해하기 쉬운 구성 요소를 생성합니다.

게임 엔진이 성장함에 따라 REDICER 모드를 사용하여 게임 로직을 별도의 기능으로 구성하는 것이 중요합니다. 이 모드를 사용하면 깨끗하고 선명한 게임 루프를 생성하고 게임 루프에 더 많은 논리를 추가 할 수 있습니다.
• 배수 및 성능 고려 사항은 3.js, React 및 WebGL을 사용하여 게임을 구축하는 데 독특합니다. Chrome Devtools의 타임 라인 기능을 사용하면 성능을 디버깅하는 데 매우 중요하며 React의 재 렌즈 수를 최소화하는 것과 같은 전략을 구현하면 성능을 최적화하는 데 도움이 될 수 있습니다.
• 나는 "카멜레온 매름"이라는 게임을 만들고 있습니다. 3.js, React 및 WebGL을 사용하여 구축되었습니다. 이 기사에서는 이러한 기술이 REACT-THREE RENDERER (R3R로 약칭)를 사용하여 어떻게 협력하는지 설명합니다.
React and WebGL에 대한 소개를 위해 Sitepoint에 대한 WebGL Getting 시작 가이드와 React 및 JSX Getting Guide를 확인하십시오. 이 기사와 함께 제공되는 코드는 ES6 구문을 사용합니다.
모든 것의 시작 얼마 전, Pete Hunt는 #ReaCTJS IRC 채널에서 농담을하면서 React를 사용하여 게임을 만들겠다고 말했습니다.

나는 우리가 반응으로 1 인칭 슈터를 만들 수 있다고 확신합니다! 적에게는 가 있습니다

등. 나는 웃었다. 그는 웃었다. 모두가 즐거운 시간을 보냈습니다. "세계에서 누가이 일을했을까요?"

몇 년 후, 나는 이것을 정확하게했다.

카멜레온 매력은 강화 된 소품을 수집하여 무한 프랙탈 미로를 해결하기 위해 좁힐 수있는 게임입니다. 나는 몇 년 동안 React 개발자로 일해 왔으며 React를 사용하여 Three.Js를 사용하는 방법이 있는지 궁금합니다. 현재 R3R은 내 관심을 끌었습니다.

왜 React를 선택합니까? 나는 당신이 무엇을 생각하고 있는지 알고 있습니다 : 왜? 설명하겠습니다. 반응을 사용하여 3D 장면을 드라이브하는 고려해야 할 몇 가지 이유는 다음과 같습니다.

"선언적"보기를 사용하면 장면 렌더링이 게임 로직에서 명확하게 분리 할 수 ​​있습니다.
• 디자인 , , 등과 같은 이해하기 쉬운 구성 요소.
"핫"(실시간) 게임 리소스 재 장전. 텍스처와 모델을 변경하고 장면에서 실시간으로 업데이트를 확인하십시오!
• Chrome Inspector와 같은 기본 브라우저 도구를 사용하여 3D 장면을 태그로 확인하고 디버그하십시오. <player></player> WebPack을 사용하여 종속성 그래프에서 게임 자원을 관리합니다 <wall></wall> 이 모든 것이 어떻게 작동하는지 확인하기 위해 시나리오를 설정하겠습니다. <level></level>
반응 및 webgl
• 나는이 기사를 사용하기 위해 샘플 Github 리포지토리를 만들었습니다. 저장소를 복제하고 ReadMe에서와 같이 코드를 실행하고 계속 학습하십시오. 그것은 주인공으로 SitePointy 3D 로봇을 특징으로합니다!
• 경고 : R3R은 여전히 ​​테스트 단계에 있습니다. API는 불안정하고 향후 변할 수 있습니다. 현재 3.js의 하위 집합 만 처리합니다. 완전한 게임을 만들기에 충분히 완료되었지만 결과는 다를 수 있습니다. <texture require="" src="%7B"></texture> 조직 뷰 코드 REACT를 사용하여 Drive WebGL을 사용하는 주요 이점은 뷰 코드가 게임 논리에서 분리된다는 것입니다. 이것은 우리가 렌더링하는 엔티티가 작고 이해하기 쉽다는 것을 의미합니다.
R3R은 3.js를 캡슐화하는 선언적 API를 노출시킵니다. 예를 들어, 우리는 다음을 쓸 수 있습니다

이제 카메라가있는 빈 3D 장면이 있습니다. 장면에 메쉬를 추가하는 것은

구성 요소를 포함하고

를 제공하는 것만 큼 간단합니다.

무대 뒤에서, 이것은 세 가지를 생성하고 3.boxgeometry로 그리드를 자동으로 추가합니다. R3R은 오래된 장면과 변경의 차이점을 처리합니다. 장면에 새 메쉬를 추가하면 원래 메쉬가 재현되지 않습니다. 정상 React 및 DOM을 사용하는 것처럼 3D 장면은 차이점 만 업데이트합니다. 우리는 React에서 작업하기 때문에 게임 엔티티를 구성 요소 파일로 분리 할 수 ​​있습니다. 샘플 리포지토리의 robot.js 파일은 Pure React View 코드를 사용하여 주요 역할을 나타내는 방법을 보여줍니다. "상태 부족 함수"구성 요소이므로 로컬 상태를 저장하지 않습니다.

이제 우리는 3D 장면에

를 포함시킬 것입니다!

R3R Github 저장소에서 더 많은 API 예제를 보거나 포함 된 프로젝트의 전체 샘플 설정을 볼 수 있습니다. 게임 논리 정리 방정식의 나머지 절반은 게임 논리를 다루는 것입니다. 로봇 itepointy에 간단한 애니메이션을 추가합시다.

전통적인 게임 루프는 어떻게 작동합니까? 그들은 사용자의 입력을 받아들이고, 오래된 "세계 국가"를 분석하고, 렌더링을 위해 새로운 세계 상태로 돌아갑니다. 편의를 위해 "게임 상태"객체를 구성 요소 상태에 저장합시다. 보다 성숙한 프로젝트에서는 게임 상태를 Redux 또는 Flux Storage로 옮길 수 있습니다.

우리는 브라우저의

requestAnimationFrame 전화 GameContainer.js는 자식 구성 요소의 재 렌즈를 트리거하고 3D 장면을 업데이트합니다. 컨테이너 구성 요소에서 데모 구성 요소로 상태를 전달합니다. requestAnimationFrame 우리는이 코드를 구성하는 데 도움이되는 유용한 패턴을 적용 할 수 있습니다. 로봇 위치를 업데이트하는 것은 간단한 시간 기반 계산입니다. 앞으로는 이전 게임 상태의 이전 로봇 위치를 고려할 수도 있습니다. 일부 데이터를 받아들이고, 처리하고, 새 데이터를 반환하는 함수를 종종 reture라고합니다. 움직이는 코드를 감속기 기능으로 추상화 할 수 있습니다!

이제 기능 호출 만 포함하는 간결하고 명확한 게임 루프를 쓸 수 있습니다.

<code><scene>></scene>
  <perspectivecamera>    position={ new THREE.Vector3( 1, 1, 1 )
  />
>
</perspectivecamera></code>

물리학 처리와 같은 게임 루프에 더 많은 논리를 추가하려면 다른 감속기 기능을 만들어 이전 리소셔의 결과로 전달하십시오.

게임 엔진의 성장으로서 게임 논리를 별도의 기능으로 구성하는 것이 중요합니다. Reducer 모드를 사용 하여이 조직은 매우 간단합니다. setState() 자원 관리 <game></game> 이것은 여전히 ​​R3R의 개발 영역입니다. 텍스처의 경우 JSX 태그에서 URL 속성을 지정할 수 있습니다. 웹 팩을 사용하면 로컬 이미지 경로를 요청할 수 있습니다.

이 설정을 사용하면 디스크의 이미지를 변경하면 3D 장면이 실시간으로 업데이트됩니다! 빠른 반복 게임 디자인 및 컨텐츠에는 매우 중요합니다.

<code><scene>></scene>
  …
  <mesh>></mesh>
    <boxgeometry></boxgeometry>      width={ 1 }
      height={ 1 }
      depth={ 1 }
    />
    <meshbasicmaterial></meshbasicmaterial>      color={ 0x00ff00 }
    />
>
</code>

다른 리소스 (예 : 3D 모델)의 경우 디버그

R3R은 Chrome 및 Firefox 용 React Developer 도구 확장을 지원합니다. 일반적인 dom을 확인하는 것처럼 장면을 확인할 수 있습니다! 검사관의 요소 위에 호버링하면 장면에 경계 상자가 표시됩니다. 또한 텍스처 정의 위로 마우스를 가져 가면 장면의 어떤 객체 가이 텍스처를 사용하는지 확인할 수 있습니다.

<code>const Robot = ({ position, rotation }) => <group></group>  position={ position }
  rotation={ rotation }
>
  <mesh> rotation={ localRotation }></mesh>
    <geometryresource></geometryresource>      resourceId="robotGeometry"
    />
    <materialresource></materialresource>      resourceId="robotTexture"
    />
  >
>;
</code>

응용 프로그램 디버깅에 도움이되도록 React-Three-Renderer Gitter Chat Room에 참여할 수도 있습니다.

성능 예방 조치

카멜레온 매력을 구축 할 때이 워크 플로우에 고유 한 성능 문제가 발생했습니다.

나는 최대 30 초의 핫 재 장전 시간에 웹 팩을 사용합니다! 이는 각 과부하가 패키지에 큰 리소스를 작성해야하기 때문입니다. 솔루션은 WebPack의 DLLPlugin을 구현하여 재 장전 시간을 5 초 미만으로 줄입니다.

이상적으로는 장면이 렌더링 프레임 당 한 번만 호출되어야합니다. 내 게임을 분석 한 후 React 자체가 주요 병목 현상입니다. 프레임마다 를 여러 번 호출하면 이중 렌더링 및 성능 저하가 발생합니다.

특정 수의 객체를 초과 한 후 R3R의 성능은 일반 3.js 코드보다 나쁩니다. 나에게는 약 1000 개의 물체입니다. 예제의 "벤치 마크"에서 R3R을 3.js와 비교할 수 있습니다.

• Chrome Devtools의 타임 라인 기능은 성능을 디버깅하기위한 훌륭한 도구입니다. 게임 루프를 쉽고 직관적으로 확인할 수 있으며 DevTools의 "프로필"기능보다 읽기가 더 쉽습니다.
그게 다야!
• 이 설정으로 할 수있는 일을 배우려면 카멜레온 매력을 확인하십시오. 이 도구 체인은 여전히 ​​젊지 만 R3R의 React를 사용하는 것이 내 WebGL 게임 코드를 명확하게 구성하는 데 중요하다는 것을 알았습니다. 작지만 성장하는 R3R 샘플 페이지를 확인하여 잘 조직 된 코드 예제를 확인할 수도 있습니다. setState() 이 기사는 Mark Brown과 Kev Zettler가 동료 검토했습니다. Sitepoint 컨텐츠를 최대한 활용 한 Sitepoint의 모든 동료 검토 자에게 감사합니다! setState() faq reactjs 및 webgl Reactjs 및 WebGL을 가진 게임을 구축하기위한 전제 조건은 무엇입니까?
REACTJS 및 WEBGL로 게임 구축을 시작하려면 JavaScript, HTML 및 CSS에 대한 기본적인 이해가 필요합니다. 또한 Reactjs (사용자 인터페이스 구축을위한 인기있는 JavaScript 라이브러리)를 알아야합니다. 또한 대화식 3D 및 2D 그래픽을 렌더링하기위한 JavaScript API 인 WebGL (Web Graphics Library)을 이해하는 것이 중요합니다. 또한 ES6 구문, NPM (Node Package Manager) 및 명령 줄에 익숙해지면 큰 이점이 있습니다.
• Unity를 Reactjs와 통합하는 방법은 무엇입니까?
Unity는 React-Unity-Webgl 패키지를 사용하여 Reactjs와 통합 될 수 있습니다. 이 패키지를 사용하면 Unity WebGL 빌드를 ReactJS 응용 프로그램에 포함시킬 수 있습니다. NPM을 사용하여 설치하여 프로젝트로 가져올 수 있습니다. 그런 다음 패키지에서 제공 한 Unity 구성 요소를 사용하여 Unity 게임을 ReactJS 응용 프로그램에 포함시킬 수 있습니다.

React를 사용하여 3D 응용 프로그램을 만드는 다른 방법은 무엇입니까?

React를 사용하여 3D 응용 프로그램을 만드는 방법에는 여러 가지가 있습니다. 가장 인기있는 방법 중 하나는 애니메이션 3D 컴퓨터 그래픽을 작성하고 표시하기위한 크로스 브라우저 JavaScript 라이브러리 인 Three.JS를 사용하는 것입니다. 또 다른 방법은 WebGL을 직접 사용하는 것이지만 더 복잡 할 수 있습니다. React-Three Fiber 및 React-Unity-WebGL과 같은 다른 라이브러리를 사용하여 React를 사용하여 3D 응용 프로그램을 생성 할 수 있습니다.

WebGL을 사용하여 대화식 3D 그래픽을 만드는 방법은 무엇입니까?

WebGL을 사용하면 플러그인없이 브라우저에서 직접 대화식 3D 그래픽을 만들 수 있습니다. WebGL의 API를 사용하여 복잡한 3D 그래픽, 애니메이션 및 게임을 만들 수 있습니다. 그러나 WebGL의 API는 낮은 수준이며 직접 사용하기가 복잡 할 수 있습니다. 따라서 많은 개발자들은 WebGL에 대한 더 높은 수준의 인터페이스를 제공하는 3.js와 같은 라이브러리를 사용하는 것을 선호합니다.

게임 개발에서 React-Unity-Webgl의 역할은 무엇입니까?

react-unity-webgl 패키지를 사용하면 Unity WebGL 빌드를 Reactjs 응용 프로그램에 포함시킬 수 있습니다. 즉, Unity를 사용하여 복잡한 3D 게임을 작성한 다음 ReactJS 응용 프로그램에 쉽게 통합 할 수 있습니다. 웹 기반 게임 또는 대화식 3D 애플리케이션을 만들려면 특히 유용합니다.

성능을 위해 Reactjs 및 WebGL 게임을 최적화하는 방법은 무엇입니까?

Reactjs 및 WebGL로 구축 된 게임 최적화에는 여러 전략이 포함될 수 있습니다. 이러한 전략에는 부드러운 애니메이션을 달성하기 위해 WebGL의 내장 성능 기능을 사용하고 웹 용 3D 모델 및 텍스처를 최적화하는 RECT의 재주문 수를 최소화하는 것이 포함됩니다.

reactjs 및 webgl을 사용하여 모바일 게임을 구축 할 수 있습니까?

예, Reactjs 및 WebGL을 사용하여 모바일 장치의 웹 브라우저에서 실행되는 게임을 구축 할 수 있습니다. 그러나 기본 모바일 게임의 경우 iOS 및 Android로 직접 내보낼 수있는 Unity 또는 Unreal Engine과 같은 게임 개발 플랫폼을 사용하는 것을 고려할 수 있습니다.

REACTJ 및 WebGL 게임에서 사용자 입력을 처리하는 방법은 무엇입니까?

> 사용자 입력은 표준 JavaScript 이벤트 처리기를 사용하여 ReactJS 및 WebGL 게임에서 처리 할 수 ​​있습니다. 키보드, 마우스 및 터치 이벤트를 듣고 그에 따라 게임 상태를 업데이트 할 수 있습니다. Reactjs는 또한 다른 브라우저에서 사용자 입력을 일관된 방식으로 처리하는 데 사용할 수있는 합성 이벤트를 제공합니다.

reactjs 및 webgl과 함께 다른 JavaScript 라이브러리를 사용할 수 있습니까?

예, Reactjs 및 WebGL과 함께 다른 JavaScript 라이브러리를 사용할 수 있습니다. 예를 들어, 3D 그래픽에는 3.js, 오디오 용 Howler.js 또는 물리적 처리에는 Matter.js를 사용할 수 있습니다. 핵심은 이러한 라이브러리가 게임에서 완벽하게 작동하는지 확인하는 것입니다. requestAnimationFrame REACTJS 및 WEBGL 게임을 디버그하는 방법은 무엇입니까?

reactjs 및 webgl을 사용하여 구축 된 게임은 웹 브라우저에서 개발자 도구를 사용하여 디버깅 할 수 있습니다. 이 도구를 사용하면 HTML, CSS 및 JavaScript 코드를 확인하고 콘솔 로그를보고 코드를 단계별로 디버깅 할 수 있습니다. 또한 React Developer Tools는 반응 구성 요소 계층, 소품 및 상태를 확인할 수있는 브라우저 확장자입니다.

위 내용은 3.js, React 및 WebGL로 게임 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!