WebGL 문서 만들기 및 제작

WebGL은 플러그인을 추가하지 않고도 호환 가능한 모든 브라우저에서 그래픽을 렌더링할 수 있도록 지원하는 개방형 웹 표준입니다.WebGL은 브라우저의 모든 웹 표준에 완벽하게 통합되므로 이미지 처리 및 효과를 웹 페이지 캔버스의 일부로 하여 GPU 가속을 사용할 수 있습니다. WebGL 요소는 다른 HTML 요소에 포함될 수 있으며 페이지의 다른 부분과 합성될 수 있습니다.

대부분의 최신 브라우저에서 WebGL을 지원하지만 지원되는 버전을 정확히 확인하려면 이 링크를 참조하십시오.

일부 브라우저에서는 기본적으로 WebGL이 비활성화되어 있습니다. 브라우저에서 WebGL을 활성화하려면 이 문서를 참조하십시오.

 일부 브라우저에서는 WebGL이 기본적으로 비활성화되어 있으므로 브라우저에서 WebGL이 활성화되어 있는지 확인해야 합니다.

WebGL-glTF(베타) 문서 유형 사용

이제 Animate에는 두 개의 WebGL-glTF 문서 유형이 있습니다. WebGL-glTF 표준 문서 유형을 사용하여 모든 표준 WebGL-glTF 패키지와 통합할 수 있습니다. 완벽하게 표준 규격입니다.

WebGL-glTF 파일 게시

애니메이션을 GLTF 및 GLB 형식으로 변환

WebGL-glTF 및 GLB는 파일 크기와 런타임 처리를 줄여줍니다. Animate에서는 문서를 두 포맷 모두로 사용할 수 있습니다. 비디오를 두 포맷으로 모두 사용하고 싶으세요? 이 예제의 끝에 있는 자습서를 보고 다음 단계를 따르십시오.

Animate에서 [WebGL GLTF 내보내기]를 사용하여 고급 애니메이션을 만드는 방법

Animate 18.0 이하 버전

Animate 18.0 이하 버전의 Animate를 사용하는 경우 다음 컨텐츠를 참조할 수 있습니다.

WebGL 문서 유형

Animate에서는 풍부한 대화형 내용을 WebGL(Web Graphics Library) 형식으로 만들고 제작할 수 있습니다. WebGL은 완벽하게 브라우저에 통합되므로 Animate에서 그래픽 처리 및 렌더링을 웹 페이지 캔버스의 일부로 하여 GPU 가속을 사용할 수 있습니다.

이 새 문서 유형을 통해 컨텐츠를 만들고 WebGL 출력으로 빠르게 제작할 수 있습니다. Animate 내의 강력한 도구를 활용하여 풍부한 내용을 만들고 호환 가능한 모든 브라우저에서 실행할 수 있는 WebGL 출력으로 렌더링할 수 있습니다. 즉, 기존 Animate 타임라인, 작업 영역 및 드로잉 도구를 사용하여 WebGL 내용을 기본적으로 제작할 수 있습니다. 가장 널리 사용되는 브라우저에서 모두 WebGL이 지원되므로 Animate를 통해 대부분의 웹 플랫폼에 맞도록 내용을 렌더링할 수 있습니다.

WebGL에 대한 지원은 미리 보기로만 사용할 수 있습니다. 이 Animate 업데이트에는 사운드 및 스크립트를 비롯한 기본 애니메이션에 대한 지원과 대화형 기능 세트가 포함됩니다. Animate의 이후 릴리스에서 WebGL 문서 유형에 대해 더 향상된 기능을 확인하실 수 있습니다. WebGL에 대해 Animate에서 지원하는 기능의 전체 목록은 이 KB 문서를 참조하세요.

WebGL 문서 만들기

Animate에서 WebGL 문서를 사용하면 WebGL 형식의 내용을 빠르게 만들고 제작할 수 있습니다. WebGL 문서를 만들려면 다음을 수행하십시오.

1. Animate를 실행합니다.
2. 시작 화면에서 WebGL(미리 보기) 옵션을 클릭합니다. 또는 파일 > 새로 만들기 메뉴 옵션을 선택하여 새 문서 대화 상자를 표시합니다. WebGL(미리 보기) 옵션을 클릭합니다.

브라우저에서 WebGL 내용 미리 보기

Animate의 [동영상 테스트] 기능을 사용하여 내용을 미리 보거나 테스트할 수 있습니다. 미리 보려면 다음을 수행하십시오.

1. Animate 내에서 Windows의 경우 Ctrl+Enter를, MAC의 경우 CMD+Enter를 누릅니다. 그러면 기본 브라우저가 시작되고 WebGL 내용이 렌더링됩니다.

WebGL 형식으로 내용 제작

Animate 내에서 WebGL 내용을 기본으로 만들고 제작할 수 있습니다.

WebGL 문서를 제작하려면 다음을 수행하십시오.

1. 파일 > 제작 설정을 선택하여 [제작 설정] 대화 상자를 표시합니다. 또는 WebGL에 대한 제작 설정을 이미 지정한 경우 파일 > 제작을 선택합니다.
2. [제작 설정] 대화 상자에서 다음 값을 지정합니다.

출력 파일에 의미 있는 이름을 지정합니다. 또한 WebGL 출력을 제작할 위치를 찾아 선택하거나 입력합니다.

WebGL 프로젝트를 제작할 때마다 HTML 래퍼를 덮어쓸지 여부를 지정할 수 있습니다. 제작된 HTML 파일을 외부에서 변경했고 Animate의 애니메이션 또는 에셋에 대한 변경 사항을 업데이트하는 동안 해당 외부 변경 사항을 보존하려는 경우 이 옵션의 선택을 취소할 수 있습니다.

WebGL 출력에 숨겨진 레이어를 모두 포함합니다. [숨겨진 레이어 포함]을 선택 취소하면 숨겨진 것으로 표시된 모든 레이어(동영상 클립 내에 중첩된 레이어 포함)는 결과 WebGL에서 내보내지 않습니다. 이렇게 하면 레이어가 표시되지 않으므로 여러 버전의 WebGL 문서를 쉽게 테스트할 수 있습니다.

마지막 프레임에 도달하면 내용을 다시 반복합니다. 이 옵션을 선택 취소하면 마지막 프레임에 도달한 내용이 중지됩니다.

3. [제작]을 클릭하여 지정한 위치에 WebGL 내용을 제작합니다.

 브라우저에서 실행되는 WebGL 내용에 대해 지정할 수 있는 최대 FPS는 60FPS입니다.

WebGL 출력 이해

제작된 WebGL 출력에는 다음 파일이 포함되어 있습니다.

여기에는 런타임, 에셋에 대한 호출이 포함되어 있으며 이 파일은 WebGL 렌더러를 초기화합니다. 파일 이름은 기본적으로 <FLA_name>.html이 됩니다. [제작 설정] 대화 상자([파일] > [제작 설정])에서 HTML 파일에 다른 이름을 지정할 수 있습니다.

HTML 파일은 기본적으로 FLA 파일과 동일한 디렉토리에 위치합니다. [제작 설정] 대화 상자에서 다른 위치를 지정할 수 있습니다.

제작된 WebGL의 내용을 렌더링합니다. 이 파일은 WebGL 문서의 libs/ 폴더에 제작됩니다. 파일은 flwebgl-<버전>.min.js와 같이 이름이 지정됩니다.

HTML 래퍼는 이 JS 파일을 사용하여 WebGL 내용을 렌더링합니다.

스테이지의 비트맵 인스턴스를 포함하여 모든 (모양의) 색상 값을 저장합니다.

WebGL 문서에 오디오 추가

WebGL 문서에 오디오를 가져와 포함하고, 동기화 설정(이벤트, 시작 및 중지)을 사용하여 재생을 제어하며, 런타임에 타임라인 오디오를 재생할 수 있습니다. WebGL은 현재 .wav 및 .mp3 형식만 지원합니다.

오디오에 대한 자세한 내용은 Animate에서 오디오 사용을 참조하십시오.

기존 내용을 WebGL 문서로 마이그레이션

Animate 내의 기존 내용을 WebGL 문서로 마이그레이션할 수 있습니다. 또한 Animate에서 내용을 수동으로 복사 또는 가져오는 방식을 통해 마이그레이션할 수도 있습니다. Animate에서 여러 문서로 작업하는 경우 내용을 라이브러리의 레이어나 에셋으로 여러 문서 간에 복사하는 것이 일반적인 관례입니다. 대부분의 Animate 기능이 지원되지만 일부 내용 유형은 WebGL 형식에 더 잘 맞게 수정됩니다.

Animate에는 풍부한 내용을 시각적으로 제작하는 데 도움이 되는 강력한 여러 기능이 포함되어 있습니다. 하지만 이러한 기능 중 일부는 Animate 전용이므로 WebGL 문서를 지원하지 않습니다. Animate는 그러한 내용을 지원되는 형식으로 수정하도록 설계되었으며, 도구 또는 기능이 지원되지 않는 경우 이를 시각적으로 나타냅니다.

기존 Animate 문서 유형(예: ActionScript 3.0, AIR for Android, AIR for Desktop 등)의 내용(예: 레이어 또는 라이브러리 심볼)을 WebGL 문서로 복사하는 경우. 이 경우 지원되지 않는 내용 유형이 삭제되거나 지원되는 기본값으로 변환됩니다.

예를 들어 3D 애니메이션을 복사하면 스테이지의 객체에 적용된 모든 3D 변형이 제거됩니다.

지원되지 않는 내용을 포함한 PSD 또는 AI 파일을 가져올 경우. 이 경우 내용이 삭제되거나 지원되는 기본값으로 변환됩니다.

예를 들어 흐림 효과가 적용된 PSD 파일을 가져올 수 있습니다. Animate가 효과를 제거합니다.

ActionScript 3.0 및 WebGL과 같이 여러 문서 유형으로 동시에 작업하는 경우. 문서를 지원되지 않는 도구나 선택한 옵션으로 전환합니다. 이 경우 Animate에서 이 기능을 지원하지 않음을 시각적으로 나타냅니다.

예를 들어 ActionScript 3.0 문서에 점선을 만들고 선 도구를 선택한 상태로 WebGL로 전환합니다. 포인터와 속성 관리자를 통해 점선은 WebGL 내에서 지원되지 않는다는 것을 시각적으로 확인할 수 있습니다.

[액션] 패널에서 JavaScript 코드를 작성하여 플레이어가 프레임에 진입한 후 실행되도록 할 수 있습니다. 프레임 스크립트 컨텍스트에서 '이' 변수는 해당 변수가 속하는 MovieClip의 인스턴스를 참조합니다. 또한 프레임 스크립트는 컨테이너 HTML 파일에서 선언된 JavaScript 함수 및 변수에 액세스할 수 있습니다. ActionScript 문서에서 프레임 또는 레이어를 복사하여 WebGL 문서에 붙여 넣으면 스크립트가 있는 경우 주석 처리됩니다.

마이그레이션 후 컨텐츠에 적용되는 변경 사항

다음은 기존 내용을 WebGL 문서로 마이그레이션할 때 적용되는 변경 유형입니다.

HTML5 Canvas에서 지원되지 않는 내용 유형은 제거됩니다. 예를 들면 다음과 같습니다.

지원되지 않습니다. 효과는 제거되고 대신, 모양은 단색으로 채우기로 간주됩니다.

내용 유형 또는 기능이 지원되지만 기능의 속성이 지원되지 않습니다. 예를 들면 다음과 같습니다.

기본 색상을 사용한 단색으로 채우기로 간주되어 수정됩니다.

비트맵 캐싱을 사용하여 렌더링 성능 향상

런타임 비트맵 캐싱을 사용하면 정적 동영상 클립(예: 배경 이미지)이나 버튼 심볼이 런타임에 비트맵으로 캐싱되도록 지정하여 렌더링 성능을 최적화할 수 있습니다. 기본적으로 벡터 항목은 모든 프레임에서 다시 그려집니다. 동영상 클립 또는 버튼 심볼을 비트맵으로 캐싱하면 이미지는 비트맵이 되고 위치가 변경되지 않으므로 브라우저가 해당 항목을 계속해서 다시 그릴 필요가 없습니다. 따라서 WebGL 내용 렌더링 성능이 크게 향상됩니다.

예를 들어 복잡한 배경이 있는 애니메이션을 만들 때 배경에 포함된 모든 항목이 들어 있는 동영상 클립을 만듭니다. 속성 관리자에서 배경 동영상 클립에 대해 [비트맵으로 캐시]를 선택합니다. 재생 중 배경은 현재 화면 깊이로 저장된 비트맵으로 렌더링됩니다. 브라우저는 스테이지에서 비트맵을 빠르게 한 번만 그려서 애니메이션이 더욱 빠르고 자연스럽게 재생되도록 합니다.

비트맵 캐싱을 사용하면 동영상 클립을 사용하고 그 자리에 자동으로 고정할 수 있습니다. 영역이 변경되면 벡터 데이터로 비트맵 캐시가 업데이트됩니다. 이 프로세스에서는 브라우저가 다시 그려야 하는 횟수를 최소화하여 더욱 자연스럽고 빠르게 렌더링할 수 있습니다.

MovieClip 심볼에 대해 [비트맵으로 캐시] 속성을 활성화하려면 MovieClip 인스턴스를 선택하고 속성 관리자([윈도우] > [속성])의 [렌더링] 드롭다운에서 [비트맵으로 캐시]를 선택합니다.

비트맵으로 캐시 사용 시 고려 사항

WebGL 내용에 대해 [비트맵으로 캐시] 속성을 사용하는 경우 다음을 고려하십시오.

• MovieClip 심볼의 최대 크기는 2048x2048로 제한됩니다. 캐싱될 수 있는 동영상 클립 인스턴스의 실제 범위가 2048x2048 미만인 경우 WebGL에서 일부 픽셀이 유보됩니다.
• 동일한 MovieClip의 인스턴스가 둘 이상 있는 경우 Animate에서 발견한 첫 번째 인스턴스의 크기로 캐시가 생성됩니다. 그러나 동영상 클립의 변형이 크게 변경되는 경우에도 캐시는 다시 생성되지 않으며 [비트맵으로 캐시] 속성이 무시되지 않습니다. 따라서 애니메이션이 진행되는 동안 MovieClip 심볼의 크기가 크게 변경되는 경우 애니메이션이 모자이크 형태로 표시될 수 있습니다.