IT & Art

Github : Demo React 메타버스 웹앱 시리즈입니다. 메타버스 앱 - 1. 3D 파일 업로드 메타버스 앱 - 2. 배경, 건물 그리고 1인칭 시점 메타버스 앱 - 3. 캐릭터 메타버스 앱에 캐릭터를 추가해 봅시다. 캐릭터 다루기는 좀 복잡한데, 먼저 간단한 소개 영상을 준비했어요. Character on Three.js 캐릭터는 Character Creator 3를 사용해서 만들어 FBX로 export했어요. 준비된 FBX가 정상 동작하는지 먼저 three.js 에디터에서 테스트해 볼 텐데요, 에디터에서 File - Import - FBX를 선택합니다. 잘 로딩되는데, 머리카락이 좀 이상하네요. 속성 중에 Depth Write를 비활성화해 보면, 아래 스크린샷처럼 헤어가 제대로 나오네요. 헤어..

Github : Demo React 메타버스 웹앱 시리즈입니다. 메타버스 앱 - 1. 3D 파일 업로드 메타버스 앱 - 2. 배경, 건물 그리고 1인칭 시점 메타버스 앱 - 3. 캐릭터 지난 시간에는 메타버스 앱에서 사용할 3D 파일을 업로드하는 기능을 만들었습니다. 이번 편에서는 업로드된 배경과 건물을 출력하고 1인칭 시점으로 돌아다녀 보겠습니다. 아래 결과처럼 말이죠. 아래와 같이 기능별로 나눈 5개 컴포넌트를 만들어 viewer/ 폴더 안에 넣고 사용해 봅시다. Viewer.js: 웹 3D를 구성하는 scene, camera, renderer 및 1인칭 시점 컨트롤러 등 전체 구성을 포괄하는 뷰어 컴포넌트 Decorator.js: 배경, 빛(조명), 바닥 등 렌더링 환경을 구성하는 컴포넌트 Worl..

Github : Demo React 메타버스 웹앱 시리즈입니다. 메타버스 앱 - 1. 3D 파일 업로드 메타버스 앱 - 2. 배경, 건물 그리고 1인칭 시점 메타버스 앱 - 3. 캐릭터 요즘 핫한 메타버스, React 웹앱으로 간단히 만들어 봅시다. 이번 편에서는 React 앱을 만들고 3D 파일을 업로드해서 로딩하는 것까지 해 볼 거에요. React 앱 준비 기초 내용이지만, 간단히 복습해 봅시다. Create-react-app으로 앱을 만들어 줍니다. $npx create-react-app metaverse UI 라이브러리 Reactstrap을 설치해 줍니다. $npm i -save reactstrap bootstrap index.js에 bootstrap.css를 import합니다. import 'b..

React 웹캠 시리즈입니다. React 웹캠 - 1. Promise 비동기 함수의 이해 React 웹캠 - 2. getUserMedia React 웹캠 - 3. Canvas React 웹캠 - 4. Select webcam Sample Code 두 개 이상의 웹캠(혹은 마이크)을 사용하는 경우 브라우저 메뉴를 통해 웹캠을 선택하는 React 앱을 만들어 봅시다. navigator.mediaDevices.enumerateDevices() 오늘의 주요 API는 enumerateDevices() 인데요, 이는 사용 가능한 모든 디바이스 배열을 리턴해줍니다. 리턴 값을 console.log로 찍어 보면 아래와 같습니다. deviceId는 이 디바이스에 접근하기 위한 ID이고 kind는 디바이스의 종류로서 au..

오늘은 ROS 컨트롤러와 영상을 보여주는 React 웹앱을 만들고 CLOi 시뮬레이터에 연결해 보겠습니다. React-Nipple 먼저 조이스틱을 직접 만들기 어려우니, 널리 알려진 nipple.js를 사용합니다. React에서 사용할 수 있는 버전이 npm에서 제공되므로 그걸 사용합니다. react-nipple A react wrapper for the [nipplejs](https://www.npmjs.com/package/nipplejs) on-screen-joystick. www.npmjs.com ReactNipple 설치 후 import해서 move, end 이벤트만 처리하면 되는데요, 조이스틱을 움직이기 시작하면 start(무시해도 됩니다) 이벤트 이후 지속적으로 move 이벤트가 올라오고 조..

지난 편에서 ROS2와 LG CLOi 시뮬레이터를 설치하고 터미널에서 명령을 보내봤습니다. 오늘은 방향키 GUI를 가진 React 웹앱을 만들어 연결해 봅시다. CLI - Subscribe 테스트 지난 편에서 키보드를 누르면 ROS 토픽(/cloi1/cmd_vel)으로 데이터가 publish되어 시뮬레이터의 클로이를 움직였는데요, 클로이가 해당 토픽에 subscribe하고 있기 때문에 움직일 수 있던 거에요. 이는 ROS2 CLI로도 확인할 수 있는데요, ros2 topic echo 명령을 치면, 키보드를 누를 때 전송되는 데이터를 확인할 수 있습니다. $ ros2 topic echo /cloi1/cmd_vel linear: x: 0.0 y: 0.0 z: 0.0 angular: x: 0.0 y: 0.0 ..

ROS는 로봇을 컨트롤하는 기술입니다. OS라기보다는 (MQTT처럼) publish-subscribe 구조로 명령과 상태를 주고 받는 메시지 브로커에 가깝죠. 꼭 로봇이 없어도 시뮬레이터를 사용해 ROS를 해볼 수 있는데요, 오늘은 인천공항 로봇으로 널리 알려진 LG CLOi 로봇 시뮬레이터를 통해 작업해 보겠습니다. ROS2 설치 및 실행 ROS는 ROS1과 ROS2 두 개 버전이 있는데요, ROS1에 비해 ROS2는 설치부터 아주 간단합니다. ROS1 설치하려면 준비과정도 복잡하고 오류도 많이 나는 데다가 설치 후에도 설정해 줄 것들이 많아요. 따라서 우리는 ROS2를 사용하겠습니다. 윈도우나 맥에서도 ROS2를 깔 수 있지만, 여기서는 리눅스(Ubuntu 18.04 LTS)를 기준으로 합니다. In..

★Sample Code(Github) 인공지능, 딥러닝 하면 떠오르는 텐서플로우(TensorFlow)를 웹앱에서도 개발 및 사용할 수 있는 TensorFlow.js 자바스크립트 머신러닝 라이브러리에 대해 알아봅시다. TensorFlow.js | 자바스크립트 개발자를 위한 머신러닝 브라우저, Node.js 또는 Google Cloud Platform에서 모델을 학습시키고 배포합니다. TensorFlow.js는 자바스크립트 및 웹 개발을 위한 오픈소스 ML 플랫폼입니다. www.tensorflow.org 인공지능 서비스는 특히 영상(Vision)과 음성(Speech) 서비스에 특화되어 있는데요, AWS AI, Google Cloud AI 등 세계적인 클라우드 기반 AI 서비스를 들여다 보면 얼굴, 포즈, 사..

★Sample Code(Github) 지난 기본편 튜토리얼에서 위와 같은 시스템을 만들었죠. 오늘은 그 첫 걸음이자 워밍업으로 실제 기상청 날씨 API를 연동해 보겠습니다. 기상자료개방포털[데이터:오픈 API] data.kma.go.kr 날씨예보 API 등록 먼저 공공데이터포털 가입합니다. 공공데이터 포털 국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Datase www.data.go.kr 동네예보 서비스 검색 후 활용 신청합니다. 활용 조건이 저작자 표시니까 아래와 같이 기재하면 되겠네요. 본 저작물은 기상청에서 2021년 작성하여 공공누리 제1유형으로 개방한 동네예보..

React 3D 웹앱 Basic 시리즈입니다. React 3D 웹앱 - 1. 개요 React 3D 웹앱 - 2. Three.js React 3D 웹앱 - 3. 3D 모델 React 3D 웹앱 - 4. 3D 뷰어 Github 지난 편에서는 3D 앱에 넣을 애셋(재료)들을 구해봤습니다. 애셋들을 이용해서 React 3D 웹앱을 만들어 봅시다. 오늘의 목표 위와 같은 구성으로 앱을 만들어 볼 텐데요, 우선 create-react-library 패키지를 사용해서 React 라이브러리를 만듭니다. create-react-library react3d 애셋들은 create-react-library로 자동 생성된 example 앱의 public 폴더 안에 넣습니다. 3D 캐릭터는 public/character/, HD..