웹에서 시작하기

이 페이지에서는 웹 브라우저에서 실행할 프로젝트를 개발하기 위해 알아야 할 모든 사항을 설명합니다.

이 릴리스에서 수행할 수 있는 작업은 다음과 같습니다.

다음 작업은 아직 수행할 수 없습니다.

또한 프로젝트가 브라우저에서 실행되는 동안 음영처리 환경에서 제공되는 일부 렌더링 설정을 아직 사용할 수 없다는 것을 알 수 있을 것입니다. Autodesk는 이러한 고품질 효과가 WebGL에서 더 많이 작동하도록 하기 위해 계속 노력하는 중입니다.

단계 1: 지원되는 브라우저 설치

Stingray Web에는 현재 다음에서 지원하는 WebAssembly 및 WebGL 2.0이 모두 필요합니다.

단계 2: 웹 브라우저에서 프로젝트 실행

Stingray Editor에서 브라우저를 통해 프로젝트를 실행하려면 Connections 패널을 통해 사용하려는 각 브라우저에 대해 새 웹 대상을 설정합니다. Connections 패널 사용을 참조하십시오.

  1. Connections 패널(Window > Deploy and Connect > Connections)에서 연결을 식별할 이름을 지정합니다.

  2. Platform 옵션을 Web으로 설정합니다.

  3. Browser Path는 기본 웹 브라우저의 .exe 파일을 가리킵니다. 기본 웹 브라우저가 지원되는 웹 브라우저(위 목록 참조)가 아닌 경우 파일 시스템을 탐색하여 사용할 지원되는 웹 브라우저의 .exe를 선택해야 합니다.

  4. Command Line은 비워 둡니다. 웹 연결의 경우 이 항목은 URL 검색 문자열에서 실행된 HTML 페이지에 전달되는 추가 매개변수를 정의합니다. 이 명령행 매개변수는 GET 매개변수로 URL에 전달되고, 그러면 엔진이 이 매개변수를 읽고 모든 플랫폼과 동일하게 취급됩니다. HTML 페이지를 사용자 정의하려면 여기에 매개변수를 입력하십시오. 웹 페이지 컨텍스트에서 이해되지 않는 매개변수는 의도한 결과를 산출하지 못할 수 있습니다.

  5. Connections 패널 또는 뷰포트 도구 모음에서 Run Project 버튼을 누릅니다.

프로젝트가 브라우저에서 올바르게 실행되는 경우는 다음과 같습니다.

단계 3: 디스크에 프로젝트 배포

프로젝트를 디스크에 배포하여 웹 서버에서 호스팅할 수 있도록 준비하려면 Deployer 패널을 사용합니다. HTML5 아이콘이 있는 탭으로 이동하여 요청한 필드를 설정하고 Package Project for Web을 클릭합니다.

Deployer 패널 사용도 참조하십시오.

웹 프로젝트 출력 정보

Stingray Editor에서 프로젝트를 실행하는지 또는 디스크에 배포하는지에 관계없이 동일한 엔진 바이너리가 두 작업에 사용됩니다. 그러나 배포의 경우 다른 플랫폼과 마찬가지로 프로젝트 데이터가 추가로 번들됩니다. 배포 후 Deployer 패널에 지정된 최종 배포 폴더를 살펴보면 다음을 찾을 수 있습니다.

실행 프로세스 정보

Stingray 프로젝트를 브라우저에서 시작하려면 여러 단계를 거쳐야 합니다. 이 시퀀스는 사용자의 개입 없이 자동으로 수행되지만 백그라운드에서 어떤 일이 발생하는지 약간 알아 두면 도움이 될 수 있습니다.

  1. 다운로드. 이 단계에서 브라우저는 엔진의 런타임 .wasm 및 .js 파일을 다운로드하고 컴파일합니다. 이 단계에서 실제 프로젝트 데이터가 다운로드되지는 않습니다.

    프로젝트를 브라우저에서 처음 실행하는 경우 이 단계를 완료하는 데 어느 정도 시간이 걸릴 수 있습니다. 이후의 실행은 대개 좀 더 빨리 진행됩니다.

    연결 속도는 이 단계의 시간뿐 아니라 CPU가 WebAssembly 및 JavaScript 파일을 컴파일하는 시간에도 영향을 줍니다.

    다음에 페이지를 로드할 때 동일한 컨텐츠를 다운로드하는 시간을 절약하기 위해 Stingray는 다운로드한 컨텐츠를 브라우저의 IndexedDB 로컬 저장소에 저장합니다. 이로 인해 특히 원격 서버에서 프로젝트를 실행하는 경우 속도가 빨라질 수 있습니다. 컨텐츠에 대한 업데이트가 예상대로 표시되지 않으면 브라우저에서 이 캐시를 지워야 할 수도 있습니다.

  2. 리소스 동기화. 이 단계에서는 프로젝트의 데이터가 원격 위치에서 다운로드되거나 브라우저의 IndexedDB 로컬 저장소에서 로드됩니다.

    브라우저에서 프로젝트를 처음 실행하면 모든 파일이 브라우저의 IndexedDB 로컬 저장소에 존재하지 않으므로 해당 파일이 원격 위치에서 다운로드됩니다.

    후속 실행에서는 전부는 아니지만 대부분의 파일이 IndexedDB 로컬 저장소에 저장되어 있어 원격 다운로드 작업이 줄어들므로 이 단계의 속도가 크게 빨라집니다. 모든 브라우저에서 IndexedDB 로컬 저장소에 다른 제한을 적용하므로 일부 큰 파일이나 프로젝트가 IndexedDB 로컬 저장소에 제대로 유지되지 않을 수도 있습니다.

  3. 리소스 로드. 이 단계에서는 엔진이 실행 중이고 실제로 프로젝트 리소스를 메모리로 로드합니다.

    이 단계를 완료하는 데 걸리는 시간은 프로젝트의 컨텐츠 양과 로드하는 리소스의 종류에 따라 다릅니다.

    예를 들어 재질은 로드하는 데 많은 시간이 소요되므로 프로젝트에 재질이 많은 경우 이 단계에서 더 오래 기다려야 합니다. 이는 이러한 재질을 구성하는 셰이더를 이 플랫폼에서 런타임에 컴파일해야 하기 때문입니다. 그러나 브라우저에 셰이더 캐시 기능이 내장되어 있으면 후속 실행이 더 빨라집니다.

문제 해결 팁

프로젝트가 브라우저에서 실행되지 않는 경우:

Please send us your comment about this page