commit 5e0e250b70150df92937229a486e4b2273726633
parent 6f0bf73f610552543d473c6443926afe5aa870b8
Author: Kenji Matsuda <ftvda283@gmail.com>
Date: Sat, 2 Oct 2021 20:15:21 +0900
update transformations.html
Diffstat:
2 files changed, 11 insertions(+), 1 deletion(-)
diff --git a/translation/Getting-started/Transformations.html b/translation/Getting-started/Transformations.html
@@ -8,6 +8,7 @@
<meta name="fragment" content="!">
<link rel="stylesheet" href="../static/style.css" />
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"> </script>
+ <script src="/static/functions.js"></script>
</head>
<body>
<div id="content">
@@ -640,7 +641,7 @@ unsigned int transformLoc = <function id='45'>glGetUniformLocation</function>(ou
<p>
Perfect! Our container is indeed tilted to the left and twice as small so the transformation was successful. Let's get a little more funky and see if we can rotate the container over time, and for fun we'll also reposition the container at the bottom-right side of the window.
To rotate the container over time we have to update the transformation matrix in the render loop because it needs to update each frame. We use GLFW's time function to get an angle over time:
-完璧です。
+完璧です。画面の箱は確かに左に傾き、半分の大きさになりました。座標変換は成功です。さらにもう少しイカしたことをやってみましょう。時間と共に箱を回転させ、ウィンドウの右下に移動させることはできるでしょうか。時間と共に箱を回転させるためには変換行列をフレーム毎に更新する必要があるので、描画ループの中でその操作が必要です。時間に応じた回転角を設定するために、GLFWの時間に関する関数を利用します:
</p>
<pre><code>
@@ -651,15 +652,18 @@ trans = <function id='57'>glm::rotate</function>(trans, (float)<function id='47'
<p>
Keep in mind that in the previous case we could declare the transformation matrix anywhere, but now we have to create it every iteration to continuously update the rotation. This means we have to re-create the transformation matrix in each iteration of the render loop. Usually when rendering scenes we have several transformation matrices that are re-created with new values each frame.
+ 以前は変換行列をどこで宣言してもよかったですが、今回連続的に回転角を更新するためにフレーム毎に変換行列を作成する必要があることに注意して下さい。つまり描画ループが一周する度に変換行列を再生成しないといけません。画面を描画する際は通常、いくつかの変換行列をフレーム毎に新しい値と共に再生成することになります。
</p>
<p>
Here we first rotate the container around the origin <code>(0,0,0)</code> and once it's rotated, we translate its rotated version to the bottom-right corner of the screen. Remember that the actual transformation order should be read in reverse: even though in code we first translate and then later rotate, the actual transformations first apply a rotation and then a translation. Understanding all these combinations of transformations and how they apply to objects is difficult to understand. Try and experiment with transformations like these and you'll quickly get a grasp of it.
+ 原点<code>(0, 0, 0)</code>の周りで箱を回転させた後、平行移動により画面の右下に持って行きます。実際の変換の順番は逆から読むことを思い出して下さい。コードにおいてもまず平行移動し、その後回転させていますが、実際の変換は回転の後に平行移動です。この変換の組み合わせや、それがどのように物体に適応されるかを完全に理解するのは困難です。いろいろ実験してみて下さい。そうすればすぐに全容が掴めるはずです。
</p>
<p>
If you did things right you should get the following result:
+ ここまで正しくプログラムできていれば以下のようになるはずです:
</p>
<div class="video paused" onclick="ClickVideo(this)">
diff --git a/translation/static/functions.js b/translation/static/functions.js
@@ -0,0 +1,6 @@
+function ClickVideo(video){
+ if(video.children[0].paused)
+ video.children[0].play();
+ else
+ video.children[0].pause();
+}
