JavaScript emscripten 셋업

2018.12.01 23:11

졸리운_곰 조회 수:11

 

emscripten 셋업

오픈프레임웍스로 프로젝트를 만들어 보셨다면 "끝내주네! 이걸 온라인 포트폴리오로 올리고 싶군!"이라고 생각해보신적 있으실겁니다. 아마도 비디오나 스크린샷으로 기록하여 만들수 있겠지만, 프로젝트의 UI요소들은 어떻게 해야할까요? 어떻게 여러분이 만든 마우스 효과를 방문자들이 볼 수 있을까요? Emscripten을 사용해보십시오. Emscripten은 몇 분만에 C++코드를 자바스크립트로변환해 줍니다! 즉 여러분의 끝내주는 오픈프레임웍스 프로젝트를 "온라인"에 업로드할 수 있습니다.

아래의 가이드들은 오픈프레임웍스 배포판의 예제 프로젝트를 어떻게 컴파일하는지를 보여줄 것입니다. 그리고 언제든지 오픈프레임웍스 스케치를 웹페이지로 재변환할 수 있습니다. 오픈프레임웍스 0.9를 다운받아 사용하고 있다면(이 기능은 오픈프레임웍스 0.9이상의 버전에서 지원됩니다)emscripten을 설치하고 프로젝트를 이것으로 컴파일하면 됩니다. 이를 위해서는 아래의 단계를 하나하나 따라주시면 됩니다.

Emscripten 설치

이 페이지로 가셔서 여러분이 사용하고 있는 운영체제에 맞는 SDK를 다운받습니다. 만약 윈도우즈 운영체제를 사용한다면, .exe를 더블클릭하여 마법사의 진행을 따라주시면 됩니다. 만약 매킨토시나 리눅스를 사용한다면, Portable Emscripten SDK for Linux and OS X를 찾아, 클릭해 다운로드합니다. 다운로드가 완료되면, 압축을 폴더에 풀고, 터미널을 여러 해당 폴더로 이동한 뒤 아래의 명령을 사용하시면 됩니다:

# Fetch the latest registry of available tools.
./emsdk update

# Download and install the latest SDK tools.
./emsdk install latest

# Make the "latest" SDK "active"
./emsdk activate latest

설치과정에 약간의 시간이 소요됩니다. 설치가 끝나면, source ./emsdk_env.sh를 입력하여 활성화된 Emscripten의 시스템 경로를 설정해줍니다. 이 명령의 출력을 복사하여 .profile파일에 추가할 수 있습니다. 이렇게 하여 저장된 변수는 다음 세션에서도 자동으로 적용됩니다.

emscripten을 사용하여 오픈프레임웍스 프로젝트 컴파일하기

터미널을 열어 예제 examples/3d/3DPrimitivesExample과 같이 특정프로젝트의 폴더로 이동합니다. 그리고 나서 아래의 명령어를 사용하여 프로젝트를 컴파일합니다.

emmake make

컴파일 과정이 끝나면, examples/3d/3DPrimitivesExample/bin 폴더에 3DPrimitivesExample.html이라는 새로운 파일이 생성됩니다. 아래의 명령어로 이 파일을 엽니다:

emrun bin/3DPrimitivesExample.html

만약 동작하지 않는다면, 해당 파일이 사파리 브라우저에서 열렸기 떄문일 수 있습니다. 사파리 브라우저는 WebGL을 지원하지 않습니다. 크롬과 같은 다른 브라우저로 시도해보시기 바랍니다.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

emrun --browser chrome bin/3DPrimitivesExample.html

모든것이 잘 동작한다면, 아래와 같은 이미지가 보일것입니다.

이 튜토리얼은 Regine Flores Mir의 블로그 포스트에서 가져왔습니다.

 

[출처] https://openframeworks.cc/ko/setup/emscripten/

 

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
285 HTML DIV tag: 세 개의 DIV영역을 가로로 나란히 놓는 방법 - 테이블과 비교 졸리운_곰 2019.02.04 105
284 [WP]외부 게시판을 IFRAME으로 넣기 졸리운_곰 2019.01.30 166
283 자바스크립트 기본 예제(마우를 클릭드래그하여 오브젝트 이동 시키기) 졸리운_곰 2019.01.28 20
282 접기기능 html 졸리운_곰 2019.01.28 170
281 좀 예전시절 접었다 폈다 하는 javascript 소스 졸리운_곰 2019.01.28 22
280 접었다 폈다하는 자바스크립트 소스 졸리운_곰 2019.01.28 63
279 node.js 서버 장애시 자동 재시작 설정 [forever 사용] 졸리운_곰 2019.01.24 467
278 JavaScript에서 json을 생성 하는 방식입니다. file 졸리운_곰 2019.01.10 58
277 JQuery로 radio 버튼의 값 가져오기 : How to get the value of selected radio button in a group using jQuery 졸리운_곰 2019.01.10 149
276 html placeholder= attribute 설정 후 text데이터 넣고 focus시 데이터 사라지는 문제 졸리운_곰 2019.01.08 27
275 Ajax replace instead of append 그리고 jquery .append(Html). 에서 class 적용 적용 졸리운_곰 2019.01.07 203
274 html element text value html에선 .text 가 아니라 textContent 다 졸리운_곰 2019.01.03 1975
273 JSON 스트링 <=> JSON 오브젝트 구분 및 상호 변환 file 졸리운_곰 2018.12.18 40
» emscripten 셋업 file 졸리운_곰 2018.12.01 11
271 Emscripten을 이용한 C/C++ 컴파일 file 졸리운_곰 2018.12.01 47
270 Compiling a New C/C++ Module to WebAssembly 졸리운_곰 2018.12.01 40
269 C/C++ 프로젝트를 WebAssembly로 빌드하기 file 졸리운_곰 2018.12.01 24
268 Emscripten으로 WebAssembly와 JavaScript 코드 크기 줄이기 file 졸리운_곰 2018.12.01 20
267 WebAssembly - hello world 어셈블리를 브라우저에 올려보자 file 졸리운_곰 2018.12.01 13
266 .자바스크립트 문자열 다루기 졸리운_곰 2018.11.19 131
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED