Skip to content

Commit 4d6e72d

Browse files
PixelsCommanderPixelsCommander
committed
Fixed flickering when moving from Retina display to a non Retina
1 parent 62e54c4 commit 4d6e72d

6 files changed

Lines changed: 114 additions & 63 deletions

File tree

‎demo/basic-webgl.html‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ <h2>
1616
TODO
1717
</h2>
1818
<ul>
19-
<li>Add retina support in order to avoid blurry content</li>
19+
<li>Add more effects presets</li>
2020
</ul>
2121
<script src="../bower_components/promise-polyfill/Promise.min.js"></script>
2222
<script src="../bower_components/webcomponents.js/CustomElements.min.js"></script>
@@ -39,6 +39,11 @@ <h2>
3939
element.style.transform = 'translateX(400px) translateY(100px)';
4040
}
4141

42+
document.addEventListener('keydown', function(){
43+
window.devicePixelRatio = window.devicePixelRatio === 1 ? 2 : 1;
44+
HTMLGL.context.resizeViewer();
45+
});
46+
4247
window.animate = function () {
4348
var element = document.getElementsByTagName('html-gl')[0];
4449

‎dist/htmlgl.js‎

Lines changed: 53 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -8701,6 +8701,9 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c
87018701
HTMLGL.stage = undefined;
87028702
HTMLGL.renderer = undefined;
87038703
HTMLGL.elements = [];
8704+
HTMLGL.pixelRatio = null;
8705+
HTMLGL.oldPixelRatio = null;
8706+
HTMLGL.enabled = true;
87048707

87058708
//Cache for window`s scroll position, filled in by updateScrollPosition
87068709
HTMLGL.scrollX = 0;
@@ -8745,34 +8748,42 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c
87458748
}
87468749

87478750
p.resizeViewer = function () {
8748-
var width = w.innerWidth,
8749-
height = w.innerHeight,
8750-
oldRatio = HTMLGL.pixelRatio;
8751+
var self = this,
8752+
width = w.innerWidth,
8753+
height = w.innerHeight;
87518754

87528755
//Update pixelRatio since could be resized on different screen with different ratio
87538756
HTMLGL.pixelRatio = window.devicePixelRatio || 1;
87548757

87558758
width = width * HTMLGL.pixelRatio;
87568759
height = height * HTMLGL.pixelRatio;
87578760

8758-
if (oldRatio !== 1 || HTMLGL.pixelRatio !== 1) {
8759-
var rendererScale = 1 / HTMLGL.pixelRatio;
8760-
this.renderer.view.style.transformOrigin = '0 0';
8761-
this.renderer.view.style.webkitTransformOrigin = '0 0';
8762-
this.renderer.view.style.transform = 'scaleX(' + rendererScale + ') scaleY(' + rendererScale + ')';
8763-
this.renderer.view.style.webkitTransform = 'scaleX(' + rendererScale + ') scaleY(' + rendererScale + ')';
8764-
this.updateScrollPosition.bind(this)();
8765-
}
8761+
if (HTMLGL.pixelRatio !== HTMLGL.oldPixelRatio) {
8762+
this.disable();
8763+
this.updateTextures().then(function(){
8764+
self.updateScrollPosition();
8765+
self.updateElementsPositions();
8766+
8767+
var rendererScale = 1 / HTMLGL.pixelRatio;
8768+
self.renderer.view.style.transformOrigin = '0 0';
8769+
self.renderer.view.style.webkitTransformOrigin = '0 0';
8770+
self.renderer.view.style.transform = 'scaleX(' + rendererScale + ') scaleY(' + rendererScale + ')';
8771+
self.renderer.view.style.webkitTransform = 'scaleX(' + rendererScale + ') scaleY(' + rendererScale + ')';
8772+
self.renderer.resize(width, height);
87668773

8767-
this.renderer.resize(width, height);
8774+
this.enable();
87688775

8769-
//No need to update textures when is not mounted yet
8770-
if (this.renderer.view.parentNode) {
8771-
this.updateTextures();
8776+
w.HTMLGL.renderer.render(w.HTMLGL.stage);
8777+
});
8778+
} else {
8779+
if (this.renderer.view.parentNode) { //No need to update textures when is not mounted yet
8780+
this.updateTextures();
8781+
}
8782+
this.updateElementsPositions();
8783+
this.markStageAsChanged();
87728784
}
87738785

8774-
this.updateElementsPositions();
8775-
this.markStageAsChanged();
8786+
HTMLGL.oldPixelRatio = HTMLGL.pixelRatio;
87768787
}
87778788

87788789
p.initListeners = function () {
@@ -8825,16 +8836,20 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c
88258836

88268837
//Avoiding function.bind() for performance and memory consuming reasons
88278838
p.redrawStage = function () {
8828-
if (w.HTMLGL.stage.changed && w.HTMLGL.renderer) {
8839+
if (w.HTMLGL.stage.changed && w.HTMLGL.renderer && w.HTMLGL.enabled) {
88298840
w.HTMLGL.renderer.render(w.HTMLGL.stage);
88308841
w.HTMLGL.stage.changed = false;
88318842
}
88328843
}
88338844

88348845
p.updateTextures = function () {
8846+
var updatePromises = [];
8847+
88358848
w.HTMLGL.elements.forEach(function (element) {
8836-
element.updateTexture();
8849+
updatePromises.push(element.updateTexture());
88378850
});
8851+
8852+
return Promise.all(updatePromises);
88388853
}
88398854

88408855
p.initElements = function () {
@@ -8846,6 +8861,7 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c
88468861
p.updateElementsPositions = function () {
88478862
w.HTMLGL.elements.forEach(function (element) {
88488863
element.updateBoundingRect();
8864+
element.updatePivot();
88498865
element.updateSpriteTransform();
88508866
});
88518867
}
@@ -8868,6 +8884,14 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c
88688884
}
88698885
}
88708886

8887+
p.disable = function () {
8888+
w.HTMLGL.enabled = true;
8889+
}
8890+
8891+
p.enable = function () {
8892+
w.HTMLGL.enabled = false;
8893+
}
8894+
88718895
w.HTMLGL.pixelRatio = window.devicePixelRatio || 1;
88728896

88738897
w.HTMLGL.GLContext = GLContext;
@@ -9046,15 +9070,12 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c
90469070
var self = this;
90479071
self.updateBoundingRect();
90489072

9049-
new HTMLGL.ImagesLoaded(self, function () {
9050-
//Bounds could change during images loading
9051-
self.updateBoundingRect();
9052-
9073+
return new Promise(function(resolve, reject){
90539074
self.image = html2canvas(self, {
90549075
onrendered: self.applyNewTexture,
90559076
width: self.boundingRect.width * HTMLGL.pixelRatio,
90569077
height: self.boundingRect.height * HTMLGL.pixelRatio
9057-
});
9078+
}).then(resolve);
90589079
});
90599080
}
90609081

@@ -9100,13 +9121,15 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c
91009121

91019122
//Getting bounding rect with respect to current scroll position
91029123
p.updateBoundingRect = function () {
9124+
var boundingRect = this.getBoundingClientRect();
9125+
91039126
this.boundingRect = {
9104-
left: this.getBoundingClientRect().left,
9105-
right: this.getBoundingClientRect().right,
9106-
top: this.getBoundingClientRect().top,
9107-
bottom: this.getBoundingClientRect().bottom,
9108-
width: this.getBoundingClientRect().width,
9109-
height: this.getBoundingClientRect().height,
9127+
left: boundingRect.left,
9128+
right: boundingRect.right,
9129+
top: boundingRect.top,
9130+
bottom: boundingRect.bottom,
9131+
width: boundingRect.width,
9132+
height: boundingRect.height,
91109133
};
91119134

91129135
if (this.glParent && this.glParent.boundingRect) {

‎dist/htmlgl.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎page/js/htmlgl.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/gl-context.js‎

Lines changed: 43 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@
1717
HTMLGL.stage = undefined;
1818
HTMLGL.renderer = undefined;
1919
HTMLGL.elements = [];
20+
HTMLGL.pixelRatio = null;
21+
HTMLGL.oldPixelRatio = null;
22+
HTMLGL.enabled = true;
2023

2124
//Cache for window`s scroll position, filled in by updateScrollPosition
2225
HTMLGL.scrollX = 0;
@@ -61,34 +64,42 @@
6164
}
6265

6366
p.resizeViewer = function () {
64-
var width = w.innerWidth,
65-
height = w.innerHeight,
66-
oldRatio = HTMLGL.pixelRatio;
67+
var self = this,
68+
width = w.innerWidth,
69+
height = w.innerHeight;
6770

6871
//Update pixelRatio since could be resized on different screen with different ratio
6972
HTMLGL.pixelRatio = window.devicePixelRatio || 1;
7073

7174
width = width * HTMLGL.pixelRatio;
7275
height = height * HTMLGL.pixelRatio;
7376

74-
if (oldRatio !== 1 || HTMLGL.pixelRatio !== 1) {
75-
var rendererScale = 1 / HTMLGL.pixelRatio;
76-
this.renderer.view.style.transformOrigin = '0 0';
77-
this.renderer.view.style.webkitTransformOrigin = '0 0';
78-
this.renderer.view.style.transform = 'scaleX(' + rendererScale + ') scaleY(' + rendererScale + ')';
79-
this.renderer.view.style.webkitTransform = 'scaleX(' + rendererScale + ') scaleY(' + rendererScale + ')';
80-
this.updateScrollPosition.bind(this)();
81-
}
77+
if (HTMLGL.pixelRatio !== HTMLGL.oldPixelRatio) {
78+
this.disable();
79+
this.updateTextures().then(function(){
80+
self.updateScrollPosition();
81+
self.updateElementsPositions();
82+
83+
var rendererScale = 1 / HTMLGL.pixelRatio;
84+
self.renderer.view.style.transformOrigin = '0 0';
85+
self.renderer.view.style.webkitTransformOrigin = '0 0';
86+
self.renderer.view.style.transform = 'scaleX(' + rendererScale + ') scaleY(' + rendererScale + ')';
87+
self.renderer.view.style.webkitTransform = 'scaleX(' + rendererScale + ') scaleY(' + rendererScale + ')';
88+
self.renderer.resize(width, height);
8289

83-
this.renderer.resize(width, height);
90+
this.enable();
8491

85-
//No need to update textures when is not mounted yet
86-
if (this.renderer.view.parentNode) {
87-
this.updateTextures();
92+
w.HTMLGL.renderer.render(w.HTMLGL.stage);
93+
});
94+
} else {
95+
if (this.renderer.view.parentNode) { //No need to update textures when is not mounted yet
96+
this.updateTextures();
97+
}
98+
this.updateElementsPositions();
99+
this.markStageAsChanged();
88100
}
89101

90-
this.updateElementsPositions();
91-
this.markStageAsChanged();
102+
HTMLGL.oldPixelRatio = HTMLGL.pixelRatio;
92103
}
93104

94105
p.initListeners = function () {
@@ -141,16 +152,20 @@
141152

142153
//Avoiding function.bind() for performance and memory consuming reasons
143154
p.redrawStage = function () {
144-
if (w.HTMLGL.stage.changed && w.HTMLGL.renderer) {
155+
if (w.HTMLGL.stage.changed && w.HTMLGL.renderer && w.HTMLGL.enabled) {
145156
w.HTMLGL.renderer.render(w.HTMLGL.stage);
146157
w.HTMLGL.stage.changed = false;
147158
}
148159
}
149160

150161
p.updateTextures = function () {
162+
var updatePromises = [];
163+
151164
w.HTMLGL.elements.forEach(function (element) {
152-
element.updateTexture();
165+
updatePromises.push(element.updateTexture());
153166
});
167+
168+
return Promise.all(updatePromises);
154169
}
155170

156171
p.initElements = function () {
@@ -162,6 +177,7 @@
162177
p.updateElementsPositions = function () {
163178
w.HTMLGL.elements.forEach(function (element) {
164179
element.updateBoundingRect();
180+
element.updatePivot();
165181
element.updateSpriteTransform();
166182
});
167183
}
@@ -184,6 +200,14 @@
184200
}
185201
}
186202

203+
p.disable = function () {
204+
w.HTMLGL.enabled = true;
205+
}
206+
207+
p.enable = function () {
208+
w.HTMLGL.enabled = false;
209+
}
210+
187211
w.HTMLGL.pixelRatio = window.devicePixelRatio || 1;
188212

189213
w.HTMLGL.GLContext = GLContext;

‎src/gl-element.js‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -118,15 +118,12 @@
118118
var self = this;
119119
self.updateBoundingRect();
120120

121-
new HTMLGL.ImagesLoaded(self, function () {
122-
//Bounds could change during images loading
123-
self.updateBoundingRect();
124-
121+
return new Promise(function(resolve, reject){
125122
self.image = html2canvas(self, {
126123
onrendered: self.applyNewTexture,
127124
width: self.boundingRect.width * HTMLGL.pixelRatio,
128125
height: self.boundingRect.height * HTMLGL.pixelRatio
129-
});
126+
}).then(resolve);
130127
});
131128
}
132129

@@ -172,13 +169,15 @@
172169

173170
//Getting bounding rect with respect to current scroll position
174171
p.updateBoundingRect = function () {
172+
var boundingRect = this.getBoundingClientRect();
173+
175174
this.boundingRect = {
176-
left: this.getBoundingClientRect().left,
177-
right: this.getBoundingClientRect().right,
178-
top: this.getBoundingClientRect().top,
179-
bottom: this.getBoundingClientRect().bottom,
180-
width: this.getBoundingClientRect().width,
181-
height: this.getBoundingClientRect().height,
175+
left: boundingRect.left,
176+
right: boundingRect.right,
177+
top: boundingRect.top,
178+
bottom: boundingRect.bottom,
179+
width: boundingRect.width,
180+
height: boundingRect.height,
182181
};
183182

184183
if (this.glParent && this.glParent.boundingRect) {

0 commit comments

Comments
 (0)