'WebKit'에 해당되는 글 6건

Browser
Safari, Google Chrome등의 브라우저에서 이용하고 있는 렌더링 엔진 Webkit과 관련한 기술적인 세미나 동영상입니다. Webkit 뿐만 아니라 Webkit을 이용하는 구글 Chrome브라우저에 대한 내용들도 있습니다.

지금까지는 브라우저들의 기술적인 내용을 알기는 힘들었습니다.  오픈소스의 Mozilla에서 어느 정도 브라우저에 대한 기술적인 내용들에 대해서 공개, 발표를 하곤 했는데, 구글에서 자신들이 chrome 브라우저에서 이용하는 Webkit엔진에 대한 내용들과 chrome 브라우저의 여러 기능 및 성능에 대한 기술적인 내용에 대해서 많이 발표했습니다.(오래 전에 발표한 거지만, 이제서야 포스팅을 하네요. - - )

브라우저와 관련된 아래 내용들 말고도 "Google I/O 2009"에 도움이 될만한 내용(App Engine, Android, Chrome, GWT, AJAX API등)들이 많으니 참고하시길 바랍니다.

Rendering in Webkit

  • Loading -> Source text
  • Parsing -> DOM tree
  • attach() -> Renderer Object
  • Style Resolution -> Renderer Style
  • Layout -> Line Boxes, Layers


The Chromium WebKit API


Painting in Chromium




Google I/O 2009 - Exploring Chrome Internals



Google I/O 2009 - V8: ..High Performance JavaScript Engine



참고
http://code.google.com/intl/ko-KR/events/io/2009/
http://www.youtube.com/profile?user=GoogleDevelopers#g/u
0 0
Browser
이제 머지않아 웹브라우저에서도 3D게임을 할 수 있을지도 모르겠습니다.

WebGL

얼마전에 OpenGL을 담당하고 있는 Khronos consortium에서 WebGL이라는 기술을 발표했습니다.
WebGL 은 HTML5의 canvas element의 3D context에 OpegnGL ES 2.0을 자바스크립트에서 이용할 수 있도록 바인딩했기 때문에 브라우저에서 플러그인 형태로 접근하지 않아도 하드웨어 가속이 되는 3D그래픽을 이용할 수 있습니다. 

현재 Google, Mozilla, NVIDIA, Opera, AMD, Ericsson등과 같은 굵직한 회사들이 참여하고 있습니다.

http://ext3d.com/news/images/webgl.jpg

웹기술과 3D를 결합하려고 한 시도들은 예전에도 많이 있었습니다. 그중 대표적인 기술이 VRML이라는 것이었죠. 2000년대 초반에는 상당히 인기가 많았으나 여러 문제로 사라지고 말았습니다.
그리고 얼마 전에 구글이 내놓은 O3D라는 것이 있습니다. (현재 구글은 둘다 진행하고 있는데, 언젠가는 통합되겠죠.)

자바스크립트와 OpenGL ES의 결합이라...  다소 생소할 수도 있을텐데요. 아래와 같은 형태로 개발할 수 있습니다. 참고로 큐브 예제입니다.




<!DOCTYPE html>
<html>
<head>
<title>Spinning Box</title>
<script src="resources/CanvasMatrix.js"> </script>
<script src="resources/utils3d.js"> </script>
<script id="vshader" type="x-shader/x-vertex">
uniform mat4 pMatrix;
uniform mat4 mvMatrix;
uniform vec3 lightDir;

attribute vec3 vNormal;
attribute vec4 vColor;
attribute vec4 vPosition;

varying float v_Dot;

void main()
{
gl_FrontColor = vColor;
vec4 transNormal = mvMatrix * vec4(vNormal,1);
v_Dot = max(dot(transNormal.xyz, lightDir), 0.0);
gl_Position = pMatrix * mvMatrix * vPosition;
}
</script>
    <script id="fshader" type="x-shader/x-fragment">
varying float v_Dot;

void main()
{
gl_FragColor = vec4(gl_Color.xyz * v_Dot, gl_Color.a);
}
</script>

<script>
function init()
{
var gl = initWebGL("example", "vshader", "fshader",
[ "vNormal", "vColor", "vPosition"],
[ 0, 0, 0, 1 ], 10000);

gl.uniform3f(gl.getUniformLocation(gl.program, "lightDir"), 0, 0, 1);

gl.box = makeBox(gl);

// color array
var colors = new CanvasUnsignedByteArray(
[ 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, // v0-v1-v2-v3 front
1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, // v0-v3-v4-v5 right
0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, // v0-v5-v6-v1 top
1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, // v1-v6-v7-v2 left
1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, // v7-v4-v3-v2 bottom
0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1 ] // v4-v7-v6-v5 back
);

gl.box.colorObject = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.colorObject);
gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);

return gl;
}

width = -1;
height = -1;

function reshape(gl)
{
var canvas = document.getElementById('example');
if (canvas.clientWidth == width && canvas.clientHeight == height)
return;

width = canvas.clientWidth;
height = canvas.clientHeight;

gl.viewport(0, 0, width, height);
var pMatrix = new CanvasMatrix4();
pMatrix.lookat(0,0,10, 0, 0, 0, 0, 1, 0);
pMatrix.perspective(30, width/height, 1, 10000);
gl.uniformMatrix4fv(gl.getUniformLocation(gl.program, "pMatrix"), false, pMatrix.
getAsCanvasFloatArray());
}

function drawPicture(gl)
{
reshape(gl);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

var mvMatrix = new CanvasMatrix4();
mvMatrix.rotate(currentAngle, 0,1,0);
mvMatrix.rotate(20, 1,0,0);
gl.uniformMatrix4fv(gl.getUniformLocation(gl.program, "mvMatrix"), false, mvMatrix.
getAsCanvasFloatArray());

gl.enableVertexAttribArray(0);
gl.enableVertexAttribArray(1);
gl.enableVertexAttribArray(2);

gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.vertexObject);
gl.vertexAttribPointer(2, 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.normalObject);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.colorObject);
gl.vertexAttribPointer(1, 4, gl.UNSIGNED_BYTE, false, 0, 0);

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.box.indexObject);
gl.drawElements(gl.TRIANGLES, gl.box.numIndices, gl.UNSIGNED_BYTE, 0);

gl.flush();

framerate.snapshot();

currentAngle += incAngle;
if (currentAngle > 360)
currentAngle -= 360;
}

function start()
{
var gl = init();
currentAngle = 0;
incAngle = 0.5;
framerate = new Framerate("framerate");
setInterval(function() { drawPicture(gl) }, 10);
}
</script>
<style type="text/css">
canvas {
border: 2px solid black;
width:90%;
height:90%;
}
.text {
position:absolute;
top:100px;
left:20px;
font-size:2em;
color: blue;
}
</style>
</head>
<body onload="start()">
<canvas id="example">
There is supposed to be an example drawing here, but it's not important.
</canvas>
    <div class="text">This is some text under the canvas</div>
<div id="framerate"></div>
</body>
</html>

향후 전망은??

제 짧은 생각으로는 일단 넘어야 할 산은 많아 보입니다.

1. 하드웨어 가속을 쓰더라도 자바스크립트 자체와 바인딩에서 속도문제가 있을 수 있습니다.
현재도 자바스크립트 엔진들은 많이 발전하였으나, OpenGL과의 바인딩에 대해서는 아직 많은 것들을 최적화해야 할것으로 보입니다.
또한 방대한 양의 3D데이타들을 어떻게 처리할지는... 많은 것들이 있겠네요.

2. 또한 3D 개발에 관련된 문제로 제가 잘은 모르지만, low level API인 OpenGL만으로 개발한다는 것을 상당히 힘든 내용으로 알고 있습니다.
그래서 여러 엔진과 툴들이 나와 있는데, WebGL을 지원하는 편리한 툴이 없다면 개발자들에게 외면당해 성공하기 힘들수도 있습니다.
웹 개발자가 3D까지 알기에는 힘들수도 있죠. 따라서 전문 개발자들이 많아지거나 상당히 편리한 툴이 개발되어야 승산이 있을 것 같습니다.
즉 기존의 웹개발자들과 3D관련 개발자들을 모두 수용할 수 있는 환경이 필요하다고 생각합니다.

3. 플래시, 실버라이트와 같은 RIA진영에서의 반격도 지켜봐야 할 것 같습니다.
아무리 좋은 기술이라도 시장에서 성공한다는 것은 많은 것들을 필요로 하죠.
요즘 공격적으로 플래시를 확대시키고 있는 Adobe는 mobile 시장뿐만 아니라 스크린이 있는 시장이라면 어디든 공략할 태세입니다.
MS는 아직까지는 크게 성공시킨것 같지는 않지만, 조용히 시장을 넓혀가고 있는 것은 사실입니다.
이와 같이 너무나도 커진 RIA진영에서는 WebGL에 적극적으로 대응한다면 조용히 사라질수도 있습니다.

하지만, 이런 문제들에도 불구하고, 브라우저 진영에서도 가만히 있지는 않겠죠.
우선 Webkit에서 WebGL을 지원하는 버전이 나왔습니다. 아쉽게도 현재는 Mac에서만 동작하네요. - -
Webkit r49073(October 4, 2009)에서 동작하며 자세한 내용은 http://webkit.org/blog/603/webgl-now-available-in-webkit-nightlies/를 참고하시길 바랍니다.

Webkit을 기반으로 하는 Google chrome, Safari등의 브라우저에서도 조만간 볼수 있겠네요.
오페라에서는 아직 소식은 없으나, 조만간에 모습을 선보일것 같습니다.
또한 Mozilla 재단에서 Firefox 3.7 개발 버전에서 WebGL을 지원한다고 합니다.

위와 같이 브라우저 진영에서도 HTML5등과 같이 발빠르게 대응하고 있습니다.

앞으로 넘어야 할 산도 많지만, 브라우저가 궁극적으로 가야할 산인것 같습니다.

시행착오는 있겠지만 꼭 WebGL이 성공해서 어디서나 와우, 리니지와 같은 게임도 할 수 있고, 플러그인 없이도 보다 편리하고 화려한 UI를 제공받을 수 있는 시대가 되었으면 하는 바램입니다.

참고

[Wikipedia] http://en.wikipedia.org/wiki/WebGL
[khronos] http://www.khronos.org/news/press/releases/khronos-webgl-initiative-hardware-accelerated-3d-graphics-internet
[O3D] http://code.google.com/intl/ko-KR/apis/o3d/
http://www.khronos.org/developers/library/2009_siggraph_bof_opengl/OpenGL-BOF-WebGL-Siggraph-Aug09.pdf
http://webkit.org/blog/603/webgl-now-available-in-webkit-nightlies/


0 0
Browser
이번에 삼성에서 공개한 Jet휴대폰에는 AMOLED, 800MHz Processor, Motion UI, Media Gate 3D, ActiveSync등과 같은 많은 기능들이 추가되었는데, 이중에서 관심 있는 내용이 Dolfin browser입니다.

Dolfin browser은 Apple의 Safari와 같이 렌더링 엔진으로 Webkit 3.2를 이용하고 있으며, 다음과 같은 특징을 가지고 있습니다.

1. WAP 2.0 지원
2. 대기화면 북마크 위젯
3. Multi-purpose 주소창
4. 5개의 멀티 윈도우(탭브라우징) 지원
5. RSS reader, Flash, Ad-Bloker 기능 탑재
6. SNS(e.g. Facebook, MySpace)에 One-click 접속

Webkit 렌더링엔진 채택과 Flash를 지원하기 때문에 국내의 거의 모든 웹사이트들을 이용하는데 큰 무리가 없을 것 같습니다.
삼성에서 자체개발한 브라우저인지는 알 수 없으나, 휴대폰 브라우저에 오픈 소스 프로젝트를 채용했다는 점이 큰 시사점이 아닐까 싶습니다. 요즘은 오픈소스 프로젝트를 이용하는 제조사들이 많아지고 있는 것 같습니다.

모질라에서 개발하고 있는 Fennec은 어떻게 진행되고 있는지 궁금하네요.

0 0
Mobile/Google Android

 구글 크롬 브라우저가 구글이 만든 리눅스 기반의 android 플랫폼에 탑재될 예정이라고 합니다.

TechCrunch에 의하면 Sergey Brin이 안드로이드폰에  구글 크롬 브라우저를 탑재할 예정이라고 하며, 정확한 소식은 아니지만, 11월 T-Mobile로 출시예정인 안드로이드폰인 "HTC Dream"에 탑재될 예정이라고 합니다.

사용자 삽입 이미지

지금 현재 안드로이드에는 WebKit기반 브라우저가 탑재되어 있으며, 이 엔진 또한 구글 크롬 브라우저의 렌더링 엔진으로 이용되고 있습니다. 구글 크롬 브라우저를 소개한 cartoon에서 보면 webkit을 택한 이유가 안드로이드 개발자들이 webkit은 심플한 구조를 가지고 있다고 말한게 이유였다는 얘기가 살짝 나옵니다..^^

 

여튼 구글이 본격적으로  모바일 시장에 플랫폼과 브라우저으로 뛰어드는 것으로 보입니다. 좀더 속도를 낼 것으로 보입니다.

 

0 0
Browser

 

구글에서 어제 얘기했던 오픈소스 브라우저인 구글 크롬(Google Chrome) 베타 버전을 출시했다.

영어, 한국어를 포함한 43개 언어를 지원한다. 검색 주소창에 검색어를 입력하면 자동 완성기능을 통해 추천 검색을 제안한다. 그리고 아래 그림처럼 탭 브라우징이 가능하며, 각 탭마다 주소창을 내장하고 있는 형태의 UI를 가지고 있다.

 

 

 즐겨찾기 페이지가 다른 브라우저들과는 약간 다른 layout을 가지고 있는데, 오페라 브라우저와 같이 스크린 샷을 통해서 자주 찾는 페이지를 나열하고 있으며, 검색이나, 최근 북마크 , 최근에 닫은 탭들로 구성하고 있는 독특한 layout을 가지고 있다.

 

 

 

해당 페이지 메뉴에서  페이지 메뉴를 눌러서 "바로 가기"를 바탕화면 같은 곳에 만들수 있으며, 바로가기를 더블 클릭하면 간단한 형태의 브라우징이 가능하도록 되어 있다.

 

기본적은 Webkit rendering 엔진을 사용하기 때문에 Safari와 같은 rendering을 보장하며, ActiveX는 지원되지 않는 대신에 NPAPI(Netscape Plugin Application Programming Interface)를 지원한다. Flash, Acrobat Reader, Java, Windows Media Player, Real Player, Quicktime 및 Silverlight와 같은 중요한 대부분의 plug-in을 지원한다.

페이지 로딩 및 렌더링 속도는 safari와 비슷하거나 약간 빠른 느낌이며, 타 브라우저에 비해서도 약간 빠른 느낌이다. IE6에 비해서는 월등히 빠른 느낌.. 정확한 속도 체크는 나중에 다시 언급할 계획이다.

이전에 사파리를 잠깐 써봐서 정확하게는 모르겠으나, 구글 크롬은 국내 사이트들에서는 layout이 깨지는 현상이 있다. (크게 신경 쓰이지 않는 정도이고, 베타버전이니까..^^)

Shit+Esc를 사용하여 작업관리자를 통해서 크롬에서 실행중인 모든 프로세스와 해당 작업들이 사용하는 메모리, CPU, 네트워크등의 리소스들을 볼수 있다.

 

어제 Google chrome에 관한 cartoon을 읽었는데, Google chrome에 대한 기본적인 개발 철학 및 기술적인 내용을 알수 있었다. 이에 대해서는 추후에 다시 기재할 계획이다.

 

베타 버전을 다운로드

0 0
Browser

구글에서 브라우저 시장에 진출했습니다. 그동안 소문만 무성했던 내용이었는데, 이로써 구글은 브라우저를 웹플랫폼으로서의 브라우저와 Android를 통한 mobile device platform과 OS를 모두 가지게 되는 회사가 되었네요.(이미 Android에는 Webkit기반의 브라우저가 내장되어 있었습니다.물론 구글은 단지 포팅정도만 수행했지만..)

(이미지 출처: techcrunch)

구글은 구글 블로그를 통해서 발표를 했으며, 사용자들에게 가치와 웹 혁신을 도울수 있기 때문에 'Google Chrome'베타 버전을 선보일 것이라고 합니다.  Web이 simple text page에서 rich로 발전하고, application간의 interaction등을 통해서 브라우저 개발의 필요성을 느꼈다고 한다. 구글은 이를 단순히 브라우저라고 생각하지 않고, web page와 applications를 위한 modern platform이라고 생각하고 있는 것 같다.

Google Chrome Logo 

(이미지 출처: Wikipedia)

현재의 브라우저에 만족하지 않고 Next generation of web을 위한 powerful한 환경을 제공할 것이며, 이번 베타는 시작에 불과하다는 군요. 이 프로젝트를 내부적으로 2년동안 진행되었으며,  Mac과 Linux에서도 동작할 것입니다. 그리고, Apple의 Webkit과 Mozilla의 Firefox의 component를 이용했다고 합니다.

 

이로써 MS의 IE, Apple의 Safari, Mozilla의 Firefox, Opera의 Opera로 되어 있는 Desktop browser시장에 영향을 미칠 것으로 보인다. Mobile 영역으로의 확대도 생각해볼 수 있을 것이다.

 

이로써 구글은 막강한 검색엔진과 웹서비스들, 그리고 linux기반의 mobile platform인 Android, 웹플랫폼으로써의 Google crome 브라우저를 모두 가지게 되는 회사로 거듭나게 되었다. 즉, Mobile환경에서는 Google의 제품만을 이용해서도 막강한 스마트폰을 만들수 있는 가능성이 생긴것이다. 물론 아직 출시되지 않아 성능면이나 기능면에서는 정확하게 알수없지만..

MS와는 다르게 Google만의 시각으로 시장을 접근하는 것이 Google의 매력이 아닐까싶다.

 

점점 더 Google이라는 회사가 무섭게 느껴진다.

 

1 1
1
블로그 이미지

TV, Platform, Browser, Coffee.... twitter :@myideom

smartech

티스토리 툴바