Skip to content

Commit 7ace2ca

Browse files
peteroupcpeteroupc
committed
modify demos some more; add setUseDevicePixelRatio method of Scene3D
1 parent c729c2f commit 7ace2ca

File tree

8 files changed

+181
-20
lines changed

8 files changed

+181
-20
lines changed

‎demos/compositeMesh.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@
88
<script type="text/javascript" src="demoutil.js"></script>
99
</head>
1010
<body>
11+
<p style="position:absolute;left:0;top:1em">
1112
<a href="javascript:link1()">Single color</a>,
12-
<a href="javascript:link2()">Multicolor</a><br>
13+
<a href="javascript:link2()">Multicolor</a></p>
1314
<canvas id=canvas></canvas>
1415
<script id="demo">
1516
//<!--

‎demos/platonic.html‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
<head>
22
<meta charset=utf-8>
3+
<style>
4+
body { margin: 0px; }
5+
canvas { width:100%; height:100%; overflow: hidden; }
6+
</style>
37
<script type="text/javascript" src="../glutil_min.js"></script>
48
<script type="text/javascript" src="demoutil.js"></script>
59
</head>
@@ -106,7 +110,8 @@
106110

107111
// Create the 3D scene; find the HTML canvas and pass it
108112
// to Scene3D.
109-
var scene=new Scene3D(document.getElementById("canvas"));
113+
var scene=new Scene3D(document.getElementById("canvas"))
114+
.cullFace(Scene3D.BACK);
110115
var mesh;
111116
var dims=4.5*2/Math.sqrt(3);
112117
mesh=Meshes.createBox(dims,dims,dims);

‎demos/starfield.html‎

Lines changed: 78 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,30 +46,103 @@
4646
return group;
4747
}
4848

49-
function moveStarField(group, range){
49+
function moveStarField(group, range,frames){
5050
for(var i=0;i<group.shapes.length;i++){
5151
var pos=group.shapes[i].getMatrix()
5252
if(pos[14]>range/2){
5353
// once the star is too close, move it elsewhere
5454
setStarPos(group.shapes[i],range)
5555
group.shapes[i].getTransform().movePosition(0,0,-range);
5656
} else {
57-
group.shapes[i].getTransform().movePosition(0,0,range/250);
57+
group.shapes[i].getTransform().movePosition(0,0,range/250*frames);
5858
}
5959
}
6060
}
6161

62+
63+
/**
64+
* Stores time values to help enable frame-rate independent
65+
* animation.
66+
*/
67+
var Timer=function(){
68+
this.time=null;
69+
this.lastTime=null;
70+
}
71+
/**
72+
* Gets the position of a time value within an interval.
73+
* This is useful in animation cycles lasting a certain number
74+
* of seconds, such as rotating a shape in a 5-second cycle.
75+
* @param {number} timeInMs A time value, in milliseconds.
76+
* This could be the parameter received in a
77+
* <code>requestAnimationFrame()</code> callback method.
78+
* </code>.
79+
* @param {number} interval The length of the interval
80+
* (animation cycle), in milliseconds.
81+
* @return {number} A value in the range [0, 1), where closer
82+
* to 0 means closer to the start, and closer to 1 means closer
83+
* to the end of the interval. If an initial time wasn't set
84+
* by this timer, returns 0.
85+
* @example <caption>The following code sets an angle of
86+
* rotation, in degrees, such that an object rotated with the
87+
* angle does a 360-degree turn in 5 seconds (5000 milliseconds).
88+
* The variable <code>time</code> is assumed to be a time
89+
* value in milliseconds, such as the parameter of a
90+
* <code>requestAnimationFrame()</code> callback method.
91+
* </code>
92+
* var angle = 360 * timer.getTimePosition(time, 5000);
93+
*/
94+
Timer.prototype.getTimePosition=function(timeInMs,intervalInMs){
95+
if(this.time==null) {
96+
this.time=timeInMs;
97+
this.lastTime=timeInMs;
98+
return 0;
99+
} else {
100+
if(this.lastTime==null)this.lastTime=timeInMs;
101+
return ((timeInMs-this.time)%intervalInMs)/intervalInMs;
102+
}
103+
}
104+
/**
105+
* Returns the number of frames that occurred since
106+
* last time, where a frame is 1/60 of a second.
107+
* @param {number} timeInMs A time value, in milliseconds.
108+
* This could be the parameter received in a
109+
* <code>requestAnimationFrame()</code> callback method.
110+
* </code>.
111+
* @return {number} The number of frames relative to
112+
* the last time value passed to the newFrames() or
113+
* getTimePosition() method. The number can include
114+
* fractional frames. If an
115+
* initial time or last time wasn't set by this timer, returns 0.
116+
*/
117+
Timer.prototype.newFrames=function(timeInMs){
118+
if(this.time==null) {
119+
this.time=timeInMs;
120+
this.lastTime=timeInMs;
121+
return 0;
122+
} else if(this.lastTime==null){
123+
this.lastTime=timeInMs;
124+
return 0;
125+
} else {
126+
var diff=(timeInMs-this.lastTime);
127+
this.lastTime=timeInMs;
128+
return diff*60.0/1000.0;
129+
}
130+
}
131+
62132
// Create the 3D scene; find the HTML canvas and pass it
63133
// to Scene3D.
64-
var scene=new Scene3D(document.getElementById("canvas"));
134+
var scene=new Scene3D(document.getElementById("canvas"))
135+
.cullFace(Scene3D.BACK);
65136
var fc=new FrameCounterDiv(scene)
137+
var timer=new Timer();
66138
scene.setPerspective(45,scene.getClientAspect(),5,1000).setLookAt([0,0,500]);
67139
var group=starField(scene,1000)
68140
scene.addShape(group);
69-
GLUtil.renderLoop(function(){
141+
timer.newFrames();
142+
GLUtil.renderLoop(function(time){
143+
moveStarField(group,1000,timer.newFrames(time))
70144
fc.update()
71145
scene.render();
72-
moveStarField(group,1000)
73146
})
74147
//-->
75148
</script>

‎demos/stl.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
</head>
1212
<body>
1313
<canvas id=canvas></canvas>
14-
<p>
14+
<p style="position:absolute;left:0;top:1em">
1515
Model: Marker Holder by theorbtwo, public domain, http://www.thingiverse.com/thing:5570
1616
</p>
1717
<script id="demo">

‎demos/textured.html‎

Lines changed: 64 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,21 +21,81 @@
2121
If you like this, you should donate to Peter O.
2222
at: http://upokecenter.dreamhosters.com/articles/donate-now-2/
2323
*/
24+
25+
26+
/**
27+
* Stores time values to help enable frame-rate independent
28+
* animation.
29+
*/
2430
var Timer=function(){
25-
this.time=null
31+
this.time=null;
32+
this.lastTime=null;
2633
}
34+
/**
35+
* Gets the position of a time value within an interval.
36+
* This is useful in animation cycles lasting a certain number
37+
* of seconds, such as rotating a shape in a 5-second cycle.
38+
* @param {number} timeInMs A time value, in milliseconds.
39+
* This could be the parameter received in a
40+
* <code>requestAnimationFrame()</code> callback method.
41+
* </code>.
42+
* @param {number} interval The length of the interval
43+
* (animation cycle), in milliseconds.
44+
* @return {number} A value in the range [0, 1), where closer
45+
* to 0 means closer to the start, and closer to 1 means closer
46+
* to the end of the interval. If an initial time wasn't set
47+
* by this timer, returns 0.
48+
* @example <caption>The following code sets an angle of
49+
* rotation, in degrees, such that an object rotated with the
50+
* angle does a 360-degree turn in 5 seconds (5000 milliseconds).
51+
* The variable <code>time</code> is assumed to be a time
52+
* value in milliseconds, such as the parameter of a
53+
* <code>requestAnimationFrame()</code> callback method.
54+
* </code>
55+
* var angle = 360 * timer.getTimePosition(time, 5000);
56+
*/
2757
Timer.prototype.getTimePosition=function(timeInMs,intervalInMs){
2858
if(this.time==null) {
29-
this.time=timeInMs
30-
return 0
59+
this.time=timeInMs;
60+
this.lastTime=timeInMs;
61+
return 0;
3162
} else {
63+
if(this.lastTime==null)this.lastTime=timeInMs;
3264
return ((timeInMs-this.time)%intervalInMs)/intervalInMs;
3365
}
3466
}
67+
/**
68+
* Returns the number of frames that occurred since
69+
* last time, where a frame is 1/60 of a second.
70+
* @param {number} timeInMs A time value, in milliseconds.
71+
* This could be the parameter received in a
72+
* <code>requestAnimationFrame()</code> callback method.
73+
* </code>.
74+
* @return {number} The number of frames relative to
75+
* the last time value passed to the newFrames() or
76+
* getTimePosition() method. The number can include
77+
* fractional frames. If an
78+
* initial time or last time wasn't set by this timer, returns 0.
79+
*/
80+
Timer.prototype.newFrames=function(timeInMs){
81+
if(this.time==null) {
82+
this.time=timeInMs;
83+
this.lastTime=timeInMs;
84+
return 0;
85+
} else if(this.lastTime==null){
86+
this.lastTime=timeInMs;
87+
return 0;
88+
} else {
89+
var diff=(timeInMs-this.lastTime);
90+
this.lastTime=timeInMs;
91+
return diff*60.0/1000.0;
92+
}
93+
}
3594

3695
// Create the 3D scene; find the HTML canvas and pass it
3796
// to Scene3D.
38-
var scene=new Scene3D(document.getElementById("canvas"));
97+
var scene=new Scene3D(document.getElementById("canvas"))
98+
.cullFace(Scene3D.BACK);
3999
var fc=new FrameCounterDiv(scene)
40100
scene.setPerspective(45,scene.getClientAspect(),0.1,100);
41101
scene.setLookAt([0,0,40]);

‎demos/tris.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<head>
21
<meta charset=utf-8>
2+
<head>
33
<style>
44
body { margin: 0px; }
55
canvas { width:100%; height:100%; overflow: hidden; }

‎glutil.js‎

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1453,6 +1453,7 @@ function Scene3D(canvasOrContext){
14531453
this._viewMatrix=GLMath.mat4identity();
14541454
this._invView=null;
14551455
this.useDevicePixelRatio=false;
1456+
this._pixelRatio=1;
14561457
this.autoResize=true;
14571458
this.lightSource=new Lights();
14581459
this.width=Math.ceil(this.context.canvas.clientWidth*1.0);
@@ -1521,7 +1522,7 @@ Scene3D.prototype.cullFace=function(value){
15211522
} else {
15221523
this._cullFace=0;
15231524
}
1524-
return;
1525+
return this;
15251526
}
15261527
Scene3D.prototype._setFace=function(){
15271528
if(this._cullFace==Scene3D.BACK){
@@ -1570,6 +1571,26 @@ Scene3D.prototype.frontFace=function(value){
15701571
Scene3D.prototype.setAutoResize=function(value){
15711572
this.autoResize=!!value;
15721573
return this;
1574+
}
1575+
/**
1576+
* Sets whether to use the device's pixel ratio (if supported by
1577+
* the browser) in addition to the canvas's size when setting
1578+
* the viewport's dimensions.<p>
1579+
* When this value changes, the Scene3D will automatically
1580+
* adjust the viewport.
1581+
* @param {boolean} value If true, use the device's pixel ratio
1582+
* when setting the viewport's dimensions. Default is true.
1583+
* @return {glutil.Scene3D} This object.
1584+
*/
1585+
Scene3D.prototype.setUseDevicePixelRatio=function(value){
1586+
var oldvalue=!!this.useDevicePixelRatio;
1587+
this.useDevicePixelRatio=!!value;
1588+
this._pixelRatio=(this.useDevicePixelRatio && window.devicePixelRatio) ?
1589+
window.devicePixelRatio : 1;
1590+
if(oldvalue!=this.useDevicePixelRatio){
1591+
this.setDimensions(this.width,this.height);
1592+
}
1593+
return this;
15731594
}
15741595
/**
15751596
Gets the color used when clearing the screen each frame.
@@ -1629,9 +1650,10 @@ Scene3D.prototype.setDimensions=function(width, height){
16291650
if(width<0 || height<0)throw new Error("width or height negative");
16301651
this.width=Math.ceil(width);
16311652
this.height=Math.ceil(height);
1632-
this.context.canvas.width=this.width;
1633-
this.context.canvas.height=this.height;
1634-
this.context.viewport(0,0,this.width,this.height);
1653+
this.context.canvas.width=this.width*this._pixelRatio;
1654+
this.context.canvas.height=this.height*this._pixelRatio;
1655+
this.context.viewport(0,0,this.width*this._pixelRatio,
1656+
this.height*this._pixelRatio);
16351657
if(this.fbo!="undefined" && this.fbo){
16361658
this.fbo.dispose();
16371659
this.fbo=this.createBuffer();
@@ -2152,8 +2174,8 @@ Scene3D.prototype._setupMatrices=function(shape,program){
21522174
Scene3D.prototype.render=function(){
21532175
if(this.autoResize){
21542176
var c=this.context.canvas;
2155-
if(c.height!=c.clientHeight ||
2156-
c.width!=c.clientWidth){
2177+
if(c.height!=Math.ceil(c.clientHeight)*this._pixelRatio ||
2178+
c.width!=Math.ceil(c.clientWidth)*this._pixelRatio){
21572179
// Resize the canvas if needed
21582180
this.setDimensions(c.clientWidth,c.clientHeight);
21592181
}

‎glutil_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.

0 commit comments

Comments
 (0)