24
üD · T E X Graphics http://swpark.me YP <8Y 2018D 2 3|

D TEX Graphics - swpark.meswpark.me/notes/2018KTUGconf-perspectiveTikZ.pdfImage from sketch pkg. doc. „—(˝‚

  • Upload
    others

  • View
    7

  • Download
    0

Embed Size (px)

Citation preview

Page 1: D TEX Graphics - swpark.meswpark.me/notes/2018KTUGconf-perspectiveTikZ.pdfImage from sketch pkg. doc. „—(˝‚

원근감을 살린 TEX Graphics

박승원

http://swpark.me

서울대학교 물리천문학부

2018년 2월 3일

Page 2: D TEX Graphics - swpark.meswpark.me/notes/2018KTUGconf-perspectiveTikZ.pdfImage from sketch pkg. doc. „—(˝‚

주제

I TikZ로 3D 그래픽을 그려보자!

I 단, 원근감을 살려서.

박승원 (서울대 물리천문학부) 원근감을 살린 TEX Graphics 2 / 24

Page 3: D TEX Graphics - swpark.meswpark.me/notes/2018KTUGconf-perspectiveTikZ.pdfImage from sketch pkg. doc. „—(˝‚

목차

I 주제 / 목차

I 개요

I 선행연구(관련 패키지) 전수조사

I 수학적 접근 및 TikZ를 이용한 구현

I 결론

I 참고 문헌

박승원 (서울대 물리천문학부) 원근감을 살린 TEX Graphics 3 / 24

Page 4: D TEX Graphics - swpark.meswpark.me/notes/2018KTUGconf-perspectiveTikZ.pdfImage from sketch pkg. doc. „—(˝‚

개요

목진욱, TikZ in Physics

@ 2017 공주대 워크샵

Image from drububu.com/tutorial

박승원 (서울대 물리천문학부) 원근감을 살린 TEX Graphics 4 / 24

Page 5: D TEX Graphics - swpark.meswpark.me/notes/2018KTUGconf-perspectiveTikZ.pdfImage from sketch pkg. doc. „—(˝‚

개요

목진욱, TikZ in Physics

@ 2017 공주대 워크샵Image from drububu.com/tutorial

박승원 (서울대 물리천문학부) 원근감을 살린 TEX Graphics 5 / 24

Page 6: D TEX Graphics - swpark.meswpark.me/notes/2018KTUGconf-perspectiveTikZ.pdfImage from sketch pkg. doc. „—(˝‚

개요: 좌표 변환

I 함수 f : R3 → R2

I Perspective projection의 원점이 무한히 멀어지면 Isometric.

I Isometric의 경우 선형적이므로 구현이 비교적 간단.

I 목진욱(2017) 참고

Chapter 4: Building a drawing 28

x

y

z

p

r

o

j

e

c

t

i

o

n

p

l

a

n

e

The rays pierce the projection plane at the corresponding points on the perspective imagewe are trying to draw. Albrecht Durer and his Renaissance contemporaries had the sameidea in the early 1500’s.

All that’s left is to find a way to connect the points of the house on the projection plane.We could pull out a good computer graphics text, find the necessary matrix, and enter itourselves as a transform literal. See Section 3.1.3.3 [Transform literals], page 12. That workis already done, however. We can use the project(p) constructor.

There are still some details that require care. Projection will flatten whatever is trans-formed onto the plane z = �p. Therefore any part of the house could disappear behind theprojection plane (the hidden surface algorithm orders objects at the same depth arbitrar-ily). The door may also disappear behind the front of the house. To make sure everythingremains visible, we’ll place the house a tiny bit in front of the projection plane and a secondcopy of the door in front of the house.def projection {

% e is a small number defined aboveput { project(p) then translate([0,0,1*e]) } {house}put { project(p) then translate([0,0,2*e]) } {door}

}

x

y

z

p

r

o

j

e

c

t

i

o

n

p

l

a

n

e

Image from sketch pkg. doc.

박승원 (서울대 물리천문학부) 원근감을 살린 TEX Graphics 6 / 24

Page 7: D TEX Graphics - swpark.meswpark.me/notes/2018KTUGconf-perspectiveTikZ.pdfImage from sketch pkg. doc. „—(˝‚

관련 패키지 전수조사

ctan.org/topic/graphics-3d (괄호 안: 마지막 업데이트)

I featpost (2012)

I threed (2010)

I productbox (2010)

I pst-3d (2010)

I pst-3dplot (2017)

I pst-fr3d (2002)

I pst-gr3d (2005)

I pst-light3d (2007)

I pst-ob3d (2007)

I pst-perspective (2016)

I pst-platon (2009)

I pst-solides3d (2017)

I pst-vue3d (2007)

I tikz-3dplot (2012)

그 외: sketch (2012)

박승원 (서울대 물리천문학부) 원근감을 살린 TEX Graphics 7 / 24

Page 8: D TEX Graphics - swpark.meswpark.me/notes/2018KTUGconf-perspectiveTikZ.pdfImage from sketch pkg. doc. „—(˝‚

관련 패키지 전수조사

기타

I threed 주사위

I productbox 포장지

I pst-fr3d 버튼

I pst-light3d 워드아트

Isometric

I pst-3d

I pst-3dplot

I pst-gr3d

I pst-ob3d

I pst-platon

I tikz-3dplot

Perspective

I featpost

I pst-perspective

I pst-vue3d

I sketch

박승원 (서울대 물리천문학부) 원근감을 살린 TEX Graphics 8 / 24

Page 9: D TEX Graphics - swpark.meswpark.me/notes/2018KTUGconf-perspectiveTikZ.pdfImage from sketch pkg. doc. „—(˝‚

관련 패키지 개발 현황

개발된 기능:

I Isometric projection으로 하는 모든 것

I tikz-3dplot 등

I 점의 좌표를 3D에서 2D로 변환

개발되지 않은 기능:

I TikZ에서 경로를 3D에서 2D로 변환

I sketch에 구현되어 있긴 하나, sketch는

I 별도의 문법을 익혀야 사용 가능.

I 2012년 이후로 업데이트가 멈춘 상태.

박승원 (서울대 물리천문학부) 원근감을 살린 TEX Graphics 9 / 24

Page 10: D TEX Graphics - swpark.meswpark.me/notes/2018KTUGconf-perspectiveTikZ.pdfImage from sketch pkg. doc. „—(˝‚

없으면, 직접 만들자!

박승원 (서울대 물리천문학부) 원근감을 살린 TEX Graphics 10 / 24

Page 11: D TEX Graphics - swpark.meswpark.me/notes/2018KTUGconf-perspectiveTikZ.pdfImage from sketch pkg. doc. „—(˝‚

수학적 접근

I 카메라의 방향을 구형좌표계의 매개변수 θ, φ 로 표현.

I r = 1

I 방향을 법선으로 갖고 원점을 지나는 평면에 투영.

x

y

z(r, θ, φ)

φ

θ

r

박승원 (서울대 물리천문학부) 원근감을 살린 TEX Graphics 11 / 24

Page 12: D TEX Graphics - swpark.meswpark.me/notes/2018KTUGconf-perspectiveTikZ.pdfImage from sketch pkg. doc. „—(˝‚

수학적 접근

R3 위의 점 A,B,C가 P에 의해 R2에 투영되는 모습.

박승원 (서울대 물리천문학부) 원근감을 살린 TEX Graphics 12 / 24

Page 13: D TEX Graphics - swpark.meswpark.me/notes/2018KTUGconf-perspectiveTikZ.pdfImage from sketch pkg. doc. „—(˝‚

수학적 접근

카메라 P와 물체 A를 잇는 직선과 투영평면 α가 만나는 점: Q

α : (sin θ cosφ)x + (sin θ sinφ)y + (cos θ)z = 0,

P : (sin θ cosφ, sin θ sinφ, cos θ),

A : (p, q, r).

∴ Q :

(w sin θ cosφ− p

w − 1,w sin θ sinφ− q

w − 1,w cos θ − r

w − 1

).

박승원 (서울대 물리천문학부) 원근감을 살린 TEX Graphics 13 / 24

Page 14: D TEX Graphics - swpark.meswpark.me/notes/2018KTUGconf-perspectiveTikZ.pdfImage from sketch pkg. doc. „—(˝‚

수학적 접근

투영평면 위의 점 (x , y)가 R3 상에 대응되는 점:cosφ − sinφ 0

sinφ cosφ 0

0 0 1

cos θ 0 sin θ

0 1 0

− sin θ 0 cos θ

0 −1 0

1 0 0

0 0 0

x

y

0

=

−y cos θ cosφ− x sinφ

−y cos θ sinφ+ x cosφ

y sin θ

= Q.

이 방정식을 풀면 x , y를 p, q, r , θ, φ로 표현할 수 있게 된다.

박승원 (서울대 물리천문학부) 원근감을 살린 TEX Graphics 14 / 24

Page 15: D TEX Graphics - swpark.meswpark.me/notes/2018KTUGconf-perspectiveTikZ.pdfImage from sketch pkg. doc. „—(˝‚

수학적 접근

R3 상의 점 A(p, q, r)이 대응되어야 하는 점은

x =1

w − 1(p sinφ− q cosφ) , (1)

y =1

w − 1(p cos θ cosφ+ q cos θ sinφ− r sin θ) , (2)

where w ≡ p sin θ cosφ+ q sin θ sinφ+ r cos θ.

박승원 (서울대 물리천문학부) 원근감을 살린 TEX Graphics 15 / 24

Page 16: D TEX Graphics - swpark.meswpark.me/notes/2018KTUGconf-perspectiveTikZ.pdfImage from sketch pkg. doc. „—(˝‚

구현

I Step 1. 몇 개의 입체도형을 TikZ의 plot 함수로 그려보고

확인

I Step 2. 임의의 경로를 변환시킬 방법을 탐색

박승원 (서울대 물리천문학부) 원근감을 살린 TEX Graphics 16 / 24

Page 17: D TEX Graphics - swpark.meswpark.me/notes/2018KTUGconf-perspectiveTikZ.pdfImage from sketch pkg. doc. „—(˝‚

구현

I Step 1. 예시 1: 정육면체

I 12개의 변을 일일이 그린다.

I 곧은 선분의 경우 TikZ의 draw를 그대로 써도 무방.

I 이에 대하여 Step 2에서 자세히 논의.

I 소스: git.io/vNNWv / gif 버전: git.io/vNNyW

박승원 (서울대 물리천문학부) 원근감을 살린 TEX Graphics 17 / 24

Page 18: D TEX Graphics - swpark.meswpark.me/notes/2018KTUGconf-perspectiveTikZ.pdfImage from sketch pkg. doc. „—(˝‚

구현

I Step 1. 예시 2: 토로이드(toroid)

I (p, q, r) =

((4 + 0.5 cos 32θ) cos θ, (4 + 0.5 cos 32θ) sin θ, sin 16θ)

I 소스: git.io/vNFu0

I 매개변수 θ를 0◦부터 360◦까지 샘플 200개 사용

I 이 정도면 (1), (2)이 올바름을 확신 가능.

박승원 (서울대 물리천문학부) 원근감을 살린 TEX Graphics 18 / 24

Page 19: D TEX Graphics - swpark.meswpark.me/notes/2018KTUGconf-perspectiveTikZ.pdfImage from sketch pkg. doc. „—(˝‚

구현

I Step 2. 임의의 경로/도형

I Step 1에서는 점의 좌표를 일일이 계산시켜야 했다.

I 복잡한 계산식/코드

I 경로를 그리려면 매개변수화하여 plot 해야 한다.

I Isometric projection(tikz-3dplot 등)에서 하듯,

\draw (0,0,0) -- (1,1,1);

와 같이 써놓기만 하면 되게 해야!

박승원 (서울대 물리천문학부) 원근감을 살린 TEX Graphics 19 / 24

Page 20: D TEX Graphics - swpark.meswpark.me/notes/2018KTUGconf-perspectiveTikZ.pdfImage from sketch pkg. doc. „—(˝‚

구현

I PSTricks: pst-perspective 등

I TikZ의 nonlineartransformations 모듈

\pgfsettransformnonlinearflatness{hdimensioni} (initially 5pt)Whenever in a to-be-drawn curve the L1-distance (maximum of the distances in x- andy-directions) between the start of a curve and its first control point or between the first andsecond control points or between the second control point and the end is more than hdistancei,the curve gets split in the middle (more precisely, at time t = 0.5) and we draw the two partsindividually (for them, splitting may occur again, if the curve is still too long).

\begin{tikzpicture}\draw [help lines] (0,0) grid (3,2);\draw[red] (0:20mm) arc [start angle=0, end angle=90, radius=2cm];{

\pgftransformnonlinear{\polartransformation}\pgfsettransformnonlinearflatness{2pt} % very precise\draw (0,20mm) -- (90pt,20mm);

}\end{tikzpicture}

103.4.5 Applying Nonlinear Transformations to Text

Earlier, it was pointed that nonlinear transformations do not apply to text. Nevertheless, when you use\pgftext or \pgfnode, pgf will do a sort of “best effort” to render the text in the nonlinear coordinatesystem: The point where the text should be shown can obviously be computed easily. When then temporarilyreset the nonlinear transformation and, instead, setup a linear transformation that matches the nonlineartransformation at the point where the text should be. Then, the text is shown. This means that if the text islonger, it will not “follow” the nonlinear transformation, but near the origin of the text it will look “correct.”As an example, let us add some text at the grid point of the above example:

0 � 0 �30 �

30�

60�

60�

90�

90� \begin{tikzpicture}\draw [help lines] (0,0) grid (3,2);\pgftransformnonlinear{\polartransformation}% see above

% Draw something with this transformation in force\draw (0pt,0mm) grid [xstep=10pt, ystep=5mm] (90pt, 20mm);

\foreach \angle in {0,30,60,90}\foreach \dist in {1,2}

{\pgftransformshift{\pgfpoint{\angle pt}{\dist cm}}\pgftext{\angle$^\circ$}

}\end{tikzpicture}

103.4.6 Approximating Nonlinear Transformations Using Linear Transformations

At any given point, the current nonlinear transformation can be approximated using a linear transformation.The following two functions allow you to install such a local approximation:

\pgfapproximatenonlineartransformationThis command will do two things:

1. It clears the nonlinear transformations for the rest of the current TEX scope, so only linear trans-formations apply.

2. However, before removing the nonlinear transformations, the linear transformation matrix is mod-ified so that it mimics the effect the nonlinear transformation had at the origin. That is, after youcall this command, drawing something near the origin will look almost the same as if you had notcalled it.

1055

I 매크로 확장 과정 등의 문제로, 잘 구현되지 않고 있다.

박승원 (서울대 물리천문학부) 원근감을 살린 TEX Graphics 20 / 24

Page 21: D TEX Graphics - swpark.meswpark.me/notes/2018KTUGconf-perspectiveTikZ.pdfImage from sketch pkg. doc. „—(˝‚

구현

I PSTricks: pst-perspective 등

I TikZ의 nonlineartransformations 모듈

\pgfsettransformnonlinearflatness{hdimensioni} (initially 5pt)Whenever in a to-be-drawn curve the L1-distance (maximum of the distances in x- andy-directions) between the start of a curve and its first control point or between the first andsecond control points or between the second control point and the end is more than hdistancei,the curve gets split in the middle (more precisely, at time t = 0.5) and we draw the two partsindividually (for them, splitting may occur again, if the curve is still too long).

\begin{tikzpicture}\draw [help lines] (0,0) grid (3,2);\draw[red] (0:20mm) arc [start angle=0, end angle=90, radius=2cm];{

\pgftransformnonlinear{\polartransformation}\pgfsettransformnonlinearflatness{2pt} % very precise\draw (0,20mm) -- (90pt,20mm);

}\end{tikzpicture}

103.4.5 Applying Nonlinear Transformations to Text

Earlier, it was pointed that nonlinear transformations do not apply to text. Nevertheless, when you use\pgftext or \pgfnode, pgf will do a sort of “best effort” to render the text in the nonlinear coordinatesystem: The point where the text should be shown can obviously be computed easily. When then temporarilyreset the nonlinear transformation and, instead, setup a linear transformation that matches the nonlineartransformation at the point where the text should be. Then, the text is shown. This means that if the text islonger, it will not “follow” the nonlinear transformation, but near the origin of the text it will look “correct.”As an example, let us add some text at the grid point of the above example:

0 � 0 �30 �

30�

60�

60�

90�

90� \begin{tikzpicture}\draw [help lines] (0,0) grid (3,2);\pgftransformnonlinear{\polartransformation}% see above

% Draw something with this transformation in force\draw (0pt,0mm) grid [xstep=10pt, ystep=5mm] (90pt, 20mm);

\foreach \angle in {0,30,60,90}\foreach \dist in {1,2}

{\pgftransformshift{\pgfpoint{\angle pt}{\dist cm}}\pgftext{\angle$^\circ$}

}\end{tikzpicture}

103.4.6 Approximating Nonlinear Transformations Using Linear Transformations

At any given point, the current nonlinear transformation can be approximated using a linear transformation.The following two functions allow you to install such a local approximation:

\pgfapproximatenonlineartransformationThis command will do two things:

1. It clears the nonlinear transformations for the rest of the current TEX scope, so only linear trans-formations apply.

2. However, before removing the nonlinear transformations, the linear transformation matrix is mod-ified so that it mimics the effect the nonlinear transformation had at the origin. That is, after youcall this command, drawing something near the origin will look almost the same as if you had notcalled it.

1055

I 매크로 확장 과정 등의 문제로, 잘 구현되지 않고 있다.

박승원 (서울대 물리천문학부) 원근감을 살린 TEX Graphics 21 / 24

Page 22: D TEX Graphics - swpark.meswpark.me/notes/2018KTUGconf-perspectiveTikZ.pdfImage from sketch pkg. doc. „—(˝‚

결론

I MetaPost, PSTricks: featpost, pst-perspective 등

I TikZ를 이용한 패키지는 없다.

I Perspective projection을 위한 공식을 유도, 확인.

I 임의의 경로를 그리기 위해, TikZ의

nonlineartransformations 를 사용하려 했으나 실패

I PSTricks에서는 어떻게 구현했을까?

I 왜 지금껏 TikZ로는 한번도 구현되지 않았을까?

I 계산속도 개선

박승원 (서울대 물리천문학부) 원근감을 살린 TEX Graphics 22 / 24

Page 23: D TEX Graphics - swpark.meswpark.me/notes/2018KTUGconf-perspectiveTikZ.pdfImage from sketch pkg. doc. „—(˝‚

참고 문헌

I T.Tantau (2015), The TikZ and PGF Packages (texdoc

tikz)

I 목진욱 (2017), TikZ in physics

박승원 (서울대 물리천문학부) 원근감을 살린 TEX Graphics 23 / 24

Page 24: D TEX Graphics - swpark.meswpark.me/notes/2018KTUGconf-perspectiveTikZ.pdfImage from sketch pkg. doc. „—(˝‚

감사합니다

박승원 (서울대 물리천문학부) 원근감을 살린 TEX Graphics 24 / 24