Skip to content

Commit 62e54c4

Browse files
PixelsCommanderPixelsCommander
committed
Fixed resizing issues when switching from retina to normal screen and back
Updated htmlgl.com page to support retina and use Pixi v3
1 parent 3c353ba commit 62e54c4

File tree

5 files changed

+91
-58
lines changed

5 files changed

+91
-58
lines changed

‎dist/htmlgl.js‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8728,7 +8728,6 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c
87288728
this.createViewer();
87298729
this.resizeViewer();
87308730
this.appendViewer();
8731-
this.initElements();
87328731
}
87338732

87348733
p.createViewer = function () {
@@ -8762,6 +8761,7 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c
87628761
this.renderer.view.style.webkitTransformOrigin = '0 0';
87638762
this.renderer.view.style.transform = 'scaleX(' + rendererScale + ') scaleY(' + rendererScale + ')';
87648763
this.renderer.view.style.webkitTransform = 'scaleX(' + rendererScale + ') scaleY(' + rendererScale + ')';
8764+
this.updateScrollPosition.bind(this)();
87658765
}
87668766

87678767
this.renderer.resize(width, height);
@@ -8771,13 +8771,15 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c
87718771
this.updateTextures();
87728772
}
87738773

8774+
this.updateElementsPositions();
87748775
this.markStageAsChanged();
87758776
}
87768777

87778778
p.initListeners = function () {
87788779
//window listeners
87798780
w.addEventListener('scroll', this.updateScrollPosition.bind(this));
87808781
w.addEventListener('resize', w.HTMLGL.util.debounce(this.resizeViewer, 500).bind(this));
8782+
w.addEventListener('resize', this.updateElementsPositions.bind(this));
87818783

87828784
//document listeners - mouse and touch events
87838785
document.addEventListener('click', this.onMouseEvent.bind(this), true);
@@ -8830,21 +8832,28 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c
88308832
}
88318833

88328834
p.updateTextures = function () {
8833-
w.HTMLGL.elements.forEach(function(element){
8835+
w.HTMLGL.elements.forEach(function (element) {
88348836
element.updateTexture();
88358837
});
88368838
}
88378839

88388840
p.initElements = function () {
8839-
w.HTMLGL.elements.forEach(function(element){
8841+
w.HTMLGL.elements.forEach(function (element) {
88408842
element.init();
88418843
});
88428844
}
88438845

8846+
p.updateElementsPositions = function () {
8847+
w.HTMLGL.elements.forEach(function (element) {
8848+
element.updateBoundingRect();
8849+
element.updateSpriteTransform();
8850+
});
8851+
}
8852+
88448853
p.onMouseEvent = function (event) {
88458854
var x = event.x || event.pageX,
88468855
y = event.y || event.pageY,
8847-
//Finding element under mouse position
8856+
//Finding element under mouse position
88488857
element = event.dispatcher !== 'html-gl' ? this.elementResolver.getElementByCoordinates(x, y) : null;
88498858

88508859
//Emit event if there is an element under mouse position

‎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/effects.js‎

Lines changed: 63 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
window.addEventListener('DOMContentLoaded', function(){
2+
23
var slider = document.getElementsByTagName('html-gl')[1];
34

45
var renderer = window.HTMLGL.renderer;
@@ -7,58 +8,59 @@ window.addEventListener('DOMContentLoaded', function(){
78

89
var gui = new dat.GUI({});
910

10-
var displacementTexture = PIXI.Texture.fromImage("assets/img/displacement_map.jpg");
11-
var displacementFilter = new PIXI.DisplacementFilter(displacementTexture);
11+
var displacementSprite = new PIXI.TilingSprite.fromImage("assets/img/displacement_map.jpg");
12+
window.HTMLGL.stage.addChild(displacementSprite);
13+
var displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
1214

1315
var displacementFolder = gui.addFolder('Displacement');
1416
displacementFolder.add(filtersSwitchs, '0').name("apply");
1517
displacementFolder.add(displacementFilter.scale, 'x', 1, 200).name("scaleX");
1618
displacementFolder.add(displacementFilter.scale, 'y', 1, 200).name("scaleY");
1719
displacementFolder.open();
1820

19-
var blurFilter = new PIXI.BlurFilter();
21+
var blurFilter = new PIXI.filters.BlurFilter();
2022

2123
var blurFolder = gui.addFolder('Blur');
2224
blurFolder.add(filtersSwitchs, '1').name("apply");
2325
blurFolder.add(blurFilter, 'blurX', 0, 32).name("blurX");
2426
blurFolder.add(blurFilter, 'blurY', 0, 32).name("blurY");
2527

26-
////
28+
////
2729

28-
var pixelateFilter = new PIXI.PixelateFilter();
30+
var invertFilter = new PIXI.filters.InvertFilter();
2931

30-
var pixelateFolder = gui.addFolder('Pixelate');
31-
pixelateFolder.add(filtersSwitchs, '2').name("apply");
32-
pixelateFolder.add(pixelateFilter.size, 'x', 1, 32).name("PixelSizeX");
33-
pixelateFolder.add(pixelateFilter.size, 'y', 1, 32).name("PixelSizeY");
32+
var invertFolder = gui.addFolder('Invert');
33+
invertFolder.add(filtersSwitchs, '2').name("apply");
34+
invertFolder.add(invertFilter, 'invert', 0, 1).name("Invert");
3435

35-
////
36+
////
3637

37-
var invertFilter = new PIXI.InvertFilter();
38+
var pixelateFilter = new PIXI.filters.PixelateFilter();
3839

39-
var invertFolder = gui.addFolder('Invert');
40-
invertFolder.add(filtersSwitchs, '3').name("apply");
41-
invertFolder.add(invertFilter, 'invert', 0, 1).name("Invert");
40+
var pixelateFolder = gui.addFolder('Pixelate');
41+
pixelateFolder.add(filtersSwitchs, '3').name("apply");
42+
pixelateFolder.add(pixelateFilter.size, 'x', 1, 32).name("PixelSizeX");
43+
pixelateFolder.add(pixelateFilter.size, 'y', 1, 32).name("PixelSizeY");
4244

43-
////
45+
////
4446

45-
var grayFilter = new PIXI.GrayFilter();
47+
var grayFilter = new PIXI.filters.GrayFilter();
4648

4749
var grayFolder = gui.addFolder('Gray');
4850
grayFolder.add(filtersSwitchs, '4').name("apply");
4951
grayFolder.add(grayFilter, 'gray', 0, 1).name("Gray");
5052

51-
////
53+
////
5254

53-
var sepiaFilter = new PIXI.SepiaFilter();
55+
var sepiaFilter = new PIXI.filters.SepiaFilter();
5456

5557
var sepiaFolder = gui.addFolder('Sepia');
5658
sepiaFolder.add(filtersSwitchs, '5').name("apply");
5759
sepiaFolder.add(sepiaFilter, 'sepia', 0, 1).name("Sepia");
5860

59-
////
61+
////
6062

61-
var twistFilter = new PIXI.TwistFilter();
63+
var twistFilter = new PIXI.filters.TwistFilter();
6264

6365
var twistFolder = gui.addFolder('Twist');
6466
twistFolder.add(filtersSwitchs, '6').name("apply");
@@ -68,57 +70,60 @@ window.addEventListener('DOMContentLoaded', function(){
6870
twistFolder.add(twistFilter.offset, 'x', 0, 1).name("offset.x");;
6971
twistFolder.add(twistFilter.offset, 'y', 0, 1).name("offset.y");;
7072

71-
////
73+
////
7274

73-
var dotScreenFilter = new PIXI.DotScreenFilter();
75+
var dotScreenFilter = new PIXI.filters.DotScreenFilter();
7476

7577
var dotScreenFolder = gui.addFolder('DotScreen');
7678
dotScreenFolder.add(filtersSwitchs, '7').name("apply");
7779
dotScreenFolder.add(dotScreenFilter, 'angle', 0, 10);
7880
dotScreenFolder.add(dotScreenFilter, 'scale', 0, 1);
7981

80-
////
82+
////
8183

82-
var colorStepFilter = new PIXI.ColorStepFilter();
84+
var colorStepFilter = new PIXI.filters.ColorStepFilter();
8385

8486
var colorStepFolder = gui.addFolder('ColorStep');
8587
colorStepFolder.add(filtersSwitchs, '8').name("apply");
8688

8789
colorStepFolder.add(colorStepFilter, 'step', 1, 100);
8890
colorStepFolder.add(colorStepFilter, 'step', 1, 100);
8991

90-
////
92+
////
9193

92-
var crossHatchFilter = new PIXI.CrossHatchFilter();
94+
var crossHatchFilter = new PIXI.filters.CrossHatchFilter();
9395

9496
var crossHatchFolder = gui.addFolder('CrossHatch');
9597
crossHatchFolder.add(filtersSwitchs, '9').name("apply");
9698

97-
var rgbSplitterFilter = new PIXI.RGBSplitFilter();
99+
var rgbSplitterFilter = new PIXI.filters.RGBSplitFilter();
100+
101+
rgbSplitterFilter.blue = new PIXI.Point(10, 10);
102+
rgbSplitterFilter.green = new PIXI.Point(-10, 10);
103+
rgbSplitterFilter.red = new PIXI.Point(10, -10);
98104

99105
var rgbSplitFolder = gui.addFolder('RGB Splitter');
100106
rgbSplitFolder.add(filtersSwitchs, '10').name("apply");
101107

102108

103-
var filterCollection = [displacementFilter, blurFilter, pixelateFilter, invertFilter, grayFilter, sepiaFilter, twistFilter, dotScreenFilter, colorStepFilter, crossHatchFilter, rgbSplitterFilter];
109+
var filterCollection = [displacementFilter, blurFilter, invertFilter, pixelateFilter, grayFilter, sepiaFilter, twistFilter, dotScreenFilter, colorStepFilter, crossHatchFilter, rgbSplitterFilter];
104110

105-
// create an new instance of a pixi stage
111+
// create an new instance of a pixi stage
106112
var stage = window.HTMLGL.stage;
107113

108114
var pondContainer = slider.sprite;
109-
//stage.addChild(pondContainer);
110115

111116
stage.interactive = true;
112117

113118
var padding = 100;
114119
var bounds = new PIXI.Rectangle(-padding, -padding, window.HTMLGL.renderer.width + padding * 2, window.HTMLGL.renderer.height + padding * 2)
115120

116-
var overlay = new PIXI.TilingSprite(PIXI.Texture.fromImage("assets/img/zeldaWaves.png"), window.HTMLGL.renderer.width, window.HTMLGL.renderer.height);
117-
overlay.alpha = 0.1//0.2
118-
pondContainer.addChild(overlay);
121+
//var overlay = new PIXI.TilingSprite(PIXI.Texture.fromImage("assets/img/zeldaWaves.png"), window.HTMLGL.renderer.width, window.HTMLGL.renderer.height);
122+
//overlay.alpha = 0.1//0.2
123+
//pondContainer.addChild(overlay);
119124

120-
displacementFilter.scale.x = 50;
121-
displacementFilter.scale.y = 50;
125+
displacementFilter.scale.x = 25;
126+
displacementFilter.scale.y = 25;
122127

123128
var count = 0;
124129
var switchy = false;
@@ -128,30 +133,40 @@ window.addEventListener('DOMContentLoaded', function(){
128133
if (window.HTMLGL.scrollY > 1000) {
129134
count += 0.1;
130135

131-
var blurAmount = Math.cos(count) ;
132-
var blurAmount2 = Math.sin(count * 0.8) ;
136+
var blurAmount = Math.cos(count);
137+
var blurAmount2 = Math.sin(count * 0.8);
133138

134139
var filtersToApply = [];
135140

136-
filtersSwitchs[0] ? overlay.visible = true : overlay.visible = false;
137-
138141
for (var i = 0; i < filterCollection.length; i++) {
139-
if(filtersSwitchs[i])filtersToApply.push(filterCollection[i]);
140-
};
142+
if (filtersSwitchs[i])filtersToApply.push(filterCollection[i]);
143+
}
144+
145+
var rgbFilterIndex = filtersToApply.indexOf(rgbSplitterFilter);
146+
147+
if (rgbFilterIndex !== -1) {
148+
slider.sprite.filters = [rgbSplitterFilter];
149+
filtersToApply.splice(rgbFilterIndex, 1);
150+
} else {
151+
if (slider.sprite.filters) {
152+
var rgbFilterIndexOnSlider = slider.sprite.filters.indexOf(rgbSplitterFilter);
153+
if (rgbFilterIndexOnSlider !== -1) {
154+
slider.sprite.filters = null;
155+
}
156+
}
157+
}
141158

142159
pondContainer.filters = filtersToApply.length > 0 ? filtersToApply : null;
143160

144-
displacementFilter.offset.x = count * 10//blurAmount * 40;
145-
displacementFilter.offset.y = count * 10
146-
147-
overlay.tilePosition.x = count * -10//blurAmount * 40;
148-
overlay.tilePosition.y = count * -10
161+
displacementSprite.x = count * 10;
162+
displacementSprite.y = count * 10;
149163

150164
renderer.render(stage);
151165
}
152-
requestAnimFrame( animate );
166+
167+
requestAnimationFrame(animate);
153168
}
154169

155170
renderer.render(stage);
156-
requestAnimFrame( animate );
171+
requestAnimationFrame( animate );
157172
});

‎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: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@
4444
this.createViewer();
4545
this.resizeViewer();
4646
this.appendViewer();
47-
this.initElements();
4847
}
4948

5049
p.createViewer = function () {
@@ -78,6 +77,7 @@
7877
this.renderer.view.style.webkitTransformOrigin = '0 0';
7978
this.renderer.view.style.transform = 'scaleX(' + rendererScale + ') scaleY(' + rendererScale + ')';
8079
this.renderer.view.style.webkitTransform = 'scaleX(' + rendererScale + ') scaleY(' + rendererScale + ')';
80+
this.updateScrollPosition.bind(this)();
8181
}
8282

8383
this.renderer.resize(width, height);
@@ -87,13 +87,15 @@
8787
this.updateTextures();
8888
}
8989

90+
this.updateElementsPositions();
9091
this.markStageAsChanged();
9192
}
9293

9394
p.initListeners = function () {
9495
//window listeners
9596
w.addEventListener('scroll', this.updateScrollPosition.bind(this));
9697
w.addEventListener('resize', w.HTMLGL.util.debounce(this.resizeViewer, 500).bind(this));
98+
w.addEventListener('resize', this.updateElementsPositions.bind(this));
9799

98100
//document listeners - mouse and touch events
99101
document.addEventListener('click', this.onMouseEvent.bind(this), true);
@@ -146,21 +148,28 @@
146148
}
147149

148150
p.updateTextures = function () {
149-
w.HTMLGL.elements.forEach(function(element){
151+
w.HTMLGL.elements.forEach(function (element) {
150152
element.updateTexture();
151153
});
152154
}
153155

154156
p.initElements = function () {
155-
w.HTMLGL.elements.forEach(function(element){
157+
w.HTMLGL.elements.forEach(function (element) {
156158
element.init();
157159
});
158160
}
159161

162+
p.updateElementsPositions = function () {
163+
w.HTMLGL.elements.forEach(function (element) {
164+
element.updateBoundingRect();
165+
element.updateSpriteTransform();
166+
});
167+
}
168+
160169
p.onMouseEvent = function (event) {
161170
var x = event.x || event.pageX,
162171
y = event.y || event.pageY,
163-
//Finding element under mouse position
172+
//Finding element under mouse position
164173
element = event.dispatcher !== 'html-gl' ? this.elementResolver.getElementByCoordinates(x, y) : null;
165174

166175
//Emit event if there is an element under mouse position

0 commit comments

Comments
 (0)