2
0
Эх сурвалжийг харах

Renderer no longer take window.devicePixelRatio by default. Added .getPixelRatio() and .setPixelRatio(). See #5627.

Mr.doob 10 жил өмнө
parent
commit
14a98f9259

+ 67 - 74
docs/api/renderers/CanvasRenderer.html

@@ -9,35 +9,36 @@
 	<body>
 	<body>
 		<h1>[name]</h1>
 		<h1>[name]</h1>
 
 
-		<div class="desc">The Canvas renderer displays your beautifully crafted scenes <em>not</em> using WebGL,
-                  but draws it using the (slower) <a href="http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/">Canvas 2D Context</a> API.</div>
-		<div class="desc">This renderer can be a nice fallback from [page:WebGLRenderer] for simple scenes:</div>
-		<code>
-		function webglAvailable() {
-			try {
-				var canvas = document.createElement( 'canvas' );
-				return !!( window.WebGLRenderingContext && (
-					canvas.getContext( 'webgl' ) ||
-					canvas.getContext( 'experimental-webgl' ) )
-				);
-			} catch ( e ) {
-				return false;
-			}
-		}
-
-		if ( webglAvailable() ) {
-			renderer = new THREE.WebGLRenderer();
-		} else {
-			renderer = new THREE.CanvasRenderer();
-		}
-		</code>
 		<div class="desc">
 		<div class="desc">
+			The Canvas renderer displays your beautifully crafted scenes <em>not</em> using WebGL, but draws it using the (slower) <a href="http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/">Canvas 2D Context</a> API.<br /><br />
+			This renderer can be a nice fallback from [page:WebGLRenderer] for simple scenes:
+
+			<code>
+			function webglAvailable() {
+				try {
+					var canvas = document.createElement( 'canvas' );
+					return !!( window.WebGLRenderingContext && (
+						canvas.getContext( 'webgl' ) ||
+						canvas.getContext( 'experimental-webgl' ) )
+					);
+				} catch ( e ) {
+					return false;
+				}
+			}
+
+			if ( webglAvailable() ) {
+				renderer = new THREE.WebGLRenderer();
+			} else {
+				renderer = new THREE.CanvasRenderer();
+			}
+			</code>
+
 			Note: both WebGLRenderer and CanvasRenderer are embedded in the web page using an HTML5 &lt;canvas&gt; tag.
 			Note: both WebGLRenderer and CanvasRenderer are embedded in the web page using an HTML5 &lt;canvas&gt; tag.
-			The "Canvas" in CanvasRenderer means it uses Canvas 2D instead of WebGL.<br />
+			The "Canvas" in CanvasRenderer means it uses Canvas 2D instead of WebGL.<br /><br />
+
 			Don't confuse either CanvasRenderer with the SoftwareRenderer example, which simulates a screen buffer in a Javascript array.
 			Don't confuse either CanvasRenderer with the SoftwareRenderer example, which simulates a screen buffer in a Javascript array.
 		</div>
 		</div>
 
 
-
 		<h2>Constructor</h2>
 		<h2>Constructor</h2>
 
 
 
 
@@ -45,63 +46,56 @@
         <div>parameters is an optional object with properties defining the renderer's behaviour. The constructor also accepts no parameters at all. In all cases, it will assume sane defaults when parameters are missing.</div>
         <div>parameters is an optional object with properties defining the renderer's behaviour. The constructor also accepts no parameters at all. In all cases, it will assume sane defaults when parameters are missing.</div>
 
 
 		<div>
 		<div>
-		canvas — A [page:Canvas] where the renderer draws its output.<br />
-		devicePixelRatio — The device its pixelRatio.<br />
+		canvas — A [page:Canvas] where the renderer draws its output.
 		</div>
 		</div>
 
 
 
 
 		<h2>Properties</h2>
 		<h2>Properties</h2>
 
 
+    <h3>[property:Object info]</h3>
 
 
-        <h3>[property:Object info]</h3>
-
-		<div>An object with a series of statistical information about the graphics board memory and the rendering process. Useful for debugging or just for the sake of curiosity. The object contains the following fields:</div>
 		<div>
 		<div>
-		<ul>
-			<li>render:
-				<ul>
-					<li>vertices</li>
-					<li>faces</li>
-				</ul>
-			</li>
-		</ul>
+			An object with a series of statistical information about the graphics board memory and the rendering process. Useful for debugging or just for the sake of curiosity. The object contains the following fields:</div>
+			<ul>
+				<li>render:
+					<ul>
+						<li>vertices</li>
+						<li>faces</li>
+					</ul>
+				</li>
+			</ul>
 		</div>
 		</div>
 
 
-        <h3>[property:DOMElement domElement]</h3>
-
-		<div>A [page:Canvas] where the renderer draws its output.<br />
-		This is automatically created by the renderer in the constructor (if not provided already); you just need to add it to your page.</div>
+    <h3>[property:DOMElement domElement]</h3>
 
 
-		<h3>[property:number devicePixelRatio]</h3>
 		<div>
 		<div>
-		The pixel ration of the devices.
-		</div> 
+			A [page:Canvas] where the renderer draws its output.<br />
+			This is automatically created by the renderer in the constructor (if not provided already); you just need to add it to your page.
+		</div>
 
 
 		<h3>[property:Boolean autoClear]</h3>
 		<h3>[property:Boolean autoClear]</h3>
 		<div>
 		<div>
-        Defines whether the renderer should automatically clear its output before rendering.
-        </div>
+      Defines whether the renderer should automatically clear its output before rendering.
+    </div>
 
 
 		<h3>[property:Boolean sortObjects]</h3>
 		<h3>[property:Boolean sortObjects]</h3>
 		<div>
 		<div>
-        Defines whether the renderer should sort objects. Default is true.
-        </div>
-		<div>
-        Note: Sorting is used to attempt to properly render objects that have some degree of transparency.  By definition, sorting objects may not work in all cases.  Depending on the needs of application, it may be neccessary to turn off sorting and use other methods to deal with transparency rendering e.g. manually determining the object rendering order.
-        </div>
+      Defines whether the renderer should sort objects. Default is true.<br />
+      Note: Sorting is used to attempt to properly render objects that have some degree of transparency.  By definition, sorting objects may not work in all cases.  Depending on the needs of application, it may be neccessary to turn off sorting and use other methods to deal with transparency rendering e.g. manually determining the object rendering order.
+    </div>
 
 
 		<h3>[property:boolean sortElements]</h3>
 		<h3>[property:boolean sortElements]</h3>
 		<div>
 		<div>
-		Defines whether the renderer should sort the face of each object. Default is true.
-		</div> 
+			Defines whether the renderer should sort the face of each object. Default is true.
+		</div>
 
 
-		<h2>Methods</h2>
 
 
+		<h2>Methods</h2>
 
 
-		<h3>[method:null render]( [page:Scene scene], [page:Camera camera])</h3>
+		<h3>[method:null render]([page:Scene scene], [page:Camera camera])</h3>
 		<div>
 		<div>
-		scene -- The scene to render. <br />
-		camera -- the camera to view the scene.
+			scene -- The scene to render. <br />
+			camera -- the camera to view the scene.
 		</div>
 		</div>
 		<div>
 		<div>
         Render a scene using a camera.
         Render a scene using a camera.
@@ -109,48 +103,47 @@
 
 
 		<h3>[method:null clear]()</h3>
 		<h3>[method:null clear]()</h3>
 		<div>
 		<div>
-		Tells the renderer to clear its color drawing buffer with the clearcolor.
+			Tells the renderer to clear its color drawing buffer with the clearcolor.
 		</div>
 		</div>
 
 
 		<h3>[method:null setClearColor]([page:Color color], [page:number alpha])</h3>
 		<h3>[method:null setClearColor]([page:Color color], [page:number alpha])</h3>
 		<div>
 		<div>
-		color -- The color to clear the canvas with. <br />
-		alpha -- The alpha channel to clear the canvas with.
+			color -- The color to clear the canvas with. <br />
+			alpha -- The alpha channel to clear the canvas with.
 		</div>
 		</div>
 		<div>
 		<div>
-		This set the clearColor and the clearAlpha.
+			This set the clearColor and the clearAlpha.
 		</div>
 		</div>
 
 
 
 
-		<h3>[method:null setSize]([page:Number width], [page:Number height], [page:boolean updateStyle])</h3>
+		<h3>[method:null setSize]([page:Number width], [page:Number height])</h3>
 		<div>
 		<div>
-		width -- The width of the drawing canvas. <br />
-		height -- The height of the drawing canvas. <br />
-		updateStyle -- If set, update the css of the canvas too.
+			width -- The width of the drawing canvas. <br />
+			height -- The height of the drawing canvas.
 		</div>
 		</div>
 		<div>
 		<div>
-		This set the size of the drawing canvas and if updateStyle is set, then the css of the canvas is updated too.
+			This set the size of the drawing canvas and if updateStyle is set, then the css of the canvas is updated too.
 		</div>
 		</div>
 
 
 		<h3>[method:null setClearColorHex]([page:number hex], [page:number alpha])</h3>
 		<h3>[method:null setClearColorHex]([page:number hex], [page:number alpha])</h3>
 		<div>
 		<div>
-		hex -- The the hexadecimal value of the color to clear the canvas with. <br />
-        alpha -- The alpha channel to clear the canvas with.
+			hex -- The the hexadecimal value of the color to clear the canvas with. <br />
+	    alpha -- The alpha channel to clear the canvas with.
 		</div>
 		</div>
 		<div>
 		<div>
-		This set the clearColor and the clearAlpha.
+			This set the clearColor and the clearAlpha.
 		</div>
 		</div>
-		
+
 		<h3>[method:number getClearColorHex]()</h3>
 		<h3>[method:number getClearColorHex]()</h3>
 		<div>
 		<div>
-		Returns the [page:number hex] color.
+			Returns the [page:number hex] color.
 		</div>
 		</div>
-		
+
 		<h3>[method:number getClearAlpha]()</h3>
 		<h3>[method:number getClearAlpha]()</h3>
 		<div>
 		<div>
-		Returns the alpha value.
+			Returns the alpha value.
 		</div>
 		</div>
-		
+
 		<h2>Empty Methods to Maintain Compatibility with [page:WebglRenderer]</h2>
 		<h2>Empty Methods to Maintain Compatibility with [page:WebglRenderer]</h2>
 		<div>
 		<div>
 			[method:null clearColor]()<br/>
 			[method:null clearColor]()<br/>

+ 4 - 9
docs/api/renderers/WebGLRenderer.html

@@ -150,13 +150,8 @@
 		<h3>[property:ShadowMapPlugin shadowMapPlugin]</h3>
 		<h3>[property:ShadowMapPlugin shadowMapPlugin]</h3>
 		<div>
 		<div>
 		This contains the reference to the shadowMapPlugin.
 		This contains the reference to the shadowMapPlugin.
-		</div> 
-
+		</div>
 
 
-		<h3>[property:number devicePixelRatio]</h3>
-		<div>
-		The pixel ration of the devices. 
-		</div> 
 
 
 		<h2>Methods</h2>
 		<h2>Methods</h2>
 
 
@@ -267,7 +262,7 @@
 		<div>
 		<div>
 		This method sets the correct blending.
 		This method sets the correct blending.
 		</div>
 		</div>
-		
+
 		<h3>[method:null setTexture]( [page:Texture texture], [page:number slot] )</h3>
 		<h3>[method:null setTexture]( [page:Texture texture], [page:number slot] )</h3>
 		<div>
 		<div>
 		texture -- The [page:Texture texture] that needs to be set.<br />
 		texture -- The [page:Texture texture] that needs to be set.<br />
@@ -276,7 +271,7 @@
 		<div>
 		<div>
 		This method sets the correct texture to the correct slot for the wegl shader. The slot number can be found as a value of the uniform of the sampler.
 		This method sets the correct texture to the correct slot for the wegl shader. The slot number can be found as a value of the uniform of the sampler.
 		</div>
 		</div>
-		
+
 		<h3>[method:null setRenderTarget]( [page:WebGLRenderTarget renderTarget] )</h3>
 		<h3>[method:null setRenderTarget]( [page:WebGLRenderTarget renderTarget] )</h3>
 		<div>
 		<div>
 		renderTarget -- The [page:WebGLRenderTarget renderTarget] that needs to be activated.<br />
 		renderTarget -- The [page:WebGLRenderTarget renderTarget] that needs to be activated.<br />
@@ -302,7 +297,7 @@
 
 
 		<h3>[method:null setMaterialFaces]([page:Material material])</h3>
 		<h3>[method:null setMaterialFaces]([page:Material material])</h3>
 		<div>
 		<div>
-		material -- The [page:Material material] with side that shouldn't be culled.  
+		material -- The [page:Material material] with side that shouldn't be culled.
 		</div>
 		</div>
 		<div>
 		<div>
 		This sets which side needs to be culled in the webgl renderer.
 		This sets which side needs to be culled in the webgl renderer.

+ 3 - 3
examples/js/effects/OculusRiftEffect.js

@@ -150,13 +150,13 @@ THREE.OculusRiftEffect = function ( renderer, options ) {
 
 
 		// Create render target
 		// Create render target
 		if ( renderTarget ) renderTarget.dispose();
 		if ( renderTarget ) renderTarget.dispose();
-		renderTarget = new THREE.WebGLRenderTarget( ( HMD.hResolution * distScale / 2 ) * renderer.devicePixelRatio, ( HMD.vResolution * distScale ) * renderer.devicePixelRatio, RTParams );
+		renderTarget = new THREE.WebGLRenderTarget( HMD.hResolution * distScale / 2, HMD.vResolution * distScale, RTParams );
 		RTMaterial.uniforms[ "texid" ].value = renderTarget;
 		RTMaterial.uniforms[ "texid" ].value = renderTarget;
 
 
-	}	
+	}
 	this.getHMD = function() {return HMD};
 	this.getHMD = function() {return HMD};
 
 
-	this.setHMD(HMD);	
+	this.setHMD(HMD);
 
 
 	this.setSize = function ( width, height ) {
 	this.setSize = function ( width, height ) {
 		left.viewport = [width/2 - HMD.hResolution/2, height/2 - HMD.vResolution/2, HMD.hResolution/2, HMD.vResolution];
 		left.viewport = [width/2 - HMD.hResolution/2, height/2 - HMD.vResolution/2, HMD.hResolution/2, HMD.vResolution];

+ 2 - 2
examples/js/effects/VREffect.js

@@ -82,8 +82,8 @@ THREE.VREffect = function ( renderer, done ) {
 		var leftEyeTranslation = this.leftEyeTranslation;
 		var leftEyeTranslation = this.leftEyeTranslation;
 		var rightEyeTranslation = this.rightEyeTranslation;
 		var rightEyeTranslation = this.rightEyeTranslation;
 		var renderer = this._renderer;
 		var renderer = this._renderer;
-		var rendererWidth = renderer.domElement.width / renderer.devicePixelRatio;
-		var rendererHeight = renderer.domElement.height / renderer.devicePixelRatio;
+		var rendererWidth = renderer.domElement.clientWidth;
+		var rendererHeight = renderer.domElement.clientHeight;
 		var eyeDivisionLine = rendererWidth / 2;
 		var eyeDivisionLine = rendererWidth / 2;
 
 
 		renderer.enableScissorTest( true );
 		renderer.enableScissorTest( true );

+ 23 - 9
examples/js/renderers/CanvasRenderer.js

@@ -59,6 +59,8 @@ THREE.CanvasRenderer = function ( parameters ) {
 	_viewportWidth = _canvasWidth,
 	_viewportWidth = _canvasWidth,
 	_viewportHeight = _canvasHeight,
 	_viewportHeight = _canvasHeight,
 
 
+	pixelRatio = 1,
+
 	_context = _canvas.getContext( '2d', {
 	_context = _canvas.getContext( '2d', {
 		alpha: parameters.alpha === true
 		alpha: parameters.alpha === true
 	} ),
 	} ),
@@ -123,8 +125,6 @@ THREE.CanvasRenderer = function ( parameters ) {
 
 
 	this.domElement = _canvas;
 	this.domElement = _canvas;
 
 
-	this.devicePixelRatio = self.devicePixelRatio !== undefined ? self.devicePixelRatio : 1;
-
 	this.autoClear = true;
 	this.autoClear = true;
 	this.sortObjects = true;
 	this.sortObjects = true;
 	this.sortElements = true;
 	this.sortElements = true;
@@ -145,10 +145,24 @@ THREE.CanvasRenderer = function ( parameters ) {
 	this.supportsVertexTextures = function () {};
 	this.supportsVertexTextures = function () {};
 	this.setFaceCulling = function () {};
 	this.setFaceCulling = function () {};
 
 
+	//
+
+	this.getPixelRatio = function () {
+
+		return pixelRatio;
+
+	};
+
+	this.setPixelRatio = function ( value ) {
+
+		pixelRatio = value;
+
+	};
+
 	this.setSize = function ( width, height, updateStyle ) {
 	this.setSize = function ( width, height, updateStyle ) {
 
 
-		_canvasWidth = width * this.devicePixelRatio;
-		_canvasHeight = height * this.devicePixelRatio;
+		_canvasWidth = width * pixelRatio;
+		_canvasHeight = height * pixelRatio;
 
 
 		_canvas.width = _canvasWidth;
 		_canvas.width = _canvasWidth;
 		_canvas.height = _canvasHeight;
 		_canvas.height = _canvasHeight;
@@ -183,11 +197,11 @@ THREE.CanvasRenderer = function ( parameters ) {
 
 
 	this.setViewport = function ( x, y, width, height ) {
 	this.setViewport = function ( x, y, width, height ) {
 
 
-		_viewportX = x * this.devicePixelRatio;
-		_viewportY = y * this.devicePixelRatio;
+		_viewportX = x * pixelRatio;
+		_viewportY = y * pixelRatio;
 
 
-		_viewportWidth = width * this.devicePixelRatio;
-		_viewportHeight = height * this.devicePixelRatio;
+		_viewportWidth = width * pixelRatio;
+		_viewportHeight = height * pixelRatio;
 
 
 	};
 	};
 
 
@@ -700,7 +714,7 @@ THREE.CanvasRenderer = function ( parameters ) {
 				    material instanceof THREE.MeshPhongMaterial ) {
 				    material instanceof THREE.MeshPhongMaterial ) {
 
 
 			if ( material.map !== null ) {
 			if ( material.map !== null ) {
-			
+
 				var mapping = material.map.mapping;
 				var mapping = material.map.mapping;
 
 
 				if ( mapping === THREE.UVMapping ) {
 				if ( mapping === THREE.UVMapping ) {

+ 11 - 16
examples/js/renderers/WebGLDeferredRenderer.js

@@ -11,14 +11,9 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
 	var pixelHeight = parameters.height !== undefined ? parameters.height : 600;
 	var pixelHeight = parameters.height !== undefined ? parameters.height : 600;
 	var currentScale = parameters.scale !== undefined ? parameters.scale : 1;
 	var currentScale = parameters.scale !== undefined ? parameters.scale : 1;
 
 
-	var devicePixelRatio = self.devicePixelRatio !== undefined ? self.devicePixelRatio : 1;
-
-	var fullWidth = pixelWidth * devicePixelRatio;
-	var fullHeight = pixelHeight * devicePixelRatio;
-	
-	var scaledWidth = Math.floor( currentScale * fullWidth );
-	var scaledHeight = Math.floor( currentScale * fullHeight );
-	
+	var scaledWidth = Math.floor( currentScale * pixelWidth );
+	var scaledHeight = Math.floor( currentScale * pixelHeight );
+
 	var brightness = parameters.brightness !== undefined ? parameters.brightness : 1;
 	var brightness = parameters.brightness !== undefined ? parameters.brightness : 1;
 	var tonemapping = parameters.tonemapping !== undefined ? parameters.tonemapping : THREE.SimpleOperator;
 	var tonemapping = parameters.tonemapping !== undefined ? parameters.tonemapping : THREE.SimpleOperator;
 	var antialias = parameters.antialias !== undefined ? parameters.antialias : false;
 	var antialias = parameters.antialias !== undefined ? parameters.antialias : false;
@@ -28,7 +23,7 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
 	if ( this.renderer === undefined ) {
 	if ( this.renderer === undefined ) {
 
 
 		this.renderer = new THREE.WebGLRenderer( { antialias: false } );
 		this.renderer = new THREE.WebGLRenderer( { antialias: false } );
-		this.renderer.setSize( fullWidth, fullHeight );
+		this.renderer.setSize( pixelWidth, pixelHeight );
 		this.renderer.setClearColor( 0x000000, 0 );
 		this.renderer.setClearColor( 0x000000, 0 );
 
 
 		this.renderer.autoClear = false;
 		this.renderer.autoClear = false;
@@ -886,8 +881,8 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
 
 
 		currentScale = scale;
 		currentScale = scale;
 
 
-		scaledWidth = Math.floor( currentScale * fullWidth );
-		scaledHeight = Math.floor( currentScale * fullHeight );
+		scaledWidth = Math.floor( currentScale * pixelWidth );
+		scaledHeight = Math.floor( currentScale * pixelHeight );
 
 
 		compNormalDepth.setSize( scaledWidth, scaledHeight );
 		compNormalDepth.setSize( scaledWidth, scaledHeight );
 		compColor.setSize( scaledWidth, scaledHeight );
 		compColor.setSize( scaledWidth, scaledHeight );
@@ -917,16 +912,16 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
 
 
 		compositePass.uniforms[ 'samplerLight' ].value = compLight.renderTarget2;
 		compositePass.uniforms[ 'samplerLight' ].value = compLight.renderTarget2;
 
 
-		effectFXAA.uniforms[ 'resolution' ].value.set( 1 / fullWidth, 1 / fullHeight );
+		effectFXAA.uniforms[ 'resolution' ].value.set( 1 / pixelWidth, 1 / pixelHeight );
 
 
 	};
 	};
 
 
 	this.setSize = function ( width, height ) {
 	this.setSize = function ( width, height ) {
 
 
-		fullWidth = width;
-		fullHeight = height;
+		pixelWidth = width;
+		pixelHeight = height;
 
 
-		this.renderer.setSize( fullWidth, fullHeight );
+		this.renderer.setSize( pixelWidth, pixelHeight );
 
 
 		this.setScale( currentScale );
 		this.setScale( currentScale );
 
 
@@ -1174,7 +1169,7 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
 		// FXAA
 		// FXAA
 
 
 		effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
 		effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
-		effectFXAA.uniforms[ 'resolution' ].value.set( 1 / fullWidth, 1 / fullHeight );
+		effectFXAA.uniforms[ 'resolution' ].value.set( 1 / pixelWidth, 1 / pixelHeight );
 		effectFXAA.renderToScreen = true;
 		effectFXAA.renderToScreen = true;
 
 
 		//
 		//

+ 24 - 11
src/renderers/WebGLRenderer.js

@@ -14,6 +14,8 @@ THREE.WebGLRenderer = function ( parameters ) {
 	var _canvas = parameters.canvas !== undefined ? parameters.canvas : document.createElement( 'canvas' ),
 	var _canvas = parameters.canvas !== undefined ? parameters.canvas : document.createElement( 'canvas' ),
 	_context = parameters.context !== undefined ? parameters.context : null,
 	_context = parameters.context !== undefined ? parameters.context : null,
 
 
+	pixelRatio = 1,
+
 	_precision = parameters.precision !== undefined ? parameters.precision : 'highp',
 	_precision = parameters.precision !== undefined ? parameters.precision : 'highp',
 
 
 	_alpha = parameters.alpha !== undefined ? parameters.alpha : false,
 	_alpha = parameters.alpha !== undefined ? parameters.alpha : false,
@@ -42,7 +44,6 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 
 	this.domElement = _canvas;
 	this.domElement = _canvas;
 	this.context = null;
 	this.context = null;
-	this.devicePixelRatio = self.devicePixelRatio !== undefined ? self.devicePixelRatio : 1;
 
 
 	// clearing
 	// clearing
 
 
@@ -464,10 +465,22 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 
 	};
 	};
 
 
+	this.getPixelRatio = function () {
+
+		return pixelRatio;
+
+	};
+
+	this.setPixelRatio = function ( value ) {
+
+		pixelRatio = value;
+
+	};
+
 	this.setSize = function ( width, height, updateStyle ) {
 	this.setSize = function ( width, height, updateStyle ) {
 
 
-		_canvas.width = width * this.devicePixelRatio;
-		_canvas.height = height * this.devicePixelRatio;
+		_canvas.width = width * pixelRatio;
+		_canvas.height = height * pixelRatio;
 
 
 		if ( updateStyle !== false ) {
 		if ( updateStyle !== false ) {
 
 
@@ -482,11 +495,11 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 
 	this.setViewport = function ( x, y, width, height ) {
 	this.setViewport = function ( x, y, width, height ) {
 
 
-		_viewportX = x * this.devicePixelRatio;
-		_viewportY = y * this.devicePixelRatio;
+		_viewportX = x * pixelRatio;
+		_viewportY = y * pixelRatio;
 
 
-		_viewportWidth = width * this.devicePixelRatio;
-		_viewportHeight = height * this.devicePixelRatio;
+		_viewportWidth = width * pixelRatio;
+		_viewportHeight = height * pixelRatio;
 
 
 		_gl.viewport( _viewportX, _viewportY, _viewportWidth, _viewportHeight );
 		_gl.viewport( _viewportX, _viewportY, _viewportWidth, _viewportHeight );
 
 
@@ -495,10 +508,10 @@ THREE.WebGLRenderer = function ( parameters ) {
 	this.setScissor = function ( x, y, width, height ) {
 	this.setScissor = function ( x, y, width, height ) {
 
 
 		_gl.scissor(
 		_gl.scissor(
-			x * this.devicePixelRatio,
-			y * this.devicePixelRatio,
-			width * this.devicePixelRatio,
-			height * this.devicePixelRatio
+			x * pixelRatio,
+			y * pixelRatio,
+			width * pixelRatio,
+			height * pixelRatio
 		);
 		);
 
 
 	};
 	};