Merge pull request #400 from 13rac1/fix-iphone-book-url
Update URL for iPhone 3D Programming, O’Reilly
This commit is contained in:
Patricio Gonzalez Vivo
GitHub
commit
e3cfcb20d4
|
|
@ -169,7 +169,7 @@ pct = pow(distance(st,vec2(0.4)),distance(st,vec2(0.6)));
|
|||
|
||||
|
||||
|
||||
距离场几乎可以用来画任何东西。显然，图形越复杂，方程也越复杂。但是一旦你找到某个特定图形的公式，就很容易添加图形或应用像过渡边界的效果。正因如此，距离场经常用于字体渲染，例如[Mapbox GL Labels](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817), [Matt DesLauriers](https://twitter.com/mattdesl) [Material Design Fonts](http://mattdesl.svbtle.com/material-design-on-the-gpu) 和 [as is describe on Chapter 7 of iPhone 3D Programming, O’Reilly](http://chimera.labs.oreilly.com/books/1234000001814/ch07.html#ch07_id36000921).
|
||||
距离场几乎可以用来画任何东西。显然，图形越复杂，方程也越复杂。但是一旦你找到某个特定图形的公式，就很容易添加图形或应用像过渡边界的效果。正因如此，距离场经常用于字体渲染，例如[Mapbox GL Labels](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817), [Matt DesLauriers](https://twitter.com/mattdesl) [Material Design Fonts](http://mattdesl.svbtle.com/material-design-on-the-gpu) 和 [as is described in Chapter 7 of iPhone 3D Programming, O’Reilly](https://www.oreilly.com/library/view/iphone-3d-programming/9781449388133/ch07.html#ch07_id36000844).
|
||||
|
||||
看看下面的代码：
|
||||
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@ Im Hinblick auf die erforderliche Rechenleistung kann die [```sqrt()```](../glos
|
|||
|
||||
|
||||
|
||||
Distanzfelder lassen sich nutzen, um beinahe jede Art von Form zu zeichnen. Je komplexer die gewünschte Form, desto komplexer fällt in der Regel auch die dafür benötigte Distanzformel aus. Doch sobald Du die benötigte Distanzformel beisammenhast, wird es sehr einfach, gewünschte Effekte darauf anzuwenden, beispielweise weiche Kanten oder mehrfache Umrisse. Aus diesem Grund sind Distanzfelder u.a. bei der Schriftenerzeugung sehr populär, nachzulesen etwa bei [Mapbox GL Labels](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817), bei [Matt DesLauriers](https://twitter.com/mattdesl) und bei [Material Design Fonts](http://mattdesl.svbtle.com/material-design-on-the-gpu).
|
||||
Distanzfelder lassen sich nutzen, um beinahe jede Art von Form zu zeichnen. Je komplexer die gewünschte Form, desto komplexer fällt in der Regel auch die dafür benötigte Distanzformel aus. Doch sobald Du die benötigte Distanzformel beisammenhast, wird es sehr einfach, gewünschte Effekte darauf anzuwenden, beispielweise weiche Kanten oder mehrfache Umrisse. Aus diesem Grund sind Distanzfelder u.a. bei der Schriftenerzeugung sehr populär, nachzulesen etwa bei [Mapbox GL Labels](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817), bei [Matt DesLauriers](https://twitter.com/mattdesl), bei [Material Design Fonts](http://mattdesl.svbtle.com/material-design-on-the-gpu) und in [Chapter 7 of iPhone 3D Programming, O’Reilly](https://www.oreilly.com/library/view/iphone-3d-programming/9781449388133/ch07.html#ch07_id36000844).
|
||||
|
||||
Schau Dir den folgenden Programmcode an.
|
||||
|
||||
|
|
|
|||
|
|
@ -163,7 +163,7 @@ pct = pow(distance(st,vec2(0.4)),distance(st,vec2(0.6)));
|
|||
|
||||
|
||||
|
||||
با استفاده از فیلد فاصله تقریبا میتوان هر چیزی کشید. مشخصا هر چه شکل پیچیده تر باشد، معادله آن پیچیده تر خواهد بود، اما وقتی فرمول فیلد فاصله برای رسم یک شکل را بدست آورید، خیلی ساده میتوان آن را با افکت های دیگر ترکیب یا اضافه کرد، مانند لبه های نرم یا outLine ها . برای همین استفاده از فیلد فاصله در رندر کردن فونت ها بسیار رایج است, مانند [Mapbox GL Labels](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817), [Matt DesLauriers](https://twitter.com/mattdesl) [Material Design Fonts](http://mattdesl.svbtle.com/material-design-on-the-gpu) و [as is described on Chapter 7 of iPhone 3D Programming, O’Reilly](http://chimera.labs.oreilly.com/books/1234000001814/ch07.html#ch07_id36000921).
|
||||
با استفاده از فیلد فاصله تقریبا میتوان هر چیزی کشید. مشخصا هر چه شکل پیچیده تر باشد، معادله آن پیچیده تر خواهد بود، اما وقتی فرمول فیلد فاصله برای رسم یک شکل را بدست آورید، خیلی ساده میتوان آن را با افکت های دیگر ترکیب یا اضافه کرد، مانند لبه های نرم یا outLine ها . برای همین استفاده از فیلد فاصله در رندر کردن فونت ها بسیار رایج است, مانند [Mapbox GL Labels](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817), [Matt DesLauriers](https://twitter.com/mattdesl) [Material Design Fonts](http://mattdesl.svbtle.com/material-design-on-the-gpu) و as is described in [Chapter 7 of iPhone 3D Programming, O’Reilly](https://www.oreilly.com/library/view/iphone-3d-programming/9781449388133/ch07.html#ch07_id36000844).
|
||||
|
||||
نگاهی به کد زیر بیاندازید.
|
||||
|
||||
|
|
@ -226,6 +226,6 @@ float a = atan(pos.y,pos.x);
|
|||
|
||||
تبریک! بخش سختی را گذراندید! کمی استراحت کنید و اجازه دهید این مفاهیم جا بیوفتد، ساخت اشکال در نرم افزار Processing آسان است، ولی اینجا خیر. در سرزمین شیدر ها طراحی شکل پیچیده است، و سازگاری با این الگوی جدید میتواند طاقت فرسا باشد!
|
||||
|
||||
در آخر این صفحه به شما [PixelSpirit Deck](https://patriciogonzalezvivo.github.io/PixelSpiritDeck/) معرفی شده. این کارت ها به شما توابع شکل دهی را بخوبی یاد میدهند. از آن ها در طرح ها و شیدر های خودتان استفاده کنید. این دسته کارت دارای یک منحنی یادگیری تدریجی است. بنابر این تمرین کردن یک کارت در هر روز میتواند تا 30 روز شما را به چالش بکشد.
|
||||
در آخر این صفحه به شما [PixelSpirit Deck](https://patriciogonzalezvivo.github.io/PixelSpiritDeck/) معرفی شده. این کارت ها به شما توابع شکل دهی را بخوبی یاد میدهند. از آن ها در طرح ها و شیدر های خودتان استفاده کنید. این دسته کارت دارای یک منحنی یادگیری تدریجی است. بنابر این تمرین کردن یک کارت در هر روز میتواند تا 30 روز شما را به چالش بکشد.
|
||||
|
||||
اکنون که میدانید چگونه اشکال را رسم کنید، مطمئنم ایده های جدید در ذهنتان ایجاد میشود. در فصل بعدی، نحوه حرکت، چرخش و مقیاس پذیری اشکال را خواهید آموخت. و امکان ترکیب آنان را خواهید داشت.
|
||||
|
|
|
|||
|
|
@ -208,7 +208,7 @@ Voici autre une technique permettant de créer un champ de distances basée sur
|
|||
|
||||
Les champs de distance permettent de dessiner à peu près n'importe quoi.
|
||||
Evidemment, plus la forme est complexe, plus l'équation sera complexe mais une fois qu'on a la formule d'une forme en particulier, il devient assez simple de la combiner avec d'autres et/ou de lui appliquer des effets comme des bords lissés, ou plusieurs contours.
|
||||
C'est pourquoi les champs de distances sont utilisés pour le rendu des polices de caractères: [Mapbox GL Labels](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817), [Matt DesLauriers](https://twitter.com/mattdesl), [Material Design Fonts](http://mattdesl.svbtle.com/material-design-on-the-gpu) et [comme expliqué au chapitre 7 de "iPhone 3D Programming", O’Reilly](http://chimera.labs.oreilly.com/books/1234000001814/ch07.html#ch07_id36000921).
|
||||
C'est pourquoi les champs de distances sont utilisés pour le rendu des polices de caractères: [Mapbox GL Labels](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817), [Matt DesLauriers](https://twitter.com/mattdesl), [Material Design Fonts](http://mattdesl.svbtle.com/material-design-on-the-gpu) et [comme expliqué au chapitre 7 de "iPhone 3D Programming", O’Reilly](https://www.oreilly.com/library/view/iphone-3d-programming/9781449388133/ch07.html#ch07_id36000844).
|
||||
|
||||
Prenez le code suivant:
|
||||
|
||||
|
|
|
|||
|
|
@ -154,7 +154,7 @@ Dalam hal daya kompthreadi, fungsi [`sqrt()`](../glossary/?search=sqrt) - dan se
|
|||
|
||||
|
||||
|
||||
Bidang jarak dapat digunakan untuk menggambar hampir semua hal. Jelas, semakin kompleks suatu bentuk, semakin rumit persamaannya, tetapi setelah Anda memiliki rumus untuk membuat bidang jarak dari bentuk tertentu, sangat mudah untuk menggabungkan dan / atau menerapkan efek padanya, seperti tepi halus dan beberapa garis tepi . Karenanya, kolom jarak menjadi populer dalam rendering font, seperti [Label GL Kotak Peta](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817), [Matt DesLauriers](https://twitter.com/mattdesl) [Font Desain Material](http://mattdesl.svbtle.com/material-design-on-the-gpu) dan [seperti yang di jelaskan di Bab 7 di buku Phone 3D Programming, O’Reilly](http://chimera.labs.oreilly.com/books/1234000001814/ch07.html#ch07_id36000921).
|
||||
Bidang jarak dapat digunakan untuk menggambar hampir semua hal. Jelas, semakin kompleks suatu bentuk, semakin rumit persamaannya, tetapi setelah Anda memiliki rumus untuk membuat bidang jarak dari bentuk tertentu, sangat mudah untuk menggabungkan dan / atau menerapkan efek padanya, seperti tepi halus dan beberapa garis tepi . Karenanya, kolom jarak menjadi populer dalam rendering font, seperti [Label GL Kotak Peta](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817), [Matt DesLauriers](https://twitter.com/mattdesl) [Font Desain Material](http://mattdesl.svbtle.com/material-design-on-the-gpu) dan [seperti yang di jelaskan di Bab 7 di buku Phone 3D Programming, O’Reilly](https://www.oreilly.com/library/view/iphone-3d-programming/9781449388133/ch07.html#ch07_id36000844).
|
||||
|
||||
Perhatikan kode berikut.
|
||||
|
||||
|
|
@ -220,4 +220,4 @@ Selamat! Anda telah berhasil melewati bagian yang sulit! Beristirahatlah dan bia
|
|||
|
||||
Di bagian akhir bab ini, Anda akan menemukan tautan ke [PixelSpirit Deck](https://patriciogonzalezvivo.github.io/PixelSpiritDeck/) setumpuk kartu ini akan membantu Anda mempelajari fungsi SDF baru, menyusunnya ke dalam desain dan menggunakannya di shader Anda. Dek memiliki kurva belajar progresif, jadi mengambil satu kartu sehari dan mengerjakannya akan mendorong dan menantang keterampilan Anda selama berbulan-bulan.
|
||||
|
||||
Sekarang Anda tahu cara menggambar bentuk, saya yakin ide-ide baru akan muncul di benak Anda. Di bab berikut, Anda akan mempelajari cara memindahkan, memutar, dan mengatur skala bentuk. Ini akan memungkinkan Anda membuat komposisi!
|
||||
Sekarang Anda tahu cara menggambar bentuk, saya yakin ide-ide baru akan muncul di benak Anda. Di bab berikut, Anda akan mempelajari cara memindahkan, memutar, dan mengatur skala bentuk. Ini akan memungkinkan Anda membuat komposisi!
|
||||
|
|
|
|||
|
|
@ -163,7 +163,7 @@ In termini di potenza computazionale, la funzione [```sqrt()```](../glossary/?se
|
|||
|
||||
|
||||
|
||||
I campi di distanza possono essere usati per disegnare quasi qualsiasi cosa. Ovviamente, più una forma è complessa, più sarà complicata la sua equazione, ma una volta che avete la formula per creare un campo di distanza di una certa forma è molto facile combinare e/o applicare degli effetti ad essa, come lati lisci e profili multipli. Per questo motivo, i campi di distanza hanno molto successo nella rappresentazione dei caratteri (font), come [Mapbox GL Labels](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817), [Matt DesLauriers](https://twitter.com/mattdesl) [Material Design Fonts](http://mattdesl.svbtle.com/material-design-on-the-gpu) e come è descritto nel [Capitolo 7 del libro "iPhone 3D Programming", O’Reilly](http://chimera.labs.oreilly.com/books/1234000001814/ch07.html#ch07_id36000921)
|
||||
I campi di distanza possono essere usati per disegnare quasi qualsiasi cosa. Ovviamente, più una forma è complessa, più sarà complicata la sua equazione, ma una volta che avete la formula per creare un campo di distanza di una certa forma è molto facile combinare e/o applicare degli effetti ad essa, come lati lisci e profili multipli. Per questo motivo, i campi di distanza hanno molto successo nella rappresentazione dei caratteri (font), come [Mapbox GL Labels](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817), [Matt DesLauriers](https://twitter.com/mattdesl) [Material Design Fonts](http://mattdesl.svbtle.com/material-design-on-the-gpu) e come è descritto nel [Capitolo 7 del libro "iPhone 3D Programming", O’Reilly](https://www.oreilly.com/library/view/iphone-3d-programming/9781449388133/ch07.html#ch07_id36000844)
|
||||
|
||||
Osservate il codice seguente.
|
||||
|
||||
|
|
|
|||
|
|
@ -166,7 +166,7 @@ pct = pow(distance(st,vec2(0.4)),distance(st,vec2(0.6)));
|
|||
* [Mapbox GL Labels](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817)
|
||||
* [Matt DesLauriers](https://twitter.com/mattdesl)
|
||||
* [Material Design Fonts](http://mattdesl.svbtle.com/material-design-on-the-gpu)
|
||||
* [Chapter 7 of iPhone 3D Programming, O’Reilly](http://chimera.labs.oreilly.com/books/1234000001814/ch07.html#ch07_id36000921)
|
||||
* [Chapter 7 of iPhone 3D Programming, O’Reilly](https://www.oreilly.com/library/view/iphone-3d-programming/9781449388133/ch07.html#ch07_id36000844)
|
||||
|
||||
|
||||
下記のコードをみてください
|
||||
|
|
|
|||
|
|
@ -2,17 +2,17 @@
|
|||
|
||||
## 도형
|
||||
|
||||
드디어! 우리는 이 순간을 위해 기술을 쌓아왔다! 대부분의 GLSL 기초이론, 자료형 및 함수들을 배웠다. 다양항 쉐이핑 함수들을 반복해서 연습했다.
|
||||
이제 이 모든 것을 종합해야 할 때 이므로 도전해보아라!
|
||||
드디어! 우리는 이 순간을 위해 기술을 쌓아왔다! 대부분의 GLSL 기초이론, 자료형 및 함수들을 배웠다. 다양항 쉐이핑 함수들을 반복해서 연습했다.
|
||||
이제 이 모든 것을 종합해야 할 때 이므로 도전해보아라!
|
||||
이 챕터에서는 간단한 도형을 병렬/절차적 방식으로 그리는 방법에 대해 알아볼 것이다.
|
||||
|
||||
### 직사각형
|
||||
|
||||
우리에게 정사각형을 그리는 숙제가 주어졌고, 수학수업에서 사용했던 모눈 종이를 갖고있다고 상상해보자.
|
||||
용지 크기는 10x10이고 정사각형은 8x8이어야 한다. 어떻게 할 것인가?
|
||||
우리에게 정사각형을 그리는 숙제가 주어졌고, 수학수업에서 사용했던 모눈 종이를 갖고있다고 상상해보자.
|
||||
용지 크기는 10x10이고 정사각형은 8x8이어야 한다. 어떻게 할 것인가?
|
||||
|
||||
|
||||
첫 번째 행과 마지막 행, 첫 번째 열과 마지막 열을 제외한 모든 것을 칠할 것이다. 그렇지 않은가?
|
||||
첫 번째 행과 마지막 행, 첫 번째 열과 마지막 열을 제외한 모든 것을 칠할 것이다. 그렇지 않은가?
|
||||
이것이 쉐이더와 어떤 관계가 있나? 그리드 용지의 각각의 작은 정사각형은 쓰레드(픽셀)이다. 각각의 작은 사각형은 체스판의 좌표처럼 자신의 위치를 알고 있다. 이전 챕터에서는 *x*와 *y*를 *빨간색*과 *녹색* 컬러 채널에 매핑하고 0.0과 1.0 사이의 좁은 2차원 영역을 사용하는 방법을 배웠다. 어떻게 이걸 이용해서 빌보드 중앙에 있는 정사각형을 그릴 수 있는가?
|
||||
|
||||
먼저, 전 영역에 걸치는 `if` 문 의사 코드를 작성해보자. 이를 위한 원리는 그리드 페이퍼 시나리오에 대한 우리의 생각과 매우 유사하다.
|
||||
|
|
@ -44,15 +44,15 @@ void main(){
|
|||
}
|
||||
```
|
||||
|
||||
[`step()`](../glossary/?search=step) 함수는 0.1 미만의 모든 픽셀을 검은색(`vec3(0.0)`)으로, 나머지 픽셀을 흰색(`vec3(1.0`)으로 바꾼다.
|
||||
`left`와 `bottom`의 곱셈은 논리 `AND` 연산으로 작동하며, 둘 다 1.0이어야 1.0을 반환한다.
|
||||
[`step()`](../glossary/?search=step) 함수는 0.1 미만의 모든 픽셀을 검은색(`vec3(0.0)`)으로, 나머지 픽셀을 흰색(`vec3(1.0`)으로 바꾼다.
|
||||
`left`와 `bottom`의 곱셈은 논리 `AND` 연산으로 작동하며, 둘 다 1.0이어야 1.0을 반환한다.
|
||||
이렇게 하면 캔버스의 아래쪽과 왼쪽에 두 개의 검은색 선이 그려지게 된다.
|
||||
|
||||
|
||||
|
||||
위 코드에서는 각 축(왼쪽 및 아래쪽)이 서로 중복되는 부분이 있다.
|
||||
다음과 같이 두 개의 값을 [`step()`](../glossary/?search=step)으로 직접 한번에 전달함으로써 더 짧은 코드를 작성할 수 있다. 그 코드는 다음과 같다.
|
||||
|
||||
위 코드에서는 각 축(왼쪽 및 아래쪽)이 서로 중복되는 부분이 있다.
|
||||
다음과 같이 두 개의 값을 [`step()`](../glossary/?search=step)으로 직접 한번에 전달함으로써 더 짧은 코드를 작성할 수 있다. 그 코드는 다음과 같다.
|
||||
|
||||
```glsl
|
||||
vec2 borders = step(vec2(0.1),st);
|
||||
float pct = borders.x * borders.y;
|
||||
|
|
@ -62,8 +62,8 @@ float pct = borders.x * borders.y;
|
|||
|
||||
<div class="codeAndCanvas" data="rect-making.frag"></div>
|
||||
|
||||
*21-22 번째 줄*의 주석을 제거하고, `st` 좌표를 반전시켜 동일한 [`step()`](../glossary/?search=step) 함수를 반복하는 방법을 확인해보아라.
|
||||
이렇게 하면 `vec2(0.0, 0.0)`가 오른쪽 상단 모서리에 있게 된다.
|
||||
*21-22 번째 줄*의 주석을 제거하고, `st` 좌표를 반전시켜 동일한 [`step()`](../glossary/?search=step) 함수를 반복하는 방법을 확인해보아라.
|
||||
이렇게 하면 `vec2(0.0, 0.0)`가 오른쪽 상단 모서리에 있게 된다.
|
||||
이것은 페이지를 넘기고 이전 절차를 반복하는 것과 동일한 디지털 방법이다.
|
||||
|
||||
|
||||
|
|
@ -78,28 +78,28 @@ color = vec3(bl.x * bl.y * tr.x * tr.y);
|
|||
|
||||
흥미롭지 않은가? 이 기법은 [`step()`](.../glossary/?)과 곱셈을 사용하여 논리 연산을 수행하고 좌표를 뒤집는 기술이다.
|
||||
|
||||
계속하기 전에 다음 연습을 해보아라.
|
||||
계속하기 전에 다음 연습을 해보아라.
|
||||
|
||||
* 사각형의 크기 및 비율을 변경해보시오.
|
||||
|
||||
* 동일한 코드로 실험하되 [`step()`](../glossary/?search=step) 대신 [`smoothstep()`](../glossary/?search=smoothstep)를 사용해보시오.
|
||||
* 동일한 코드로 실험하되 [`step()`](../glossary/?search=step) 대신 [`smoothstep()`](../glossary/?search=smoothstep)를 사용해보시오.
|
||||
값을 변경함으로써 흐릿한 가장자리에서 우아하고 부드러운 경계선으로 바뀔 것 이다.
|
||||
|
||||
* [`floor()`](../glossary/?search=floor)를 사용해서 동일하게 구현해보시오.
|
||||
|
||||
* 가장 마음에 드는 구현체를 향후 재사용할 수 있도록 함수로 만드시오.
|
||||
* 가장 마음에 드는 구현체를 향후 재사용할 수 있도록 함수로 만드시오.
|
||||
함수를 유연하고 효율적으로 설계하시오.
|
||||
|
||||
|
||||
* 직사각형의 외곽선만 그리는 다른 함수를 만들어보시오.
|
||||
|
||||
* 어떻게 같은 평면에 다른 직사각형을 배치하고 움직일 수 있다고 생각하는가?
|
||||
* 어떻게 같은 평면에 다른 직사각형을 배치하고 움직일 수 있다고 생각하는가?
|
||||
그 방법을 알게 된다면, [Piet Mondrian](http://en.wikipedia.org/wiki/Piet_Mondrian) 그림을 닮은 직사각형과 색을 구성하여 실력을 뽐내보시오.
|
||||
|
||||
|
||||
|
||||
### 원
|
||||
|
||||
격자 종이에 정사각형을 그리는것과 데카르트 좌표 위에 직사각형을 그리는 것은 쉽지만, 원은 "픽셀 단위" 알고리즘이 필요하기 때문에 다른 접근법이 필요히다.
|
||||
격자 종이에 정사각형을 그리는것과 데카르트 좌표 위에 직사각형을 그리는 것은 쉽지만, 원은 "픽셀 단위" 알고리즘이 필요하기 때문에 다른 접근법이 필요히다.
|
||||
한 가지 방법은, 공간 좌표를 *다시 매핑*하고 [`step()`](../glossary/?search=step) 함수를 사용하여 원을 그릴 수 있다.
|
||||
|
||||
어떻게? 먼저, 수학 시간의 격자 종이를 다시 떠올리며 컴퍼스를 원하는 반지름만큼 열고 간단한 회전으로 원의 가장자리를 추적하여 그려보자.
|
||||
|
|
@ -110,20 +110,20 @@ color = vec3(bl.x * bl.y * tr.x * tr.y);
|
|||
|
||||
|
||||
|
||||
거리를 계산하는 방법에는 여러 가지가 있는데, 가장 쉬운 방법은 두 점(이 경우는 픽셀좌표들과 캔버스의 중심)의 차이의 [`length()`](../glossary/?search=length)를 내부적으로 계산하는 [`distance()`](../glossary/?search=distance) 함수를 사용하는 것이다.
|
||||
거리를 계산하는 방법에는 여러 가지가 있는데, 가장 쉬운 방법은 두 점(이 경우는 픽셀좌표들과 캔버스의 중심)의 차이의 [`length()`](../glossary/?search=length)를 내부적으로 계산하는 [`distance()`](../glossary/?search=distance) 함수를 사용하는 것이다.
|
||||
[`length()`](../glossary/?search=length) 함수는 특별한것은 없고, 내부적으로 제곱근([`sqrt()`](../glossary/?search=sqrt))을 사용하는 빗변 방정식일 뿐이다.
|
||||
|
||||
|
||||
|
||||
[`distance()`](../glossary/?search=distance), [`length()`](../glossary/?search=length) 또는 [`sqrt()`](../glossary/?search=sqrt)를 사용하여 평면의 중앙까지의 거리를 계산할 수 있다.
|
||||
[`distance()`](../glossary/?search=distance), [`length()`](../glossary/?search=length) 또는 [`sqrt()`](../glossary/?search=sqrt)를 사용하여 평면의 중앙까지의 거리를 계산할 수 있다.
|
||||
아래 코드는 이 세 가지 함수가 정확히 동일한 결과를 반환한다는 당연한 사실을 포함하고 있다.
|
||||
|
||||
* 주석을 설정/해제 해보면서 동일한 결과를 얻기 위한 다양한 방법을 시도해 보시오
|
||||
|
||||
<div class="codeAndCanvas" data="circle-making.frag"></div>
|
||||
|
||||
위 예제는 중앙까지의 거리를 픽셀의 색 밝기에 대입한다. 픽셀이 중앙에 가까울수록 어두워진다.
|
||||
중심(`vec2(0.5, 0.5)`)에서 최대 거리가 0.5를 거의 넘지 않기 때문에 값이 너무 높아지지 않는다.
|
||||
위 예제는 중앙까지의 거리를 픽셀의 색 밝기에 대입한다. 픽셀이 중앙에 가까울수록 어두워진다.
|
||||
중심(`vec2(0.5, 0.5)`)에서 최대 거리가 0.5를 거의 넘지 않기 때문에 값이 너무 높아지지 않는다.
|
||||
이 예제를 깊게 고민해 보시오.
|
||||
|
||||
* 무엇을 추론할 수 있는가?
|
||||
|
|
@ -143,15 +143,15 @@ color = vec3(bl.x * bl.y * tr.x * tr.y);
|
|||
|
||||
기본적으로 우리는 모양을 만들기 위해 공간(중앙까지의 거리 기준)을 재해석 한다.
|
||||
이 기술은 "거리장"으로 알려져 있으며 폰트외곽선부터 3D 그래픽에 이르기까지 다양한 방식으로 응용된다.
|
||||
|
||||
|
||||
다음 예제들을 시도해보시오:
|
||||
|
||||
* [`step()`](../glossary/?search=step) 를 사용하여 0.5 이상은 흰색으로, 미만은 0.0으로 만들어보시오.
|
||||
|
||||
|
||||
* 후경과 전경의 색을 반전시켜 보시오.
|
||||
|
||||
* [`smoothstep()`](../glossary/?search=smoothstep) 를 사용하여 여러분의 원에 멋지고 부드러운 경계를 만들어보시오.
|
||||
|
||||
|
||||
* 구현이 만족스러우면, 나중에 재사용할 수 있도록 함수로 만들어보아라.
|
||||
|
||||
* 원에 색을 추가해 보시오.
|
||||
|
|
@ -159,7 +159,7 @@ color = vec3(bl.x * bl.y * tr.x * tr.y);
|
|||
* 뛰는 심장처럼, 원이 확대/축소하는 애니메이션을 만들 수 있는가?(앞 장의 애니메이션 부분으로부터 영감을 얻을 수 있을 것이다.)
|
||||
|
||||
* 이 원을 움직이려면 어떻게 해야되나? 한 평면에 이 원을 움직이고 다른 원들을 추가로 배치할 수 있는가?
|
||||
|
||||
|
||||
* 다른 함수 및 연산과 거리장을 조합해보면 어떻게 되나?
|
||||
|
||||
```glsl
|
||||
|
|
@ -182,8 +182,8 @@ pct = pow(distance(st,vec2(0.4)),distance(st,vec2(0.6)));
|
|||
|
||||
|
||||
|
||||
거리장은 거의 모든 것을 그리는 데 사용될 수 있다. 당연히 더 복잡한 형태일수록 방정식도 복잡해질것이지만, 일단 특정한 모양의 거리장을 만드는 공식을 갖게 되면, 매끄러운 가장자리나 다중 윤곽선과 같은 효과들과 조합하거나 응용할 수 있을 것이다. 그것들에 결합하거나 효과를 적용하기가 매우 쉽다. 이 때문에 다음 사례들에서 알 수 있듯, 거리장은 글꼴 렌더링에 널리 사용된다.
|
||||
[Mapbox GL Labels](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817), [Matt DesLauriers](https://twitter.com/mattdesl), [Material Design Fonts](http://mattdesl.svbtle.com/material-design-on-the-gpu), [O'Reilly - iPhone 3D Programming 7장의 일부](http://chimera.labs.oreilly.com/books/1234000001814/ch07.html#ch07_id36000921).
|
||||
거리장은 거의 모든 것을 그리는 데 사용될 수 있다. 당연히 더 복잡한 형태일수록 방정식도 복잡해질것이지만, 일단 특정한 모양의 거리장을 만드는 공식을 갖게 되면, 매끄러운 가장자리나 다중 윤곽선과 같은 효과들과 조합하거나 응용할 수 있을 것이다. 그것들에 결합하거나 효과를 적용하기가 매우 쉽다. 이 때문에 다음 사례들에서 알 수 있듯, 거리장은 글꼴 렌더링에 널리 사용된다.
|
||||
[Mapbox GL Labels](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817), [Matt DesLauriers](https://twitter.com/mattdesl), [Material Design Fonts](http://mattdesl.svbtle.com/material-design-on-the-gpu), [O'Reilly - iPhone 3D Programming 7장의 일부](https://www.oreilly.com/library/view/iphone-3d-programming/9781449388133/ch07.html#ch07_id36000844).
|
||||
|
||||
다음 코드를 살펴 보십시오.
|
||||
|
||||
|
|
@ -193,7 +193,7 @@ pct = pow(distance(st,vec2(0.4)),distance(st,vec2(0.6)));
|
|||
|
||||
*19번째 줄*의 거리장 공식을 살펴보자. 여기서 모든 4개의 사분면 안에 있는 `(.3,.3)` 또는 `vec3(.3)` 까지의 거리를 계산하고 있다(바로 그게 [`abs()`](../glossary/?search=abs)가 하는일이다).
|
||||
|
||||
*20번재 줄*의 주석을 해제하면 [`min()`](../glossary/?search=min)을 사용하여 이 네 지점까지의 거리를 0으로 결합하는 것을 알 수 있다.
|
||||
*20번재 줄*의 주석을 해제하면 [`min()`](../glossary/?search=min)을 사용하여 이 네 지점까지의 거리를 0으로 결합하는 것을 알 수 있다.
|
||||
그 결과는 흥미롭고 새로운 패턴을 만들어낸다.
|
||||
|
||||
이제 *21번째 줄*을 주석 해제 해보아라. 동일한 작업을 수행하지만 [`max()`](../glossary/?search=max) 함수를 사용한다. 그 결과는 모서리가 둥근 직사각형이다. 거리장의 고리가 중심에서 멀어질수록 어떻게 매끄러워지는지 확인해보아라.
|
||||
|
|
@ -241,13 +241,13 @@ float a = atan(pos.y,pos.x);
|
|||
<div class="codeAndCanvas" data="shapes.frag"></div>
|
||||
|
||||
* 이 예제를 사용하여 원하는 도형의 모서리 위치와 갯수를 입력하고 거리장을 반환하는 함수를 만들어보자.
|
||||
|
||||
|
||||
* [`min()`](../glossary/?search=min), [`max()`](../glossary/?search=max) 함수를 사용하여 거리장들을 조합해보자.
|
||||
|
||||
* 거리장을 사용하여 복제해볼 만한 기하학적인 로고를 골라보자.
|
||||
|
||||
축하드린다! 여러분은 힘든 부분을 잘 헤쳐왔다! 잠시 쉬면서 이러한 개념들을 정착시켜라 - Processing에서 간단한 도형을 그리는 것은 쉽지만 여기서는 그렇지 않다. 쉐이더-랜드에서의 도형그리기는 복잡하고, 새로운 패러다임의 코딩에 적응하는것은 약간 지칠 수도 있다.
|
||||
|
||||
이 장의 끝부분에는 [PixelSpirit Deck](https://patriciogonzalezvivo.github.io/PixelSpiritDeck/)에 대한 링크가 소개 돼있다. 이 자료는 새로운 SDF 기능을 학습하고 여러분만의 디자인으로 구성하고 쉐이더를 사용하는데에 도움이 될 것이다. 이 자료에는 점진적인 학습 곡선이 있기 때문에, 하루 한 장의 카드를 공부한다면 여러분의 스킬은 도전을 통해 몇 달 동안 발전할 것이다.
|
||||
이 장의 끝부분에는 [PixelSpirit Deck](https://patriciogonzalezvivo.github.io/PixelSpiritDeck/)에 대한 링크가 소개 돼있다. 이 자료는 새로운 SDF 기능을 학습하고 여러분만의 디자인으로 구성하고 쉐이더를 사용하는데에 도움이 될 것이다. 이 자료에는 점진적인 학습 곡선이 있기 때문에, 하루 한 장의 카드를 공부한다면 여러분의 스킬은 도전을 통해 몇 달 동안 발전할 것이다.
|
||||
|
||||
이제 도형을 그릴 줄 알았으니 새로운 아이디어가 떠오를 거라고 확신한다. 다음 장에서는 도형을 이동, 회전 및 축소하는 방법에 대해 알아 볼 것이다. 그럼 또 새로운 구성을 할 수 있게 될 것이다!
|
||||
이제 도형을 그릴 줄 알았으니 새로운 아이디어가 떠오를 거라고 확신한다. 다음 장에서는 도형을 이동, 회전 및 축소하는 방법에 대해 알아 볼 것이다. 그럼 또 새로운 구성을 할 수 있게 될 것이다!
|
||||
|
|
|
|||
|
|
@ -249,11 +249,11 @@ Pod względem mocy obliczeniowej funkcja [`sqrt()`](../glossary/?search=sqrt) -
|
|||
|
||||
|
||||
|
||||
Pola odległości mogą być używane do rysowania prawie wszystkiego. Oczywiście im bardziej złożony jest kształt, tym bardziej skomplikowane będzie jego równanie, ale gdy już masz formułę do tworzenia pól odległości danego kształtu, bardzo łatwo jest połączyć i/lub zastosować do niego efekty, takie jak gładkie krawędzie i wiele konturów. Z tego powodu, pola odległości są popularne w renderowaniu czcionek, takich jak [Mapbox GL Labels](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817), [Matt DesLauriers](https://twitter.com/mattdesl) [Material Design Fonts](http://mattdesl.svbtle.com/material-design-on-the-gpu) i [jak to jest opisane w rozdziale 7 iPhone 3D Programming, O'Reilly](http://chimera.labs.oreilly.com/books/1234000001814/ch07.html#ch07_id36000921).
|
||||
Pola odległości mogą być używane do rysowania prawie wszystkiego. Oczywiście im bardziej złożony jest kształt, tym bardziej skomplikowane będzie jego równanie, ale gdy już masz formułę do tworzenia pól odległości danego kształtu, bardzo łatwo jest połączyć i/lub zastosować do niego efekty, takie jak gładkie krawędzie i wiele konturów. Z tego powodu, pola odległości są popularne w renderowaniu czcionek, takich jak [Mapbox GL Labels](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817), [Matt DesLauriers](https://twitter.com/mattdesl) [Material Design Fonts](http://mattdesl.svbtle.com/material-design-on-the-gpu) i [jak to jest opisane w rozdziale 7 iPhone 3D Programming, O'Reilly](https://www.oreilly.com/library/view/iphone-3d-programming/9781449388133/ch07.html#ch07_id36000844).
|
||||
|
||||
Przyjrzyj się następującemu kodowi.
|
||||
|
||||
<!-- Distance fields can be used to draw almost everything. Obviously the more complex a shape is, the more complicated its equation will be, but once you have the formula to make distance fields of a particular shape it is very easy to combine and/or apply effects to it, like smooth edges and multiple outlines. Because of this, distance fields are popular in font rendering, like [Mapbox GL Labels](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817), [Matt DesLauriers](https://twitter.com/mattdesl) [Material Design Fonts](http://mattdesl.svbtle.com/material-design-on-the-gpu) and [as is described on Chapter 7 of iPhone 3D Programming, O’Reilly](http://chimera.labs.oreilly.com/books/1234000001814/ch07.html#ch07_id36000921).
|
||||
<!-- Distance fields can be used to draw almost everything. Obviously the more complex a shape is, the more complicated its equation will be, but once you have the formula to make distance fields of a particular shape it is very easy to combine and/or apply effects to it, like smooth edges and multiple outlines. Because of this, distance fields are popular in font rendering, like [Mapbox GL Labels](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817), [Matt DesLauriers](https://twitter.com/mattdesl) [Material Design Fonts](http://mattdesl.svbtle.com/material-design-on-the-gpu) and as is described in [Chapter 7 of iPhone 3D Programming, O’Reilly](https://www.oreilly.com/library/view/iphone-3d-programming/9781449388133/ch07.html#ch07_id36000844).
|
||||
|
||||
Take a look at the following code. -->
|
||||
|
||||
|
|
@ -348,7 +348,7 @@ Trik polega na wykorzystaniu liczby krawędzi wielokąta, by skonstruować pole
|
|||
|
||||
<!-- * Choose a geometric logo to replicate using distance fields. -->
|
||||
|
||||
Gratulacje! Udało ci się przebrnąć przez bardzo trudny materiał! Choć rysowanie prostych kształtów w Processing jest proste, to tutaj już nie. W świecie shaderów rysowanie kształtów jest zawiłe; przestawienie się na ten nowy sposób programowania może być męczące.
|
||||
Gratulacje! Udało ci się przebrnąć przez bardzo trudny materiał! Choć rysowanie prostych kształtów w Processing jest proste, to tutaj już nie. W świecie shaderów rysowanie kształtów jest zawiłe; przestawienie się na ten nowy sposób programowania może być męczące.
|
||||
|
||||
<!-- Congratulations! You have made it through the rough part! Take a break and let these concepts settle - drawing simple shapes in Processing is easy but not here. In shader-land drawing shapes is twisted, and it can be exhausting to adapt to this new paradigm of coding. -->
|
||||
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@ Em termos de poder computacional, a função [`sqrt()`](../glossary/?search=sqrt
|
|||
|
||||
|
||||
|
||||
Campos de Distância podem ser usados para desenhar quase tudo. Obviamente, quanto mais complexa for uma forma, mais complicada vai ser a equação, mas uma vez que você tenha a fórmula para fazer um campo de distância de uma forma específica, é muito fácil combinar e/ou aplicar efeitos a ela, como bordas suaves, e múltiplos outlines. Por causa disso, os campos de distância são populares para rendereizar fontes, como [Mapbox GL Labels](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817), [Matt DesLauriers](https://twitter.com/mattdesl) [Material Design Fonts](http://mattdesl.svbtle.com/material-design-on-the-gpu) e [ como descrito no capítulo 7 do livro iPhone 3D Programming, O’Reilly](http://chimera.labs.oreilly.com/books/1234000001814/ch07.html#ch07_id36000921).
|
||||
Campos de Distância podem ser usados para desenhar quase tudo. Obviamente, quanto mais complexa for uma forma, mais complicada vai ser a equação, mas uma vez que você tenha a fórmula para fazer um campo de distância de uma forma específica, é muito fácil combinar e/ou aplicar efeitos a ela, como bordas suaves, e múltiplos outlines. Por causa disso, os campos de distância são populares para rendereizar fontes, como [Mapbox GL Labels](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817), [Matt DesLauriers](https://twitter.com/mattdesl) [Material Design Fonts](http://mattdesl.svbtle.com/material-design-on-the-gpu) e [como descrito no capítulo 7 do livro iPhone 3D Programming, O’Reilly](https://www.oreilly.com/library/view/iphone-3d-programming/9781449388133/ch07.html#ch07_id36000844).
|
||||
|
||||
Dê uma olhada no código a seguir.
|
||||
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@ pct = pow(distance(st,vec2(0.4)),distance(st,vec2(0.6)));
|
|||
|
||||
|
||||
|
||||
С помощью поля расстояний можно нарисовать что угодно. Очевидно, чем сложнее фигура, тем сложнее будет уравнение. Но при наличии формул для создания поля расстояний определённой формы, вы можете с лёгкостью комбинировать фигуры и применять к ним различные эффекты: сглаживание границ, рисование нескольких контуров и т.п. Поэтому поля расстояний находят широкое применение в рисовании шрифтов, например [Mapbox GL Labels](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817), [шрифты Material Design](http://mattdesl.svbtle.com/material-design-on-the-gpu) от [Matt DesLauriers](https://twitter.com/mattdesl) и [7 глава книги iPhone 3D Programming, издательство O’Reilly](http://chimera.labs.oreilly.com/books/1234000001814/ch07.html#ch07_id36000921).
|
||||
С помощью поля расстояний можно нарисовать что угодно. Очевидно, чем сложнее фигура, тем сложнее будет уравнение. Но при наличии формул для создания поля расстояний определённой формы, вы можете с лёгкостью комбинировать фигуры и применять к ним различные эффекты: сглаживание границ, рисование нескольких контуров и т.п. Поэтому поля расстояний находят широкое применение в рисовании шрифтов, например [Mapbox GL Labels](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817), [шрифты Material Design](http://mattdesl.svbtle.com/material-design-on-the-gpu) от [Matt DesLauriers](https://twitter.com/mattdesl) и [7 глава книги iPhone 3D Programming, издательство O’Reilly](https://www.oreilly.com/library/view/iphone-3d-programming/9781449388133/ch07.html#ch07_id36000844).
|
||||
|
||||
Рассмотрим следующий код:
|
||||
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ Có vài cách để tính khoảng cách và cách dễ nhất là dùng hàm [
|
|||
|
||||
Bạn có thể dùng hàm [`distance()`](../glossary/?lan=vi&search=distance), [`length()`](../glossary/?lan=vi&search=length) hay [`sqrt()`](../glossary/?lan=vi&search=sqrt) tuỳ ý để tính khoảng cách của từng điểm ảnh tới tâm canvas. Đoạn code dưới đây dùng cả 3 hàm trên và không có gì ngạc nhiên là kết quả của chúng đều giống nhau.
|
||||
|
||||
* Hãy comment và uncomment từng cách tính để kiểm tra xem có đúng là chúng cho ra cùng 1 kết quả không nhé
|
||||
* Hãy comment và uncomment từng cách tính để kiểm tra xem có đúng là chúng cho ra cùng 1 kết quả không nhé
|
||||
|
||||
<div class="codeAndCanvas" data="circle-making.frag"></div>
|
||||
|
||||
|
|
@ -164,7 +164,7 @@ Thực ra thì hàm [`sqrt()`](../glossary/?lan=vi&search=sqrt) và các hàm gi
|
|||
|
||||
|
||||
|
||||
Các distance field có thể được kết hợp lại với nhau để vẽ hầu như tất cả mọi thứ. Rõ ràng là hình vẽ càng phức tạp thì phương pháp kết hợp chúng sẽ càng rối rắm, nhưng nếu bạn có 1 công thức để tính 1 distance field cho 1 khối hình học cơ bản nào đó rồi, thì việc tạo thêm hiệu ứng cho nó lại rất dễ, uốn cong các cạnh hay vẽ nhiều đường viền cùng lúc chẳng hạn. Chình vì điều này mà distance field là kỹ thuật rất phổ biến khi cần vẽ các ký tự của các phông chữ khác nhau, ví dụ như các phần mềm [Mapbox GL Labels](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817), [Matt DesLauriers](https://twitter.com/mattdesl) [Material Design Fonts](http://mattdesl.svbtle.com/material-design-on-the-gpu) và [được mô tả chi tiết trong chương 7 của quyển sách iPhone 3D Programming của nhà xuất bản O’Reilly](http://chimera.labs.oreilly.com/books/1234000001814/ch07.html#ch07_id36000921).
|
||||
Các distance field có thể được kết hợp lại với nhau để vẽ hầu như tất cả mọi thứ. Rõ ràng là hình vẽ càng phức tạp thì phương pháp kết hợp chúng sẽ càng rối rắm, nhưng nếu bạn có 1 công thức để tính 1 distance field cho 1 khối hình học cơ bản nào đó rồi, thì việc tạo thêm hiệu ứng cho nó lại rất dễ, uốn cong các cạnh hay vẽ nhiều đường viền cùng lúc chẳng hạn. Chình vì điều này mà distance field là kỹ thuật rất phổ biến khi cần vẽ các ký tự của các phông chữ khác nhau, ví dụ như các phần mềm [Mapbox GL Labels](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817), [Matt DesLauriers](https://twitter.com/mattdesl) [Material Design Fonts](http://mattdesl.svbtle.com/material-design-on-the-gpu) và [được mô tả chi tiết trong chương 7 của quyển sách iPhone 3D Programming của nhà xuất bản O’Reilly](https://www.oreilly.com/library/view/iphone-3d-programming/9781449388133/ch07.html#ch07_id36000844).
|
||||
|
||||
Hãy xem đoạn code sau:
|
||||
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@ In terms of computational power the [`sqrt()`](../glossary/?search=sqrt) functio
|
|||
|
||||
|
||||
|
||||
Distance fields can be used to draw almost everything. Obviously the more complex a shape is, the more complicated its equation will be, but once you have the formula to make distance fields of a particular shape it is very easy to combine and/or apply effects to it, like smooth edges and multiple outlines. Because of this, distance fields are popular in font rendering, like [Mapbox GL Labels](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817), [Matt DesLauriers](https://twitter.com/mattdesl) [Material Design Fonts](http://mattdesl.svbtle.com/material-design-on-the-gpu) and [as is described on Chapter 7 of iPhone 3D Programming, O’Reilly](http://chimera.labs.oreilly.com/books/1234000001814/ch07.html#ch07_id36000921).
|
||||
Distance fields can be used to draw almost everything. Obviously the more complex a shape is, the more complicated its equation will be, but once you have the formula to make distance fields of a particular shape it is very easy to combine and/or apply effects to it, like smooth edges and multiple outlines. Because of this, distance fields are popular in font rendering, like [Mapbox GL Labels](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817), [Matt DesLauriers](https://twitter.com/mattdesl) [Material Design Fonts](http://mattdesl.svbtle.com/material-design-on-the-gpu) and as is described in [Chapter 7 of iPhone 3D Programming, O’Reilly](https://www.oreilly.com/library/view/iphone-3d-programming/9781449388133/ch07.html#ch07_id36000844).
|
||||
|
||||
Take a look at the following code.
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue