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: N Prabindh Sundareson <prabindh@yahoo.com>

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: N Prabindh Sundareson <prabindh@yahoo.com>
76eb355a · Prabindh Sundareson · a347231b · 76eb355a · 76eb355a
隐藏空白更改
内联并排

Showing with 75 addition and 1 deletion

examples/context_assignment_test.html examples/context_assignment_test.html +73 -0

src/renderers/WebGLRenderer.js src/renderers/WebGLRenderer.js +2 -1

未找到文件。
--- a/examples/context_assignment_test.html
+++ b/examples/context_assignment_test.html
+<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>
+
--- a/src/renderers/WebGLRenderer.js
+++ b/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 ) {