Skip to content

Commit bd9c143

Browse files
greggmangreggman
committed
Revert "Fix multiple-views-items examples"
This reverts commit 9651f25. The issue was not the CSS. It was the code trying to fix requestAnimationFrame so that it only fires if the iframe is visible. The code worked when it shipped but browsers broke it. Fortunately browsers no longer run requestAnimationFrame in an iframe if the iframe is not visible so the code is no longer needed.
1 parent 9651f25 commit bd9c143

File tree

4 files changed

+21
-58
lines changed

4 files changed

+21
-58
lines changed

‎webgl/lessons/ko/webgl-multiple-views.md

Lines changed: 7 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -358,24 +358,16 @@ function render() {
358358
359359
```html
360360
<body>
361-
<div id="outer">
362-
<canvas id="canvas"></canvas>
363-
<div id="content"></div>
364-
</div>
361+
<canvas id="canvas"></canvas>
362+
<div id="content"></div>
365363
</body>
366364
```
367365
368366
다음은 CSS입니다.
369367
370368
```css
371-
html, body {
369+
body {
372370
margin: 0;
373-
height: 100%;
374-
}
375-
#outer {
376-
position: absolute;
377-
height: 100%;
378-
overflow: auto;
379371
}
380372
#content {
381373
margin: 10px;
@@ -486,8 +478,6 @@ for (let i = 0; i < numItems; ++i) {
486478
그렇다면 뷰포트와 시저가 일치하도록 설정한 다음 해당 객체를 그립니다.
487479
488480
```js
489-
const outerElem = document.querySelector('#outer');
490-
491481
function render(time) {
492482
time *= 0.001; // 초 단위로 변환
493483

@@ -498,7 +488,7 @@ function render(time) {
498488
gl.enable(gl.SCISSOR_TEST);
499489

500490
// 캔버스를 현재 스크롤 위치의 상단으로 이동
501-
gl.canvas.style.transform = `translateY(${outerElem.scrollTop}px)`;
491+
gl.canvas.style.transform = `translateY(${window.scrollY}px)`;
502492

503493
for (const {bufferInfo, element, color} of items) {
504494
const rect = element.getBoundingClientRect();
@@ -554,7 +544,7 @@ requestAnimationFrame(render);
554544
코드에서 한 가지 더 주목할 만한 점은 이 라인으로 캔버스를 움직이고 있다는 겁니다.
555545
556546
```js
557-
gl.canvas.style.transform = `translateY(${outerElem.scrollTop}px)`;
547+
gl.canvas.style.transform = `translateY(${window.scrollY}px)`;
558548
```
559549
560550
대신 캔버스를 `position: fixed;`로 설정할 수 있는데, 이 경우에는 페이지에 따라 스크롤되지 않습니다.
@@ -580,13 +570,13 @@ gl.canvas.style.transform = `translateY(${outerElem.scrollTop}px)`;
580570
가로 스크롤을 처리하고 싶다면 이 라인을 바꾸면 되는데요.
581571
582572
```js
583-
gl.canvas.style.transform = `translateY(${outerElem.scrollTop}px)`;
573+
gl.canvas.style.transform = `translateY(${window.scrollY}px)`;
584574
```
585575
586576
이렇게 변경합니다.
587577
588578
```js
589-
gl.canvas.style.transform = `translateX(${outerElem.scrollLeft}px) translateY(${outerElem.scrollTop}px)`;
579+
gl.canvas.style.transform = `translateX(${window.scrollX}px) translateY(${window.scrollY}px)`;
590580
```
591581
592582
{{{example url="../webgl-multiple-views-items-horizontal-scrolling.html"}}}

‎webgl/lessons/webgl-multiple-views.md

Lines changed: 7 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -398,24 +398,16 @@ that goes in front. First the HTML
398398
399399
```html
400400
<body>
401-
<div id="outer">
402-
<canvas id="canvas"></canvas>
403-
<div id="content"></div>
404-
</div>
401+
<canvas id="canvas"></canvas>
402+
<div id="content"></div>
405403
</body>
406404
```
407405
408406
Then the CSS
409407
410408
```css
411-
html, body {
409+
body {
412410
margin: 0;
413-
height: 100%;
414-
}
415-
#outer {
416-
position: absolute;
417-
height: 100%;
418-
overflow: auto;
419411
}
420412
#content {
421413
margin: 10px;
@@ -529,8 +521,6 @@ with the canvas. If it does we set the viewport and scissor to
529521
match and then draw that object.
530522
531523
```js
532-
const outerElem = document.querySelector('#outer');
533-
534524
function render(time) {
535525
time *= 0.001; // convert to seconds
536526

@@ -541,7 +531,7 @@ function render(time) {
541531
gl.enable(gl.SCISSOR_TEST);
542532

543533
// move the canvas to top of the current scroll position
544-
gl.canvas.style.transform = `translateY(${outerElem.scrollTop}px)`;
534+
gl.canvas.style.transform = `translateY(${window.scrollY}px)`;
545535

546536
for (const {bufferInfo, element, color} of items) {
547537
const rect = element.getBoundingClientRect();
@@ -600,7 +590,7 @@ One other notable thing about the code is we're moving the canvas
600590
with this line
601591
602592
```js
603-
gl.canvas.style.transform = `translateY(${outerElem.scrollTop}px)`;
593+
gl.canvas.style.transform = `translateY(${window.scrollY}px)`;
604594
```
605595
606596
Why? We could instead set the canvas to `position: fixed;` in which case
@@ -628,13 +618,13 @@ faster than we can draw our objects. Because of this we have 2 options.
628618
If you want to handle horizontal scrolling just change this line
629619
630620
```js
631-
gl.canvas.style.transform = `translateY(${outerElem.scrollTop}px)`;
621+
gl.canvas.style.transform = `translateY(${window.scrollY}px)`;
632622
```
633623
634624
to this
635625
636626
```js
637-
gl.canvas.style.transform = `translateX(${outerElem.scrollLeft}px) translateY(${outerElem.scrollTop}px)`;
627+
gl.canvas.style.transform = `translateX(${window.scrollX}px) translateY(${window.scrollY}px)`;
638628
```
639629
640630
{{{example url="../webgl-multiple-views-items-horizontal-scrolling.html"}}}

‎webgl/webgl-multiple-views-items-horizontal-scrolling.html

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,10 @@
88
<style>
99
html, body {
1010
margin: 0;
11+
width: 200%;
1112
height: 100%;
1213
}
13-
#outer {
14-
position: absolute;
15-
width: 100%;
16-
height: 100%;
17-
overflow: auto;
18-
}
1914
#content {
20-
width: 200%;
2115
margin: 10px;
2216
}
2317
#canvas {
@@ -44,10 +38,8 @@
4438
</style>
4539
</head>
4640
<body>
47-
<div id="outer">
48-
<canvas id="canvas"></canvas>
49-
<div id="content"></div>
50-
</div>
41+
<canvas id="canvas"></canvas>
42+
<div id="content"></div>
5143
</body>
5244
<!--
5345
for most samples webgl-utils only provides shader compiling/linking and
@@ -170,7 +162,6 @@
170162
}
171163

172164
const fieldOfViewRadians = degToRad(60);
173-
const outerElem = document.querySelector('#outer');
174165

175166
function drawScene(projectionMatrix, cameraMatrix, worldMatrix, bufferInfo) {
176167
// Clear the canvas AND the depth buffer.
@@ -207,7 +198,7 @@
207198
gl.enable(gl.SCISSOR_TEST);
208199

209200
// move the canvas to top of the current scroll position
210-
gl.canvas.style.transform = `translateX(${outerElem.scrollLeft}px) translateY(${outerElem.scrollTop}px)`;
201+
gl.canvas.style.transform = `translateX(${window.scrollX}px) translateY(${window.scrollY}px)`;
211202

212203
for (const {bufferInfo, element, color} of items) {
213204
const rect = element.getBoundingClientRect();

‎webgl/webgl-multiple-views-items.html

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,6 @@
1010
margin: 0;
1111
height: 100%;
1212
}
13-
#outer {
14-
position: absolute;
15-
height: 100%;
16-
overflow: auto;
17-
}
1813
#content {
1914
margin: 10px;
2015
}
@@ -42,10 +37,8 @@
4237
</style>
4338
</head>
4439
<body>
45-
<div id="outer">
46-
<canvas id="canvas"></canvas>
47-
<div id="content"></div>
48-
</div>
40+
<canvas id="canvas"></canvas>
41+
<div id="content"></div>
4942
</body>
5043
<!--
5144
for most samples webgl-utils only provides shader compiling/linking and
@@ -168,7 +161,6 @@
168161
}
169162

170163
const fieldOfViewRadians = degToRad(60);
171-
const outerElem = document.querySelector('#outer');
172164

173165
function drawScene(projectionMatrix, cameraMatrix, worldMatrix, bufferInfo) {
174166
// Clear the canvas AND the depth buffer.
@@ -205,7 +197,7 @@
205197
gl.enable(gl.SCISSOR_TEST);
206198

207199
// move the canvas to top of the current scroll position
208-
gl.canvas.style.transform = `translateY(${outerElem.scrollTop}px)`;
200+
gl.canvas.style.transform = `translateY(${window.scrollY}px)`;
209201

210202
for (const {bufferInfo, element, color} of items) {
211203
const rect = element.getBoundingClientRect();

0 commit comments

Comments
 (0)