Skip to content

Commit 8ef07d1

Browse files
committed
fix image sizes
1 parent f54d86c commit 8ef07d1

File tree

3 files changed

+12
-12
lines changed

3 files changed

+12
-12
lines changed

webgl/lessons/ru/webgl-3d-geometry-lathe.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -284,7 +284,7 @@ P = P1 * invT^3 +
284284

285285
Вот SVG силуэт кегли, который я сделал.
286286

287-
<img class="webgl_center" src="resources/bowling-pin-silhouette.svg" width="50%" height="50%" />
287+
<img class="webgl_center" src="resources/bowling-pin-silhouette.svg" width="400" />
288288

289289
Он сделан из 4 кривых Безье. Данные для этого пути выглядят так
290290

@@ -508,14 +508,14 @@ P = P1 * invT^3 +
508508
Мы могли бы вычислить нормаль для каждой точки на кривой. Фактически, если вы вернетесь к примерам
509509
на этой странице, вы можете увидеть, что линия, образованная `R1` и `R2`, является касательной к кривой.
510510

511-
<img class="webgl_center" src="resources/tangent-to-curve.png" width="50%" />
511+
<img class="webgl_center" src="resources/tangent-to-curve.png" width="400" />
512512

513513
Нормаль перпендикулярна касательной, поэтому было бы легко использовать касательные
514514
для генерации нормалей.
515515

516516
Но давайте представим, что мы хотели сделать подсвечник с силуэтом, как этот
517517

518-
<img class="webgl_center" src="resources/candle-holder.svg" width="50%" />
518+
<img class="webgl_center" src="resources/candle-holder.svg" width="400" />
519519

520520
Есть много гладких областей, но также много острых углов. Как мы решаем, какие нормали
521521
использовать? Хуже того, когда мы хотим острый край, нам нужны дополнительные вершины. Потому что вершины
@@ -773,7 +773,7 @@ for (let division = 0; division <= numDivisions; ++division) {
773773
не равны, они не будут считаться одной и той же вершиной. Это означает, что при вычислении нормалей
774774
они не будут учитывать все лица, и их нормали будут неправильными.</p>
775775
<p>Вот результат, когда это происходит</p>
776-
<img class="webgl_center" src="resources/lathe-normal-seam.png" width="50%" />
776+
<img class="webgl_center" src="resources/lathe-normal-seam.png" width="400" />
777777
<p>Как вы можете видеть, есть шов, где вершины не считаются общими,
778778
потому что они не являются 100% совпадением</p>
779779
<p>Моя первая мысль была, что я должен изменить мое решение так, чтобы когда я проверяю совпадающие

webgl/lessons/webgl-3d-geometry-lathe.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -284,7 +284,7 @@ major editors mentioned above. [I used this online editor](https://svg-edit.gith
284284

285285
Here's the svg silhouette of a bowling pin I made.
286286

287-
<img class="webgl_center" src="resources/bowling-pin-silhouette.svg" width="50%" height="50%" />
287+
<img class="webgl_center" src="resources/bowling-pin-silhouette.svg" width="400" />
288288

289289
It's made from 4 bezier curves. The data for that path looks like this
290290

@@ -509,14 +509,14 @@ There's still one other thing we should do and that's add normals.
509509
We could compute a normal for each point on the curve. In fact if you go back to the examples
510510
on this page you can see the line formed by `R1` and `R2` are a line tangent to the curve.
511511

512-
<img class="webgl_center" src="resources/tangent-to-curve.png" width="50%" />
512+
<img class="webgl_center" src="resources/tangent-to-curve.png" width="400" />
513513

514514
A normal is perpendicular to the tangent so it would be easy to use the tangents
515515
to generate normals.
516516

517517
But, lets imagine we wanted to make a candle holder with a silhouette like this
518518

519-
<img class="webgl_center" src="resources/candle-holder.svg" width="50%" />
519+
<img class="webgl_center" src="resources/candle-holder.svg" width="400" />
520520

521521
There are many smooth areas but also many hard corners. How do we decide which normals
522522
to use? Worse, when we want a sharp edge we need extra vertices. Because vertices
@@ -773,7 +773,7 @@ same vertex. Unfortunately, because <code>Math.sin(0)</code> and <code>Math.sin(
773773
are not equal they will not be considered the same vertex. That means when computing the normals
774774
they won't take into consideration all the faces and their normals will come out wrong.</p>
775775
<p>Here's the result when that happens</p>
776-
<img class="webgl_center" src="resources/lathe-normal-seam.png" width="50%" />
776+
<img class="webgl_center" src="resources/lathe-normal-seam.png" width="400" />
777777
<p>As you can see there is a seam where the vertices are not considered shared
778778
because they are not a 100% match</p>
779779
<p>My first thought was that I should change my solution so that when I check for matching

webgl/lessons/zh_cn/webgl-3d-geometry-lathe.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,7 @@ P = P1 * invT^3 +
246246

247247
这是我做的保龄球的半边轮廓的 svg。
248248

249-
<img class="webgl_center" src="resources/bowling-pin-silhouette.svg" width="50%" height="50%" />
249+
<img class="webgl_center" src="resources/bowling-pin-silhouette.svg" width="400" />
250250

251251
由 4 个曲线制成,路径的数据像这样
252252

@@ -463,13 +463,13 @@ WebGL 缓冲
463463
我们可以计算每一个曲线点的法向量,事实上如果你会看这节中的例子,你会发现 `R1``R2`
464464
构成的线段切曲线于红点处。
465465

466-
<img class="webgl_center" src="resources/tangent-to-curve.png" width="50%" />
466+
<img class="webgl_center" src="resources/tangent-to-curve.png" width="400" />
467467

468468
法向量和切线垂直所以从切线很容易求出法向量。
469469

470470
但是,假设我们想要做一个烛台,有这样一个框架。
471471

472-
<img class="webgl_center" src="resources/candle-holder.svg" width="50%" />
472+
<img class="webgl_center" src="resources/candle-holder.svg" width="400" />
473473

474474
这有很多平滑区域也有很多锐利角,如何决定使用法向量的方向呢?当需要锐利边缘时就要使用多余的顶点,
475475
因为一个顶点有一个位置和一个法向量,如果需要多个法向量就需要不同的顶点,这也是制作立方体需要至少 24
@@ -711,7 +711,7 @@ for (let division = 0; division <= numDivisions; ++division) {
711711
如果相同就认为是同一点,那么如果不被认为是同一点就会计算出错误的法向量。
712712
</p>
713713
<p>这是这种情况发生时的样子</p>
714-
<img class="webgl_center" src="resources/lathe-normal-seam.png" width="50%" />
714+
<img class="webgl_center" src="resources/lathe-normal-seam.png" width="400" />
715715
<p>你可以看到它们在共享处没有被当作相同点,因为它们不是100%的相等。</p>
716716
<p>起初我想通过提供一个误差范围,检查顶点的距离是否在范围内,如果小于误差范围就认为是同一点。
717717
就像这样。

0 commit comments

Comments
 (0)