Browse Source

WebGLRenderer: Modify to take in existing WebGL context

This patch modifies WebGLRenderer to take in an existing WebGL context, and adds an unit test to test the behaviour.

Signed-off-by: Prabindh Sundareson <[email protected]>
Prabindh Sundareson 11 years ago
parent
commit
76eb355aff
2 changed files with 75 additions and 1 deletions
  1. 73 0
      examples/context_assignment_test.html
  2. 2 1
      src/renderers/WebGLRenderer.js

+ 73 - 0
examples/context_assignment_test.html

@@ -0,0 +1,73 @@
+<html>
+	<head>
+		<title>Pre-created Context Assignment Test</title>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <script src="../build/three.js" type="text/javascript"></script>
+    
+    <script type="text/javascript">
+      var canvasgl;
+      var gl;
+      
+	function test_context_set() {
+	container = document.getElementById( 'container' );
+        canvasgl = document.getElementById("canvasgl");
+      
+        webgl_init(canvasgl);     
+
+	renderer = new THREE.WebGLRenderer( { givenGLContext:gl } );
+	renderer.setSize( 256, 256 );    
+	renderer.setClearColor(0xff0000, 1);; 
+	renderer.clear( );
+
+	//not needed when setting context from application
+	//container.appendChild( renderer.domElement );    
+      }
+      
+      	//GL init call
+	function webgl_init() {
+        gl = null;
+        
+        try {
+          gl = canvasgl.getContext("webgl") || canvasgl.getContext("experimental-webgl");
+        }
+        catch(e) {
+        }
+        
+        if (!gl) {
+          alert("Sorry, we tried. Could not get WebGL");
+        }
+      }
+    </script>
+  </head>
+	
+	<style type="text/css">
+    #canvas {
+      width: 256px;
+      height: 256px;
+      background-color: green;
+    }
+    #canvasgl {
+      width: 256px;
+      height: 256px;
+    }
+
+	</style>
+	
+	<body onload="test_context_set()">
+<div id="container">
+This test checks if Three.js successfully used the pre-created GL context passed from framework outside of Three.js. <br>For more information refer to <a href="https://github.com/mrdoob/three.js/pull/4353">this issue list in Three.js github</a><hr> The screen should show 2 square boxes of size 256x256, one filled by CSS in green color, and the other filled by WebGL in red color. If the red box is shown and same in size to the green box, it indicates that the test is successful.
+<br>
+<canvas id="canvas"></canvas>
+<br>
+The above is the CSS filled box, not GL, in Green color.
+<br><hr>
+The below is the GL filled box, not CSS, in Red color.
+<br>
+    <canvas id="canvasgl" >
+		</canvas>
+</div>
+<hr>
+Prabindh Sundareson
+	</body>
+</html>
+

+ 2 - 1
src/renderers/WebGLRenderer.js

@@ -12,6 +12,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 	parameters = parameters || {};
 
 	var _canvas = parameters.canvas !== undefined ? parameters.canvas : document.createElement( 'canvas' ),
+	_givenGLContext = parameters.givenGLContext !== undefined ? parameters.givenGLContext : null,
 
 	_precision = parameters.precision !== undefined ? parameters.precision : 'highp',
 
@@ -6517,7 +6518,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 				preserveDrawingBuffer: _preserveDrawingBuffer
 			};
 
-			_gl = _canvas.getContext( 'webgl', attributes ) || _canvas.getContext( 'experimental-webgl', attributes );
+			_gl = _givenGLContext || _canvas.getContext( 'webgl', attributes ) || _canvas.getContext( 'experimental-webgl', attributes );
 
 			if ( _gl === null ) {