Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

gl-util

Package Overview
Dependencies
Maintainers
1
Versions
35
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

gl-util - npm Package Compare versions

Comparing version 1.1.6 to 2.0.0

7

attribute.js

@@ -6,8 +6,7 @@ 'use strict'

const getProgram = require('./program')
const WeakMap = require('es6-weak-map');
const _WeakMap = require('is-firefox') ? Map : WeakMap;
let attributesCache = setAttribute.cache = new WeakMap();
let attributesIdx = new WeakMap();
let attributesCache = setAttribute.cache = new _WeakMap();
let attributesIdx = new _WeakMap();
module.exports = setAttribute;

@@ -14,0 +13,0 @@

{
"name": "gl-util",
"version": "1.1.6",
"version": "2.0.0",
"description": "Set of practical webgl utils",

@@ -11,3 +11,3 @@ "main": "index.js",

"type": "git",
"url": "git+https://github.com/dfcreative/gl-util.git"
"url": "git+https://github.com/dy/gl-util.git"
},

@@ -22,6 +22,7 @@ "keywords": [

"bugs": {
"url": "https://github.com/dfcreative/gl-util/issues"
"url": "https://github.com/dy/gl-util/issues"
},
"homepage": "https://github.com/dfcreative/gl-util#readme",
"homepage": "https://github.com/dy/gl-util#readme",
"dependencies": {
"es6-weak-map": "^2.0.2",
"is-browser": "^2.0.1",

@@ -28,0 +29,0 @@ "is-firefox": "^1.0.3",

@@ -9,50 +9,56 @@ 'use strict'

//TODO: delete program by passing null
//TODO: keep track of used programs to avoid this request below, think how
// TODO: delete program by passing null
// TODO: keep track of used programs to avoid this request below, think how
//if just getProgram
// if just getProgram
if (!vSrc && !fSrc) {
return gl.getParameter(gl.CURRENT_PROGRAM);
return gl.getParameter(gl.CURRENT_PROGRAM)
}
//if WebGLProgram directly - enable program
// if WebGLProgram directly - enable program
if (vSrc && typeof vSrc !== 'string') {
gl.useProgram(vSrc);
gl.useProgram(vSrc)
if (!vSrc.gl) vSrc.gl = gl
return vSrc
}
//otherwise create and enable program
if (!vSrc || !fSrc) throw Error('Vertex/fragment source is not provided');
// otherwise create and enable program
// TODO: cache shaders
// TODO: provide gl on a program
if (!vSrc || !fSrc) throw Error('Vertex/fragment source is not provided')
var fShader = gl.createShader(gl.FRAGMENT_SHADER);
var vShader = gl.createShader(gl.VERTEX_SHADER);
var fShader = gl.createShader(gl.FRAGMENT_SHADER)
var vShader = gl.createShader(gl.VERTEX_SHADER)
gl.shaderSource(fShader, fSrc);
gl.shaderSource(vShader, vSrc);
gl.shaderSource(fShader, fSrc)
gl.shaderSource(vShader, vSrc)
gl.compileShader(fShader);
gl.compileShader(fShader)
if (!gl.getShaderParameter(fShader, gl.COMPILE_STATUS)) {
throw Error(gl.getShaderInfoLog(fShader));
throw Error(gl.getShaderInfoLog(fShader))
}
gl.compileShader(vShader);
gl.compileShader(vShader)
if (!gl.getShaderParameter(vShader, gl.COMPILE_STATUS)) {
throw Error(gl.getShaderInfoLog(vShader));
throw Error(gl.getShaderInfoLog(vShader))
}
var program = gl.createProgram();
gl.attachShader(program, vShader);
gl.attachShader(program, fShader);
gl.linkProgram(program);
var program = gl.createProgram()
gl.attachShader(program, vShader)
gl.attachShader(program, fShader)
gl.linkProgram(program)
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
throw Error(gl.getProgramInfoLog(program));
throw Error(gl.getProgramInfoLog(program))
}
gl.useProgram(program);
gl.useProgram(program)
// save gl reference
program.gl = gl
return program;
}

@@ -8,8 +8,7 @@ # gl-util [![unstable](http://badges.github.io/stability-badges/dist/unstable.svg)](http://github.com/badges/stability-badges)

```js
const util = require('gl-util');
const u = require('gl-util');
let gl = util.context({preserveDrawingBuffer: false})
document.body.appendChild(gl.canvas)
let gl = u.context({canvas, preserveDrawingBuffer: false})
util.program(gl, `
let prog = u.program(gl, `
precision mediump float;

@@ -31,4 +30,4 @@

`);
util.attribute(gl, 'position', [0,0, 1,0, 0,1]);
util.uniform(gl, 'color', [1, .2, 0, 1.]);
u.attribute(prog, 'position', [0,0, 1,0, 0,1]);
u.uniform(prog, 'color', [1, .2, 0, 1.]);

@@ -69,11 +68,11 @@ gl.drawArrays(gl.TRIANGLES, 0, 3);

### `program(gl, program?)`
### `program(gl, vertSource, fragSource)`
### `prog = program(gl, prog|vert?, frag?)`
Get/set active program or create new program from vertex and fragment sources. The _WebGLProgram_ instance is returned.
Set active program or create a new program from vertex and fragment sources. Programs are cached for the context by source. The _WebGLProgram_ instance is returned.
```js
const createProgram = require('gl-util/program')
const program = require('gl-util/program')
let program = createProgram(gl, `
// create and set program
let prog = program(gl, `
precision mediump float;

@@ -97,8 +96,10 @@

`)
// set active program
program(gl, prog)
```
### `uniform(gl, name?, data?, program?)`
### `uniform(gl, {name: data, ...}, program?)`
### `uni = uniform(gl|program, {name: data, ...} | name?, data?)`
Get/set uniform or multiple uniforms. Returns object with uniform parameters: `{name, location, data, type}`. Uniforms are stored per-program instance, so to make sure right program is active before updating uniforms a `program` can be passed as the last argument.
Get/set uniform or multiple uniforms. Returns an object with uniform parameters: `{name, location, data, type}`. Uniforms are stored per-program instance.

@@ -111,4 +112,3 @@ ```js

### `texture(gl, name?, data|parameters?, program?)`
### `texture(gl, {name: data|parameters, ...}, program?)`
### `txt = texture(gl, {name: params, ...} | name?, params?)`

@@ -134,7 +134,6 @@ Set texture[s] data or parameters:

texture(gl, 'image', './picture.gif');
let {width, height} = texture(gl, 'image', './picture.gif');
```
### `attribute(gl, name?, data|parameters?, program?)`
### `attribute(gl, {name: data|parameters, ...}, program?)`
### `attr = attribute(gl, {name: params, ...} | name?, params?)`

@@ -145,3 +144,3 @@ Set attribute[s] data or parameters:

|---|---|---|
| `data` | `null` | Data for the attribute, can be array or typed array |
| `data` | `null` | Data for the attribute, can be array, typed array or array buffer |
| `size` | `2` | Number of data items per vertex |

@@ -167,6 +166,15 @@ | `stride` | `0` | Offset in bytes between the beginning of consecutive vertex attributes. |

There are [regl](https://github.com/regl-project/regl) and other [stack.gl](https://github.com/stackgl/) components like _gl-texture_, _gl-shader_ etc, so why bother?
There are [regl](https://github.com/regl-project/regl), [stack.gl](https://github.com/stackgl/) and many other WegGL components or frameworks, so why gl-util?
Because their API may give hard time remembering, same as pure webgl methods. Also _gl-utils_ do not supersede webgl API, so that allows for debugging pure webgl for a moment if one need to. Also if one need minimalistic webgl setup it may be better to opt for a couple of functions over relatively massive stack.gl components.
* WebGL frameworks API is usually difficult to remember, not much better than pure WebGL, although _regl_ does a great job. _gl-util_ is like functions from any WebGL tutorial - tiny, handy and already familiar.
* _gl-util_ does not supersede WebGL API - that allows for debugging pure WebGL at any moment.
* _gl-util_ is tiny - if one needs minimalistic WebGL setup it may be better to opt for a couple of functions than massive stack.gl components or regl (70kb+).
* regl API may be cumbersome for organizing components
_gl-util_ is like functions from any webgl tutorial. Tiny, handy and already familiar, so.
## License
(c) 2018 Dmitry Yv. MIT License
so

@@ -1,5 +0,7 @@

const util = require('./')
'use strict'
const {program, attribute, uniform, context, texture} = require('./')
const assert = require('assert')
let gl = util.context({preserveDrawingBuffer: false})
let gl = context({preserveDrawingBuffer: false})
document.body.appendChild(gl.canvas)

@@ -10,3 +12,3 @@

let p1 = util.program(gl, `
let p1 = program(gl, `
precision mediump float;

@@ -29,3 +31,3 @@

let p2 = util.program(gl, `
let p2 = program(gl, `
precision mediump float;

@@ -48,3 +50,3 @@

let p3 = util.program(gl, `
let p3 = program(gl, `
precision mediump float;

@@ -70,20 +72,20 @@

program(gl, p1)
attribute(gl, 'position', {data: [0,0,1,0,0,1]});
uniform(gl, 'color', [1, .2, 0, 1.]);
util.program(gl, p1);
util.attribute(gl, 'position', {data: [0,0,1,0,0,1]});
util.uniform(gl, 'color', [1, .2, 0, 1.]);
gl.drawArrays(gl.TRIANGLES, 0, 3);
setTimeout(() => {
util.program(gl, p2);
util.attribute(gl, 'position', {data: [0,0,0,.5,0,0,0,.5,0]});
util.uniform(gl, 'color', [.8, .9, 0])
program(gl, p2);
attribute(gl, 'position', {data: [0,0,0,.5,0,0,0,.5,0]});
uniform(gl, 'color', [.8, .9, 0])
gl.drawArrays(gl.TRIANGLES, 0, 3);
setTimeout(() => {
util.program(gl, p3);
util.uniform(gl, 'x', 1);
util.attribute(gl, 'position', {data: [0,0,1,0,0,1]});
util.texture(gl, 'color', './texture.gif');
util.uniform(gl, 'viewport', [0,0,gl.drawingBufferWidth, gl.drawingBufferHeight]);
program(gl, p3);
uniform(gl, 'x', 1);
attribute(gl, 'position', {data: [0,0,1,0,0,1]});
texture(gl, 'color', './texture.gif');
uniform(gl, 'viewport', [0,0,gl.drawingBufferWidth, gl.drawingBufferHeight]);
setTimeout(() => {

@@ -90,0 +92,0 @@ gl.drawArrays(gl.TRIANGLES, 0, 3);

@@ -6,51 +6,51 @@ 'use strict'

const getProgram = require('./program')
const WeakMap = require('es6-weak-map')
const _WeakMap = require('is-firefox') ? Map : WeakMap;
let texturesCache = setTexture.cache = new WeakMap()
let texturesIdx = new WeakMap()
let texturesCache = setTexture.cache = new _WeakMap();
let texturesIdx = new _WeakMap();
module.exports = setTexture
module.exports = setTexture;
function setTexture (gl, name, options) {
if (!gl) throw Error('WebGL context is not provided')
function setTexture (gl, name, options, program) {
if (!gl) throw Error('WebGL context is not provided');
if (options instanceof WebGLProgram) {
program = options;
options = null;
let program
if (gl instanceof WebGLProgram) {
program = gl
gl = program.gl
}
else if (!program) {
program = getProgram(gl, program);
else {
program = getProgram(gl)
}
if (!program) throw Error('Context has no active program');
if (!program) throw Error('Context has no active program')
//object with textures passed
// object with textures passed
if (name && typeof name != 'string') {
let result = {};
let textures = name;
let result = {}
let textures = name
for (let name in textures) {
result[name] = setTexture(gl, name, textures[name], program);
result[name] = setTexture(gl, name, textures[name], program)
}
return result;
return result
}
let textures = texturesCache.has(gl) ? texturesCache.get(gl) : texturesCache.set(gl, {}).get(gl);
let textures = texturesCache.has(gl) ? texturesCache.get(gl) : texturesCache.set(gl, {}).get(gl)
//return all textures if no name provided
if (!name) return textures;
// return all textures if no name provided
if (!name) return textures
let texture = textures[name];
let texture = textures[name]
//autoinit texture(s)
// autoinit texture(s)
if (!texture) {
let count = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
let count = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS)
for (let i=0; i < count; ++i) {
let info = gl.getActiveUniform(program, i);
if (!info) continue;
let info = gl.getActiveUniform(program, i)
if (!info) continue
if (info.type === gl.SAMPLER_2D || info.type === gl.SAMPLER_CUBE) {

@@ -65,8 +65,8 @@ if (!textures[info.name]) {

texture = textures[name];
texture = textures[name]
}
//detect location
// detect location
if (texture.locations == null) {
texture.locations = new _WeakMap();
texture.locations = new WeakMap()
}

@@ -77,68 +77,68 @@ if (!texture.locations.has(program)) {

//if no options passed - just return known texture info
// if no options passed - just return known texture info
if (options == null) {
return texture;
return texture
}
if (!isPlainObject(options)) options = {data: options};
if (!isPlainObject(options)) options = {data: options}
if (texture.index == null || options.index != null) {
let textureCount = texturesIdx.get(program) || 0;
texture.index = options.index != null ? options.index : textureCount++;
textureCount = Math.max(textureCount, texture.index);
texturesIdx.set(program, textureCount);
gl.uniform1i(texture.locations.get(program), texture.index);
let textureCount = texturesIdx.get(program) || 0
texture.index = options.index != null ? options.index : textureCount++
textureCount = Math.max(textureCount, texture.index)
texturesIdx.set(program, textureCount)
gl.uniform1i(texture.locations.get(program), texture.index)
}
if (!texture.texture) {
texture.texture = gl.createTexture();
texture.texture = gl.createTexture()
}
gl.activeTexture(gl.TEXTURE0 + texture.index);
gl.bindTexture(gl.TEXTURE_2D, texture.texture);
gl.activeTexture(gl.TEXTURE0 + texture.index)
gl.bindTexture(gl.TEXTURE_2D, texture.texture)
if (options.wrap || options.wrapS || !texture.wrapS) {
texture.wrapS = options.wrap && options.wrap[0] || options.wrapS || options.wrap || texture.wrapS || gl.CLAMP_TO_EDGE;
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, texture.wrapS);
texture.wrapS = options.wrap && options.wrap[0] || options.wrapS || options.wrap || texture.wrapS || gl.CLAMP_TO_EDGE
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, texture.wrapS)
}
if (options.wrap || options.wrapT || !texture.wrapT) {
texture.wrapT = options.wrap && options.wrap[1] || options.wrapT || options.wrap || texture.wrapT || gl.CLAMP_TO_EDGE;
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, texture.wrapT);
texture.wrapT = options.wrap && options.wrap[1] || options.wrapT || options.wrap || texture.wrapT || gl.CLAMP_TO_EDGE
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, texture.wrapT)
}
if (options.filter || options.minFilter || !texture.minFilter) {
texture.minFilter = options.minFilter || options.filter || texture.minFilter || gl.NEAREST;
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.minFilter);
texture.minFilter = options.minFilter || options.filter || texture.minFilter || gl.NEAREST
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.minFilter)
}
if (options.filter || options.magFilter || !texture.magFilter) {
texture.magFilter = options.magFilter || options.filter || texture.magFilter || gl.NEAREST;
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.magFilter);
texture.magFilter = options.magFilter || options.filter || texture.magFilter || gl.NEAREST
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.magFilter)
}
if (!texture.type || options.type) {
texture.type = options.type || texture.type || gl.UNSIGNED_BYTE;
texture.type = options.type || texture.type || gl.UNSIGNED_BYTE
}
if (!texture.format || options.format) {
texture.format = options.format || texture.format || gl.RGBA;
texture.format = options.format || texture.format || gl.RGBA
}
let data = options.data || null;
let image;
let data = options.data || null
let image
if (isBrowser) {
//url for image
// url for image
if (typeof data === 'string') {
if (data === (texture.data && texture.data._src) || data === (texture.data && texture.data.src)) {
return texture;
return texture
}
image = new Image;
image.src = data;
image._src = data;
image = new Image
image.src = data
image._src = data
}
else if (data instanceof Image && !data.complete) {
image = data;
image = data
}

@@ -148,34 +148,35 @@

if (image.complete && image === texture.data || (texture.data && image.src === texture.data.src)) {
return texture;
return texture
}
image.addEventListener('load', () => {
setTexture(gl, name, image, program)
});
data = null;
})
data = null
}
}
if (texture.level == null) texture.level = 0;
if (texture.level == null) texture.level = 0
//handle raw data case
// handle raw data case
if (data == null || Array.isArray(data) || ArrayBuffer.isView(data)) {
if (options && options.shape) {
if (texture.width == null) texture.width = options.shape[0];
if (texture.height == null) texture.height = options.shape[1];
if (texture.width == null) texture.width = options.shape[0]
if (texture.height == null) texture.height = options.shape[1]
}
else {
let len = data && data.length || 1;
if (options.width != null) texture.width = options.width;
else if (texture.width == null) texture.width = data && data.width || (texture.format === gl.ALPHA ? len : Math.max(len / 4, 1));
if (options.height != null) texture.height = options.height;
else if (texture.height == null) texture.height = (data && data.height) || 1;
let len = data && data.length || 1
if (options.width != null) texture.width = options.width
else if (texture.width == null) texture.width = data && data.width || (texture.format === gl.ALPHA ? len : Math.max(len / 4, 1))
if (options.height != null) texture.height = options.height
else if (texture.height == null) texture.height = (data && data.height) || 1
}
texture.data = data == null ? null : texture.type === gl.FLOAT ? new Float32Array(data) : texture.type === gl.UNSIGNED_SHORT ? new Uint16Array(data) : new Uint8Array(data);
texture.data = data == null ? null : texture.type === gl.FLOAT ? new Float32Array(data) : texture.type === gl.UNSIGNED_SHORT ? new Uint16Array(data) : new Uint8Array(data)
gl.texImage2D(gl.TEXTURE_2D, texture.level, texture.format, texture.width, texture.height, 0, texture.format, texture.type, texture.data);
// TODO: use texSubImage2D here, it is possible
gl.texImage2D(gl.TEXTURE_2D, texture.level, texture.format, texture.width, texture.height, 0, texture.format, texture.type, texture.data)
} else {
texture.width = data && data.width || 1;
texture.height = data && data.height || 1;
texture.data = data;
gl.texImage2D(gl.TEXTURE_2D, texture.level, texture.format, texture.format, texture.type, texture.data);
texture.width = data && data.width || 1
texture.height = data && data.height || 1
texture.data = data
gl.texImage2D(gl.TEXTURE_2D, texture.level, texture.format, texture.format, texture.type, texture.data)
}

@@ -182,0 +183,0 @@

@@ -10,17 +10,18 @@ /* @module gl-util/unifrom */

const _WeakMap = require('is-firefox') ? Map : WeakMap;
const WeakMap = require('es6-weak-map');
let uniformsCache = setUniform.cache = new _WeakMap();
let uniformsCache = setUniform.cache = new WeakMap();
module.exports = setUniform;
function setUniform (gl, name, options, program) {
function setUniform (gl, name, options) {
if (!gl) throw Error('WebGL context is not provided');
if (options instanceof WebGLProgram) {
program = options;
options = null;
let program
if (gl instanceof WebGLProgram) {
program = gl
gl = gl.gl
}
else if (!program) {
program = getProgram(gl, program);
else {
program = getProgram(gl)
}

@@ -30,3 +31,3 @@

//object with uniforms passed
// object with uniforms passed
if (name && typeof name != 'string') {

@@ -45,3 +46,3 @@ let result = {};

//return all uniforms if no name provided
// return all uniforms if no name provided
if (!name) return uniforms;

@@ -51,3 +52,3 @@

//autoinit uniform(s)
// autoinit uniform(s)
if (!uniform) {

@@ -59,3 +60,3 @@ let count = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);

if (!info) continue;
//ignore textures
// ignore textures
if (info.type === gl.SAMPLER_2D || info.type === gl.SAMPLER_CUBE) {

@@ -73,3 +74,3 @@ }

//detect location
// detect location
if (uniform.location == null) {

@@ -79,3 +80,3 @@ uniform.location = gl.getUniformLocation(program, name);

//if no options passed - just return known uniform info
// if no options passed - just return known uniform info
if (options == null) return uniform;

@@ -87,3 +88,3 @@

//detect type
// detect type
if (uniform.type == null && uniform.data) {

@@ -121,3 +122,3 @@ if (typeof uniform.data === 'number') {

//make sure data is typed array
// make sure data is typed array
if (Array.isArray(uniform.data)) {

@@ -135,3 +136,3 @@ switch (uniform.type) {

//put data to shader
// put data to shader
if (uniform.location && uniform.data != null) {

@@ -138,0 +139,0 @@ switch (uniform.type) {

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc