'폰트렌더러'에 해당되는 글 15건

  1. 2009/05/13 노가다의 산물
  2. 2009/05/06 폰트렌더러 완성
  3. 2009/05/05 폰트 렌더러 완성 단계..
  4. 2009/05/05 그림자 구현
  5. 2009/04/29 외곽선 구현 (2)
  6. 2009/04/28 Glow 효과 구현 (3)
  7. 2009/04/26 머리 빠지는 구만.. (1)
  8. 2007/06/23 폰트렌더러 근황.. (2)
  9. 2007/06/17 Glow효과에 사용할 가중치 계산..
  10. 2007/06/17 폰트 렌더러 클래스 다이어그램 (5)
사용자 삽입 이미지

클릭하세요.
























목표했던 모든 효과 구현을 완료했다. 아.. 노가다..

대략 그림자가 많이 마음에 안들기에 그림자 렌더링 방식을 다른걸로 바꿔야겠다.

위 그림을 클릭하면 나오는 모든 효과가 다 된다.

아직 한두가지 정도 마무리 해야할 추가사항이 있기 때문에 그것을 완료한 다음에 릴리즈 할 생각이다.
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)
2009/05/13 21:24 2009/05/13 21:24
사용자 삽입 이미지

클릭하세요

























남은 정렬과 클리핑까지 구현하여 원래 쓰던 IDX3DFont를 완전 대체 했다.
추가적으로 이텔릭체와 블러기능 그리고 IDX3DFont의 workbreak, calrect, expandtabs구현이 남았는데 이건 천천히..

다 만들고 나니 기존의 IDX3DFont하고는 다르게 성능이 많이 올라갔다. 역시 IDX3DFont는 발로 만든거였던듯...

ps. 약 2주 반이면 만들걸 여태 귀찮아서 이제서야 만들었다. 덜덜
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)
2009/05/06 07:15 2009/05/06 07:15
캐삽질을 한 보람이 있다. 기존보다 무려 약 200프레임정도 성능향상이 생겼다..

뭐 200프레임이라고 해봤자 눈꼽만치이지만.. 그래도 나중에 구현할 문장 단위 캐싱을 하면 더 성능이 올라갈 확신을 갖을수 있게 되었다.

사용자 삽입 이미지

Before

사용자 삽입 이미지

After


각종 효과도 넣을수 있으므로 아래와 같이 이상한 짓거리도 가능하다.
사용자 삽입 이미지

클릭하세요


























기존 코드에 각종 효과에 대한 꾸민게 없으니 기본값으로 렌더링을 하기 때문에 저렇게 좀 지저분하게 나오지만 적절히 색을 넣어주면 그럭저럭 예쁘게 나올수 있을 것이라고 생각된다.

아직 완성은 아니고 보시다시피 정렬도 해야하고 클리핑도 남아있다.

거기까지 하면 기존 기능 대체는 완료 될듯 하다..
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)
2009/05/05 01:33 2009/05/05 01:33
어떻게 하면 예쁘게 그림자를 그릴수 있을까 생각을 해봤지만 딱히 좋은 방법은 떠오르지는 않았다.
이미지를 그림자 방향으로 늘린후 안티앨리어싱을 준걸로 써볼까도 했지만...

딱히 예쁜것도 아니고 중요한건 구현하기가 까다롭더라..

그래서 그냥 그림자 방향으로 "거리"와 "깊이"와 "감쇠"를 파라메터로 줘서 그냥 찍어줬다.

좌측, 우측, 상단, 하단, 좌상, 좌하, 우상, 우하 로 전부 가능하게 구현을 했다.
사용자 삽입 이미지

클릭하세요
























역시 나쁘지는 않은듯..
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)
2009/05/05 01:26 2009/05/05 01:26
외곽선을 어떻게 하면 예쁘게 그릴까 하며 여러가지를 찾아봤지만..
그리고 freetype에서 제공하는 FT_Stroke류의 함수를 사용해서 렌더링해도 그닥 만족할 만한 품질이 안나왔다.
FT_Stroke류의 함수를 사용해서 렌더링을 해도 어느정도 작은 글자에서는 외곽선을 뿌리나.. 안뿌리나.. 똑같이 나오는 괴현상이 ㄱ-

그래서 과감히 버리고 직접 그리는 방식으로 전환을 했다.
처음에는 적당히 좌우상하로 흔들어서 뿌려줄 생각도 했지만 글자가 커짐에 따라서 가장자리가 너무 딱딱해지는 단점이 생겼다.

제한된 작은 크기의 글자를 뿌린다면 딱딱해도 그럭저럭 봐줄만 하겠지만 지금 만들고 있는건 그런게 아니니... 과감히 버리고..

블러를 먹여볼까도 생각했지만 블러는 가장자리가 너무 희미해지는 단점이 있다.

그래서... 저번에 만든 Glow를 배껴응용해서 가장자리에서는 가중치가 확 떨어지고 가운데에서 어느정도 퍼지는 곳까지는 가중치가 적당히 상향을 유지하는 값으로 Glow를 렌더링하여 외곽선을 구현했다.

대략 아래와 같은 정도의 파라메터를 주었다.

params.nGlowDepth = nDepth;
params.fGlowBrightness = 1.0f;
params.fGlowFactor = 1.398f + 0.1f * nDepth;

그랬더니 아래와 같은 적절한 품질이 나왔다.

사용자 삽입 이미지

외곽선

사용자 삽입 이미지

원본+외곽선



아래는 확대해본 이미지이다.
사용자 삽입 이미지
















나름 그럭저럭 괜찮은듯?
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)
2009/04/29 11:55 2009/04/29 11:55
나름 삽질을 통하여 Glow 효과를 구현 했다.
Glow를 출력 할 때 몇가지 파라메터가 있는데 다음과 같다.

GlowDepth : 최대로 Glow가 퍼질 거리
GlowFactor : 브러시 밀도 Factor
GlowBrightness : 최대 밝기
일단 저렇게 파라메터를 주게 해놨는데 정작 가장 예쁘게 나올수 있는 값들은 잘 모르겠다는거..

적당히 아래와 같이 주니 그 아래와 같은 그림이 나온다..

GlowDepth = 2
GlowFactor = 1.398
GlowBrightness = 1.3

사용자 삽입 이미지

클릭하세요
























얼마나 적절하고 예쁘게 나올지는 디자이너의 영역이니 패스~

이제 남은건 그림자와 외곽선.. 외곽선이 좀 문젠데...
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)
2009/04/28 17:56 2009/04/28 17:56
이런 시버먹을넘의 freetype님..

내가 멍청해서 이해를 못하는 것일까요. 아니면 글꼴 만는놈이 문제인걸까요. 아니면 님하가 문제인가요.

폰트제작에 대한 책을 좀 사서 봐야하나..

freetype으로 글꼴 출력하기 한번 힘들구나...

Glyph Matrix가 젤로 헷갈렸어요.

어떻게 해서 대략 되긴했는데..

난 제일 이해가 안가는게 왜 ascender값이 특정 폰트 크기에서 1픽셀씩 삑사리나고 ㅈㄹ인거냐고..

orig값을 찾기 위해 계산한 값이 내가 생각하기로는 정확한데 왜 삑사리가 나는지 모르겠다.

여튼 아래와 같은 방식으로 미리 렌더링된 폰트를 가지고 텍스처의 옵셋을 이용하여 화면에 출력할 예정이다.
대략 아래와 같은 텍스처와 옵셋정보를 파일로 저장하고 불러오는 기능도 만들까 생각중이다.
그러면 처음 구동시 텍스처에 폰트를 그리는 로드는 많이 줄어들 것이다.

대충 중간선과 밑줄까지는 구현했고.. 젤로 귀찮은 그림자와 글로우, 테두리가 남았다.
원래는 이텔릭체는 구현 안할려고 했는데(이텔릭체라는것이 그릴려는 폰트의 크기를 넘어서서 렌더링이 되므로 처음에 구상했던 방식하고 좀 안맞아서) 이번에 구현한 방식이 이텔릭체와 같이 기본 크기를 넘어서도 되도록(사실은 미처 몰랐다가 구현하다가 깨달았다능..) 구현이 되었으므로 이텔릭체도 지원할까 생각만 중이다.

위에서 언급한 그림자와 글로우는 멀티패스로 렌더링할 예정이다. 즉, 원래 글자와 글로우, 그림자를 각기 분리하여 렌더링하여 아래 그림과 같이 텍스처에 저장후 최종 렌더링 할때 합성해서 보여줄 예정이다. 사실 미리 때려박아도 되긴 하는데... 너무 오래되서 몰랐는데 내가 글로우와 그림자의 색상을 실시간으로 변경 할 수 있게 설계를 해놨더라...그래서 별수 없이 분리하여 멀티패스로 할 예정이다. 그러고보니 글자 배경도 실시간으로 변경 할 수 있게 해놨더라..


사용자 삽입 이미지

클릭하세요

























ps. 어라.. 원래 이곳이 없었던거 같은데.. 여튼 이곳에서 좌표에 대해서 잘 설명하니 다시 읽어봐야겠다.
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)
2009/04/26 02:31 2009/04/26 02:31
열심히 달리고 있습니다..
어제와 오늘 작업해서 기본적인 폰트와 글리프 매니징을 하고..
굵게, 밑줄과 가운데선을 렌더링 하는 부분까지 작업을 했네요..

이제 남은건 글로우와 그림자렌더링을 하고..

나머지 배경색, 정렬, 글자색 등을 적용하여 최종 텍스쳐에 렌더링을 하고
이를 매니징해서 화면에 출력하는 부분이 남았네요..

네.  맞습니다.. 사실 텍스쳐에 렌더링하고 화면에 표시하는게 중요하죠 ㄱ-

오랜만에 머리 좀 쓸려고 했더만 머리가 아프네요.. 덜덜

저는 슬슬 저녁을 먹을 준비를 해야겠군요..

어제 저녁부터 지금까지 아무곳도 안먹었더니 배고프네요 ㄱ-

(이래서 집에서는 코딩 안할려고 합니다.. 누가 암말도 안하면 밥도 안먹고 마음이 풀릴때까지 코딩을 하니 완전 폐인되죠 ㄱ-)
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)
2007/06/23 16:35 2007/06/23 16:35
#include <math.h>
#include <stdio.h>

void main()

  float a = 1.398f;//표준편차
  float x = 0.0f;//x값
  float xInc = 0.35f;//x의 증가값
  int nMax = 10;//생성할 최대 개수
 
  for (int i = 0; i < nMax; i++)
  {
    float re = exp(float(-((x*x)/2*(a*a))));   

    printf("i : %d, %f\n", i, re);

    x += xInc;

  } 

}

이걸로 계산 해봤는데 그럭저럭 괜찮은 값들이 뽑힌다.. 이 함수로 사용해야지..

크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)
2007/06/17 18:00 2007/06/17 18:00
사용자 삽입 이미지


UML은 처음 써보는데 기호를 맞게 쓴건지 모르겠네요 ㄱ-

여튼 위의 구조를 가질 예정입니다.. 어디까지 예정이므로 다 뒤집어질수도 있습니다 ㅋㅋ

위의 구조를 다시 한번 면밀히 검도해 보고 계속 작업을 진행해야겠습니다.
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)
2007/06/17 14:43 2007/06/17 14:43