W3C HTML5 대한민국 관심그룹 21차회의 2012.12.05 (수) conference/seminar

W3C HTML5 대한민국 관심그룹 21차회의

발표자료 링크: http://www.slideshare.net/Wonsuk/2012-html5-15502278 



1. collie 소개

NHN에서 제공하는 오픈소스 라이브러리인 Collie


http://deview.kr/2012/xe/index.php?document_srl=395&dummy=1&mid=track

콜리 dev2012발표. (같은사람)

이걸 보면될듯.

get started: http://jindo.dev.naver.com/collie/

intro

이미지를 화면에 표시하는 적절한 방법은 DOM과 html5 캔버스가 있다.

캔버스는 DOM과 달리 객체별로 다루기 힘들다.(캔버스에 그리기전에 영역등 정보를 별도 관리해야함)

그리고 안드로이드는 기기별로 지원하는게 다르기때문에 의도한대로 안나오는 경우가 종종있다.

콜리는 18종이상의 모바일기기에 최적화되도록 만들었다. 


- Tile Cashing

- Dirty Rectangle => 바뀐 객체만 다시 그려준다.

- Tile rendering => 역역을 지정해서 그영역안에서 특정 타일 갯수이상 바뀌면 그영역을 다시 그려준다.

 요론것들등 게임을 만들기 위해 유용한 것들을 모아둔 라이브러리.(자바스크립트) 물리엔진등 여러가지 있음

주사위를 굴린다던가, 이미지를 터치로 움직인다던가. 요론거를 쉽게 구현하게 도와줌.

사용방법이 쉬움. 해커톤으로 간단한 게임을 만들수 있다.

콜리는 LGPL v2.1 오픈소스다.


3d rendering이 되서 3d게임도 가능.


webGL과 경쟁구도가 될듯'



*cocos2d는 캔버스기반이다. 그래서 폰에서 굉장히 느리다. 따라서 코코스2d보다 콜리를 쓰는게 빠르다.


web에서 콜리뿐아니라 3d rendering 할때 input박스를 넣어놓고 3d가 rendering된 상태에서 input박스를 누르면 3d rendering 된 객체가 깨지는 현상이 있다. => 아직 풀지 못한 이슈.



2. understanding the css transforms matrix

2-1. javascript로 이미지 연산이 쉬워졌다. 

카메라로 사람인식(getUserMedia=>localserver를 띄워놔야 작동함.) => 움직임으로 먼가를 한다.

openGL같은걸 쓰지않고도 web기술만으로 가능해 졌다.

아직은 인식가능한 것들이 많이 없지만 지금 일반 카메라 라이브러리처럼 발전하고 있다.

카메라에서 image object를 받아와서 이걸로 matrix계산.

editing program을 만들기에 좋을듯(아직 javascript 계산능력에 한계때문에 realtime으로는 불가능). matrix 에 필터 씌우는것이 용이하니깐.

모바일에서는 아직안됨 http://caniuse.com/#search=getusermedia (앞으로 가능해질것 같다고함..)

image filtering 예제

http://www.html5rocks.com/en/tutorials/getusermedia/intro/

http://www.oxymoronical.com/experiments/convolution/


2-2. 쉽게 이미지 변형이 가능하다 (알고있는것일듯 )

- webkit-tranform 으로 이미지를 여러방향으로 회전시킬수있다.

css로 이렇게 이미지를 늘리거나 회전시키는것은 svg이미지를 쓸때 유용하게 쓰일수 있다.


3. 2012 html5관련 이슈 정리 ->발표자료는 공유해준다고 함.


http://www.sencha.com/blog/sencha-the-2012-html5-wishlist

2. Background Services => 음악을 듣다가 다른작업으로갔다가 켜져도 이어서 음악을 들을 수 있도록.

http://www.gameclosure.com/ (2012.2, 27살 ceo 실리콘벨리)

=> hybrid 로 게임을 만들고자하는 사람들을 위한 framework.

adobe -> 기존 adobe개발자들을 계속 maintain하기위한 전략으로 가고있다.


2012.3

h.264를 사용하는 회사들은 license fee를 내야한다.

firefox쪽에서 h.264 채용함.


2012.4

BBC가 html5 게임에 betting했다.

오페라 -webkit prefix지원


2012.6

ios6에 web audio api와 css filters to safari 들어감

nginx에서 SPDY를 지원 (SPDY가 점점 수요가 많아진다는것..)


2012.7

mozilla prefix 붙이는걸 없애고있다.

opera support SPDY

firefox support getUserMedia

google WebM 코덱을 써서 h.264를 오픈소스로 무료로 쓰도록 했다가 막힘?


2012.8 

flash 고이 잠들다 (RIP) - android에서 flash 서비스 중단(Adobe has officially pulled its official Flash Player plug-in from the Google Play Store.). (flash보단 web쪽에 비중을두고 발전하는 방향)


firefox support SPDY


2012.9

주커버그 - html5 구리다.

w3c - 2014년에 html5스펙을 끝내겠다.

(지나가는 설명: 페이지 로딩시간을 줄이는것 -> SPDY를 써서)

Intel에서 HTML5 programming tool이나옴. 칩벤더들이 html5에관심이 많다 (qualcomm도)

모질라에서 Persona라는 인증시스템을 들고나왔다. (요즘 facebook로그인으로 로그인을 편하게 할려고 하고있는데 이는 facebook에 락인되는것이다. 이건 올지않다. 해서 나온것)


2012.10

webplatform.org => We are an open community of developers building resources for a better web, regardless of brand, browser or platform. Anyone can contribute and each person who does makes us stronger. Together we can continue to drive innovation on the Web to serve the greater good. It starts here, with you.


뉴욕타임즈 html5 launches webapp  for ipad


2012.11

Udacity 대학에서 HTML5 game development 수업이 생겼다

w3c pointer events working group launched (작업중.)


2013.

21억개 디바이스에서 html5를 지원할 예정.

실리콘 벨리를 포함해서 job trend: html5 1위.

2015년까지 개발되는 모바일앱의 80%가 hybrid또는 앱중심이 될것이다.

Web OS release 될것임. -> Web OS phone들이 나올것이다.


(플렛폼 만들기가 쉬워진다. 리눅스깔고 web OS올리면 됨)




덧글

  • 이클 2013/02/22 19:29 # 삭제 답글

    본문중에 궁금한점!
    html5에서 이미지 표현법이 dom과 canvas가있는데
    canvas는 객체 접근이 힘들다고 하셨잖아요
    근데 어차피 canvas도 태그니깐 dom으로 접근할수 있지않나요?
    그럼 캔버스도 dom으로 다룰수 있는것아닌가요?
    그리고 캔버스 기반의 이미지 표현으로 게임을 만들었을시
    모바일에서는 느려지나요?!!
    요즘 공부중이라 궁금해서 질문드립니다!
댓글 입력 영역