gl-util - npm Package Compare versions

Comparing version 2.0.0 to 3.0.0

context.js

 /** @module  gl-util/context */
 'use strict'
 
-const glContext = require('webgl-context')
+var pick = require('pick-by-alias')
 
-module.exports = setContext;
+module.exports = function setContext (o) {
+	// HTMLCanvasElement
+	if (isCanvas(o)) {
+		o = {container: o}
+	}
+	// HTMLElement
+	else if (isElement(o)) {
+		o = {container: o}
+	}
+	// WebGLContext
+	else if (isContext(o)) {
+		o = {gl: o}
+	}
+	// options object
+	else {
+		o = pick(o, {
+			container: 'container target element el canvas holder parent parentNode wrapper use ref root node',
+			gl: 'gl context webgl glContext',
+			attrs: 'attributes attrs contextAttributes',
+			pixelRatio: 'pixelRatio pxRatio px ratio pxratio pixelratio'
+		}, true)
+	}
 
-function setContext (opts) {
-	if (!opts) opts = {};
-	else if (typeof opts === 'string') opts = {};
-	else if (opts.context) return opts.context;
+	if (!o.pixelRatio) o.pixelRatio = window.pixelRatio || 1
 
-	//provide defaults
+	// make sure there is container and canvas
+	if (o.gl) {
+		if (!o.container) o.container = o.gl.canvas
+	}
 
-	//create new context with default options
-	let gl = glContext({
-		canvas: opts.canvas ? opts.canvas : document.createElement('canvas'),
-		antialias: opts.antialias != null ? opts.antialias : true,
-		alpha: opts.alpha != null ? opts.alpha : true,
-		premultipliedAlpha: opts.premultipliedAlpha != null ? opts.premultipliedAlpha : true,
-		preserveDrawingBuffer: opts.preserveDrawingBuffer != null ? opts.preserveDrawingBuffer : true,
-		depth: opts.depth != null ? opts.depth : false,
-		stencil: opts.stencil != null ? opts.stencil : false,
-		width: opts.width,
-		height: opts.height
-	});
-
-	//enable extensions
-	if (opts.float) {
-		let float = gl.getExtension('OES_texture_float');
-		let floatLinear;
-		if (!float) {
-			float = gl.getExtension('OES_texture_half_float');
-			if (!float) {
-				throw Error('WebGL does not support floats.');
-			}
-			floatLinear = gl.getExtension('OES_texture_half_float_linear');
+	if (o.container) {
+		if (typeof o.container === 'string') {
+			let c = document.querySelector(o.container)
+			if (!o.container) throw Error(`Element '${o.container}' is not found`)
+			o.container = c
 		}
+		if (isCanvas(o.container)) {
+			o.canvas = o.container
+			o.container = o.canvas.parentNode
+		}
 		else {
-			floatLinear = gl.getExtension('OES_texture_float_linear');
+			o.canvas = document.createElement('canvas')
+			o.container.appendChild(o.canvas)
 		}
-		if (!floatLinear) throw Error('WebGL does not support floats.');
 	}
+	else {
+		o.container = document.body || document.documentElement
+		o.canvas = document.createElement('canvas')
+		o.container.appendChild(o.canvas)
+	}
 
-	//setup alpha
-	if (!opts.alpha) {
-		gl.enable( gl.BLEND );
-		gl.blendEquation( gl.FUNC_ADD );
-		gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+	// resize canvas
+	var w, h
+	if (o.container != document.body) {
+		var bounds = o.container.getBoundingClientRect()
+		w = o.width || (bounds.right - bounds.left)
+		h = o.height || (bounds.bottom - bounds.top)
 	}
+	else {
+		var sb = scrollbar()
+		w = window.innerWidth - sb[0]
+		h = window.innerHeight - sb[1]
+	}
+    o.canvas.width = o.pixelRatio * w
+    o.canvas.height = o.pixelRatio * h
 
-	return gl;
+	// make sure there is context
+	if (!o.gl) {
+		try {
+			o.gl = o.canvas.getContext('webgl', o.attrs)
+		} catch (e) {
+			try {
+				o.gl = o.canvas.getContext('experimental-webgl', o.attrs)
+			}
+			catch (e) {
+				o.gl = o.canvas.getContext('webgl-experimental', o.attrs)
+			}
+		}
+	}
+
+	return o.gl
 }
+
+
+
+function isCanvas (e) {
+	return typeof e.getContext === 'function'
+		&& 'width' in e
+		&& 'height' in e
+}
+
+function isElement (e) {
+	return typeof e.nodeName === 'string' &&
+		typeof e.appendChild === 'function' &&
+		typeof e.getBoundingClientRect === 'function'
+}
+
+function isContext (e) {
+	return typeof e.drawArrays === 'function' ||
+		typeof e.drawElements === 'function'
+}
+
+function scrollbar () {
+	const div = document.createElement('div')
+
+	div.style.width = '100px'
+	div.style.height = '100px'
+	div.style.overflow = 'scroll'
+	div.style.position = 'absolute'
+	div.style.top = '-9999px'
+	div.style.left = '-9999px'
+
+	document.body.appendChild(div)
+
+	const scrollbarWidth = div.offsetWidth - div.clientWidth
+	const scrollbarHeight = div.offsetHeight - div.clientHeight
+
+	document.body.removeChild(div)
+
+	return [scrollbarWidth, scrollbarHeight]
+}

package.json

 {
   "name": "gl-util",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "Set of practical webgl utils",
@@ -31,5 +31,4 @@ "main": "index.js",
     "object-assign": "^4.1.0",
-    "weakmap-shim": "^1.1.0",
-    "webgl-context": "^2.2.0"
+    "pick-by-alias": "^1.2.0"
   }
 }

readme.md

@@ -10,3 +10,3 @@ # gl-util [![unstable](http://badges.github.io/stability-badges/dist/unstable.svg)](http://github.com/badges/stability-badges)
 
-let gl = u.context({canvas, preserveDrawingBuffer: false})
+let gl = u.context(canvas)
 
@@ -38,19 +38,14 @@ let prog = u.program(gl, `
 
-### `context(options)`
+### `context(container|canvas|options?)`
 
-Get context based off options. Basically an extension of [webgl-context](https://github.com/mattdesl/webgl-context) enabling `float` param and alpha blending function, as well as fixing defaults. Possible options:
+Create and/or return WebGL context for the canvas element, possibly based on options. If `container` is not defined, `document.body` is used.
 
-| Name | Default | Meaning |
-|---|---|---|
-| `canvas` | | An existing canvas element to re-use rather than creating a new one. |
-| `width` | | If specified, will set the canvas width. |
-| `height` | | If specified, will set the canvas height. |
-| `antialias` | `true` | Enable antialiasing. |
-| `alpha` | `true` | Whether canvas contains an alpha buffer, i. e. can be transparent. If `false`, an alpha blending function `gl.blendEquation( gl.FUNC_ADD ); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)` will be enabled. |
-| `premultipliedAlpha` | `true` | Page compositor will assume the drawing buffer contains colors with pre-multiplied alpha. |
-| `preserveDrawingBuffer` | `true` | Delegate clearing context to the author or clear every frame. |
-| `depth` | `false` | Enable depth buffer. |
-| `stencil` | `false` | Enable stencil buffer. |
-| `float` | `true` | Enable `OES_texture_float`/`OES_texture_float_linear` or `OES_texture_half_float`/`OES_texture_half_float_linear` extensions. |
-| `failIfMajorPerformanceCaveat` | | Context will be created if the system performance is low. |
+| Option | Meaning |
+|---|---|
+| `canvas` | A canvas element to obtain context for. |
+| `container` | An element to create canvas in and return context for it. |
+| `width` | If specified, will set the canvas width. |
+| `height` | If specified, will set the canvas height. |
+| `pixelRatio` | Multiplier for `width` and `height`. |
+| `attributes` | Attributes object. Available attributes: `alpha`, `depth`, `stencil`, `antialias`, `premultipliedAlpha`, `preserveDrawingBuffer` and `failIfMajorPerformanceCaveat`. |
 
@@ -60,7 +55,7 @@ ```js
 
-let canvas = document.createElement('canvas')
-
-let gl = getContext('webgl', {
-	canvas: canvas,
-	antialias: true
+// create canvas element in the document.body and retrieve context for it
+let gl = getContext({
+	attributes: {
+		antialias: true
+	}
 })
@@ -101,3 +96,3 @@ ```
 
-### `uni = uniform(gl|program, {name: data, ...} | name?, data?)`
+### `unif = uniform(gl|program, {name: data, ...} | name?, data?)`
 
@@ -161,2 +156,6 @@ Get/set uniform or multiple uniforms. Returns an object with uniform parameters: `{name, location, data, type}`. Uniforms are stored per-program instance.
 
+### `clear(gl, optsion?)`
+
+Clear the viewport.
+
 ## Motivation
@@ -163,0 +162,0 @@

test.js

@@ -6,3 +6,5 @@ 'use strict'
 
-let gl = context({preserveDrawingBuffer: false})
+let gl = context({
+	attributes: {preserveDrawingBuffer: false}
+})
 document.body.appendChild(gl.canvas)
@@ -9,0 +11,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

30297

increased by5.01%

Dependency count

7

decreased by-12.5%

Number of package files

11

increased by10%

Lines of code

730

increased by13.71%

Worsened metrics

Number of lines in readme file

172

decreased by-0.58%

Dependency changes

• + Addedpick-by-alias@^1.2.0

• + Addedpick-by-alias@1.2.0(transitive)

• - Removedweakmap-shim@^1.1.0

• - Removedwebgl-context@^2.2.0

• - Removedget-canvas-context@1.0.2(transitive)

• - Removedweakmap-shim@1.1.1(transitive)

• - Removedwebgl-context@2.2.0(transitive)