Socket
Socket
Sign inDemoInstall

regl

Package Overview
Dependencies
Maintainers
2
Versions
42
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

regl - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

example/assets/normaltexture.jpg
example/assets/spheretexture.jpg
example/img/line-primitives.png
example/img/metaball.png
example/line-primitives.js
example/metaball.js
lib/util/flatten.js
test/flatten.js

5

CHANGES.md

@@ -39,2 +39,7 @@ # Release notes

## 1.2.0
* Simplified flattening logic for textures and buffers
* Viewport and scissor box can go outside drawing buffer
## 1.1.1

@@ -41,0 +46,0 @@

2

DEVELOPING.md

@@ -46,3 +46,3 @@ # A developer's guide to regl

The reason we do not use ES5 in the library or test code is that regl supports node 0.10, which does not implement ES6. Because the examples are meant to be illustrative we do not enforce the same strict compatibility requirements.
The reason we do not use ES6 in the library or test code is that regl supports node 0.10, which does not implement ES6. Because the examples are meant to be illustrative we do not enforce the same strict compatibility requirements.

@@ -49,0 +49,0 @@ For markdown, we're using [`remark`](https://github.com/wooorm/remark) and [`remark-lint`](https://github.com/wooorm/remark-lint).

9

example/elements.js
/*
tags: basic
tags: basic, lines
<p> This example demonstrates how you can use `elements` to draw lines. </p>

@@ -13,2 +13,7 @@ */

var lineWidth = 3
if (lineWidth > regl.limits.lineWidthDims[1]) {
lineWidth = regl.limits.lineWidthDims[1]
}
regl({

@@ -53,3 +58,3 @@ frag: `

lineWidth: 3
lineWidth: lineWidth
})()

7

example/graph.js

@@ -365,2 +365,7 @@ /*

var lineWidth = 2
if (lineWidth > regl.limits.lineWidthDims[1]) {
lineWidth = regl.limits.lineWidthDims[1]
}
const renderEdges = regl({

@@ -406,3 +411,3 @@ vert: `

primitive: 'lines',
lineWidth: 2
lineWidth: lineWidth
})

@@ -409,0 +414,0 @@

2

example/microphone.js
/*
tags: audio, basic
tags: audio, basic, lines

@@ -4,0 +4,0 @@ <p>This example shows how to create a simple audio visualization, using your microphone as input.</p>

2

example/mipmap.js

@@ -45,3 +45,3 @@ /*

texture: regl.texture({
min: 'nearest mipmap linear',
min: 'linear mipmap linear',
mag: 'nearest',

@@ -48,0 +48,0 @@ wrap: 'repeat',

4

example/video.js
/*
tags: basic
tags: basic, video
<p>No description</p>
<p>This example shows how to overlay a chroma keyed video over a background rendered by regl. </p>

@@ -6,0 +6,0 @@ */

45

lib/buffer.js

@@ -6,3 +6,7 @@ var check = require('./util/check')

var pool = require('./util/pool')
var flattenUtil = require('./util/flatten')
var arrayFlatten = flattenUtil.flatten
var arrayShape = flattenUtil.shape
var arrayTypes = require('./constants/arraytypes.json')

@@ -47,12 +51,2 @@ var bufferTypes = require('./constants/dtypes.json')

function flatten (result, data, dimension) {
var ptr = 0
for (var i = 0; i < data.length; ++i) {
var v = data[i]
for (var j = 0; j < dimension; ++j) {
result[ptr++] = v[j]
}
}
}
module.exports = function wrapBufferState (gl, stats, config) {

@@ -108,2 +102,3 @@ var bufferCount = 0

function initBufferFromData (buffer, data, usage, dtype, dimension, persist) {
var shape
buffer.usage = usage

@@ -115,7 +110,9 @@ if (Array.isArray(data)) {

if (Array.isArray(data[0])) {
buffer.dimension = data[0].length
flatData = pool.allocType(
buffer.dtype,
data.length * buffer.dimension)
flatten(flatData, data, buffer.dimension)
shape = arrayShape(data)
var dim = 1
for (var i = 1; i < shape.length; ++i) {
dim *= shape[i]
}
buffer.dimension = dim
flatData = arrayFlatten(data, shape, buffer.dtype)
initBufferFromTypedArray(buffer, flatData, usage)

@@ -140,6 +137,6 @@ if (persist) {

buffer.dtype = dtype || typedArrayCode(data[0]) || GL_FLOAT
flatData = pool.allocType(
buffer.dtype,
data.length * buffer.dimension)
flatten(flatData, data, buffer.dimension)
flatData = arrayFlatten(
data,
[data.length, data[0].length],
buffer.dtype)
initBufferFromTypedArray(buffer, flatData, usage)

@@ -163,3 +160,3 @@ if (persist) {

} else if (isNDArrayLike(data)) {
var shape = data.shape
shape = data.shape
var stride = data.stride

@@ -297,2 +294,3 @@ var offset = data.offset

var offset = (offset_ || 0) | 0
var shape
buffer.bind()

@@ -307,5 +305,4 @@ if (Array.isArray(data)) {

} else if (Array.isArray(data[0]) || isTypedArray(data[0])) {
var dimension = data[0].length
var flatData = pool.allocType(buffer.dtype, data.length * dimension)
flatten(flatData, data, dimension)
shape = arrayShape(data)
var flatData = arrayFlatten(data, shape, buffer.dtype)
setSubData(flatData, offset)

@@ -320,3 +317,3 @@ pool.freeType(flatData)

} else if (isNDArrayLike(data)) {
var shape = data.shape
shape = data.shape
var stride = data.stride

@@ -323,0 +320,0 @@

85

lib/texture.js

@@ -9,2 +9,3 @@ var check = require('./util/check')

var isArrayLike = require('./util/is-array-like')
var flattenUtils = require('./util/flatten')

@@ -235,5 +236,3 @@ var dtypes = require('./constants/arraytypes.json')

function convertData (result, data) {
var n = result.width * result.height * result.channels
check(data.length === n, 'inconsistent array length for texture. Expected: ' + n + '. Was: ' + data.length)
var n = data.length
switch (result.type) {

@@ -293,35 +292,2 @@ case GL_UNSIGNED_BYTE:

function flatten2DData (image, array, w, h) {
var n = w * h
var data = preConvert(image, n)
var p = 0
for (var i = 0; i < h; ++i) {
var row = array[i]
for (var j = 0; j < w; ++j) {
data[p++] = row[j]
}
}
postConvert(image, data)
}
function flatten3DData (image, array, w, h, c) {
var n = w * h * c
var data = preConvert(image, n)
var p = 0
for (var i = 0; i < h; ++i) {
var row = array[i]
for (var j = 0; j < w; ++j) {
var pixel = row[j]
for (var k = 0; k < c; ++k) {
data[p++] = pixel[k]
}
}
}
postConvert(image, data)
}
function getTextureSize (format, type, width, height, isMipmap, isCube) {

@@ -551,3 +517,3 @@ var s

this.height = 0
this.channels = 4
this.channels = 0
}

@@ -609,3 +575,3 @@

check(extensions.webgl_depth_texture ||
!(type === 'depth' || type === 'depth stencil'),
!(type === 'uint16' || type === 'uint32' || type === 'depth stencil'),
'you must enable the WEBGL_depth_texture extension in order to use depth/stencil textures.')

@@ -756,3 +722,5 @@ check.parameter(type, textureTypes,

image.height = image.height || 1
image.channels = image.channels || 4
} else if (isTypedArray(data)) {
image.channels = image.channels || 4
image.data = data

@@ -763,2 +731,3 @@ if (!('type' in options) && image.type === GL_UNSIGNED_BYTE) {

} else if (isNumericArray(data)) {
image.channels = image.channels || 4
convertData(image, data)

@@ -802,2 +771,3 @@ image.alignment = 1

image.height = image.element.height
image.channels = 4
} else if (isImageElement(data)) {

@@ -807,2 +777,3 @@ image.element = data

image.height = data.naturalHeight
image.channels = 4
} else if (isVideoElement(data)) {

@@ -812,13 +783,20 @@ image.element = data

image.height = data.videoHeight
image.needsPoll = true
image.channels = 4
} else if (isRectArray(data)) {
var w = data[0].length
var h = data.length
var c = 1
var w = image.width || data[0].length
var h = image.height || data.length
var c = image.channels
if (isArrayLike(data[0][0])) {
c = data[0][0].length
flatten3DData(image, data, w, h, c)
c = c || data[0][0].length
} else {
flatten2DData(image, data, w, h)
c = c || 1
}
var arrayShape = flattenUtils.shape(data)
var n = 1
for (var dd = 0; dd < arrayShape.length; ++dd) {
n *= arrayShape[dd]
}
var allocData = preConvert(image, n)
flattenUtils.flatten(data, arrayShape, '', allocData)
postConvert(image, allocData)
image.alignment = 1

@@ -927,2 +905,3 @@ image.width = w

img.height = mipmap.height = height
img.channels = mipmap.channels = 4
}

@@ -1305,7 +1284,7 @@

copyFlags(imageData, texture)
imageData.width >>= level
imageData.height >>= level
imageData.width -= x
imageData.height -= y
imageData.width = 0
imageData.height = 0
parseImage(imageData, image)
imageData.width = imageData.width || ((texture.width >> level) - x)
imageData.height = imageData.height || ((texture.height >> level) - y)

@@ -1501,7 +1480,7 @@ check(

copyFlags(imageData, texture)
imageData.width >>= level
imageData.height >>= level
imageData.width -= x
imageData.height -= y
imageData.width = 0
imageData.height = 0
parseImage(imageData, image)
imageData.width = imageData.width || ((texture.width >> level) - x)
imageData.height = imageData.height || ((texture.height >> level) - y)

@@ -1508,0 +1487,0 @@ check(

5

package.json
{
"name": "regl",
"version": "1.1.1",
"version": "1.2.0",
"description": "regl is a fast functional WebGL framework.",

@@ -32,2 +32,3 @@ "main": "regl.js",

"gl": "^4.0.1",
"gl-mat3": "^1.0.0",
"gl-mat4": "^1.1.4",

@@ -48,2 +49,3 @@ "gl-vec2": "^1.0.0",

"ncp": "^2.0.0",
"ndarray": "^1.0.18",
"parse-dds": "^1.2.1",

@@ -63,2 +65,3 @@ "present": "^1.0.0",

"standard": "^6.0.7",
"surface-nets": "^1.0.2",
"tape": "^4.4.0",

@@ -65,0 +68,0 @@ "teapot": "^1.0.0",

40

README.md

@@ -26,4 +26,4 @@ <div align="center">

<!-- Build Status -->
<a href="https://circleci.com/gh/mikolalysenko/regl">
<img src="https://circleci.com/gh/mikolalysenko/regl.svg?style=shield"
<a href="https://circleci.com/gh/regl-project/regl">
<img src="https://circleci.com/gh/regl-project/regl.svg?style=shield"
alt="Build Status" />

@@ -49,3 +49,3 @@ </a>

<h3>
<a href="https://github.com/mikolalysenko/regl/blob/gh-pages/API.md">
<a href="https://github.com/regl-project/regl/blob/gh-pages/API.md">
Docs

@@ -143,5 +143,5 @@ </a>

### [More examples](https://mikolalysenko.github.io/regl/www/gallery.html)
### [More examples](https://regl-project.github.io/regl/www/gallery.html)
Check out the [gallery](https://mikolalysenko.github.io/regl/www/gallery.html). The source code of all the gallery examples can be found [here](https://github.com/mikolalysenko/regl/tree/gh-pages/example).
Check out the [gallery](https://regl-project.github.io/regl/www/gallery.html). The source code of all the gallery examples can be found [here](https://github.com/regl-project/regl/tree/gh-pages/example).

@@ -204,15 +204,15 @@ ## Setup

* **Performance** `regl` uses dynamic code generation and partial evaluation to remove almost all overhead.
* **Minimalism** `regl` just wraps WebGL. It is not a game engine and doesn't have opinions about scene graphs or vector math libraries. Any feature in WebGL is accessible, including advanced extensions like [multiple render targets](https://github.com/mikolalysenko/regl/blob/gh-pages/example/deferred_shading.js) or [instancing](https://github.com/mikolalysenko/regl/blob/gh-pages/example/instance-triangle.js).
* **Minimalism** `regl` just wraps WebGL. It is not a game engine and doesn't have opinions about scene graphs or vector math libraries. Any feature in WebGL is accessible, including advanced extensions like [multiple render targets](https://github.com/regl-project/regl/blob/gh-pages/example/deferred_shading.js) or [instancing](https://github.com/regl-project/regl/blob/gh-pages/example/instance-triangle.js).
* **Stability** `regl` takes interface compatibility and semantic versioning seriously, making it well suited for long lived applications that must be supported for months or years down the road. It also has no dependencies limiting exposure to risky or unplanned updates.
### [Comparisons](https://mikolalysenko.github.io/regl/www/compare.html)
### [Comparisons](https://regl-project.github.io/regl/www/compare.html)
While `regl` is lower level than many 3D engines, code written in it tends to be highly compact and flexible. A comparison of `regl` to various other WebGL [libraries across several tasks can be found here](https://mikolalysenko.github.io/regl/www/compare.html).
While `regl` is lower level than many 3D engines, code written in it tends to be highly compact and flexible. A comparison of `regl` to various other WebGL [libraries across several tasks can be found here](https://regl-project.github.io/regl/www/compare.html).
### [Benchmarks](https://mikolalysenko.github.io/regl/www/bench-results/bench-result-8ea4a7e806beed0b9732)
### [Benchmarks](https://regl-project.github.io/regl/www/bench-results/bench-result-8ea4a7e806beed0b9732)
In order to prevent performance regressions, `regl` is continuously benchmarked. You can run benchmarks locally using `npm run bench` or [check them out online](https://mikolalysenko.github.io/regl/www/bench.html). The [results for the last few days can be found here.](https://mikolalysenko.github.io/regl/www/bench-results/bench-result-5e92a749b35c37a43672)
In order to prevent performance regressions, `regl` is continuously benchmarked. You can run benchmarks locally using `npm run bench` or [check them out online](https://regl-project.github.io/regl/www/bench.html). The [results for the last few days can be found here.](https://regl-project.github.io/regl/www/bench-results/bench-result-5e92a749b35c37a43672)
These measurements were taken using our custom scripts `bench-history` and
`bench-graph`. You can read more about them in [the development guide](https://github.com/mikolalysenko/regl/blob/gh-pages/DEVELOPING.md).
`bench-graph`. You can read more about them in [the development guide](https://github.com/regl-project/regl/blob/gh-pages/DEVELOPING.md).

@@ -230,17 +230,17 @@ ### Projects using regl

If you have a project using regl that isn't on this list that you would like to see added, [please send us a pull request!](https://github.com/mikolalysenko/regl/edit/gh-pages/README.md)
If you have a project using regl that isn't on this list that you would like to see added, [please send us a pull request!](https://github.com/regl-project/regl/edit/gh-pages/README.md)
## [Help Wanted](https://github.com/mikolalysenko/regl/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
## [Help Wanted](https://github.com/regl-project/regl/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
regl is still under active developement, and anyone willing to contribute is very much welcome to do so. Right now, what we need the most is for people to write examples and demos with the framework. This will allow us to find bugs and deficiencies in the API. We have a list of examples we would like to be implemented [here](https://github.com/mikolalysenko/regl/issues?q=is%3Aopen+is%3Aissue+label%3Aexample), but you are of course welcome to come up with your own examples. To add an example to our gallery of examples, [please send us a pull request!](https://github.com/mikolalysenko/regl/pulls)
regl is still under active developement, and anyone willing to contribute is very much welcome to do so. Right now, what we need the most is for people to write examples and demos with the framework. This will allow us to find bugs and deficiencies in the API. We have a list of examples we would like to be implemented [here](https://github.com/regl-project/regl/issues?q=is%3Aopen+is%3Aissue+label%3Aexample), but you are of course welcome to come up with your own examples. To add an example to our gallery of examples, [please send us a pull request!](https://github.com/regl-project/regl/pulls)
## [API docs](https://github.com/mikolalysenko/regl/blob/gh-pages/API.md)
## [API docs](https://github.com/regl-project/regl/blob/gh-pages/API.md)
`regl` has extensive API documentation. You can browse the [docs online here](https://github.com/mikolalysenko/regl/blob/gh-pages/API.md).
`regl` has extensive API documentation. You can browse the [docs online here](https://github.com/regl-project/regl/blob/gh-pages/API.md).
## [Development](https://github.com/mikolalysenko/regl/blob/gh-pages/DEVELOPING.md)
## [Development](https://github.com/regl-project/regl/blob/gh-pages/DEVELOPING.md)
The latest changes in `regl` can be found in the [CHANGELOG](https://github.com/mikolalysenko/regl/blob/gh-pages/CHANGES.md).
The latest changes in `regl` can be found in the [CHANGELOG](https://github.com/regl-project/regl/blob/gh-pages/CHANGES.md).
[For info on how to build and test headless, see the contributing guide here](https://github.com/mikolalysenko/regl/blob/gh-pages/DEVELOPING.md)
[For info on how to build and test headless, see the contributing guide here](https://github.com/regl-project/regl/blob/gh-pages/DEVELOPING.md)

@@ -264,1 +264,3 @@ ## [License](LICENSE)

* Audio track for `audio.js` example is "[Bamboo Cactus](https://archive.org/details/8bp033)" by [8bitpeoples](https://archive.org/details/8bitpeoples). CC BY-ND-NC 1.0 license
* Matcap (spheretexture.jpg) by [Ben Simonds](https://bensimonds.com/2010/07/30/matcap-generator/). CC 3 license.
* Normal map (normaltexture.jpg) by [rubberduck](http://opengameart.org/node/21219). CC0 license.

1

test/util/index.js

@@ -0,1 +1,2 @@

require('../flatten')
require('../context-loss')

@@ -2,0 +3,0 @@ require('../constructor')

8

test/viewport.js

@@ -50,2 +50,10 @@ var extend = require('../lib/util/extend')

}
},
{
viewport: {
x: -1,
y: -10,
width: 100,
height: 100
}
}

@@ -52,0 +60,0 @@ ]

API.md

Sorry, the diff of this file is too big to display

dist/regl.js

Sorry, the diff of this file is too big to display

dist/regl.min.js

Sorry, the diff of this file is too big to display

dist/regl.unchecked.js

Sorry, the diff of this file is too big to display

example/img/elements.png

Sorry, the diff of this file is not supported yet

example/img/microphone.png

Sorry, the diff of this file is not supported yet

example/img/video.png

Sorry, the diff of this file is not supported yet

lib/core.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc