Git Product home page Git Product logo

regl-extend's Introduction

regl-extend

regl-aware deep extend

Introduction

Implements deep extend with an explicitly permitted list of regl attributes so that it can avoid recursing into opaque regl resources. Perhaps makes regl templates more suitable for reuse and public consumption. Pushes around keys and values and has no dependency on regl itself.

If you find missing attributes, please open an issue!

Installation

$ npm install regl-extend

Example

The example below illustrates using regl-extend to create a template that maps one framebuffer to another.

var regl = require('regl')
var extendCommand = require('regl-extend').command

var createMap = opts => regl(extendCommand({
  vert: `
    precision mediump float;
    attribute vec2 xy; 
    varying vec2 uv; 
    void main () {
      uv = 0.5 * (1.0 + xy);
      gl_Position = vec4(xy, 0, 1); 
    }   
  `, 
  attributes: {xy: [[-4, -4], [0, 4], [4, -4]]},
  depth: {enable: false},
  count: 3
}, opts))

Then use the template by specifying attributes that differ:

createMap({
  frag: `
    precision mediump float;
    varying vec2 uv; 
    uniform sampler2D src;
    void main () {
      gl_FragColor = texture2D(src, uv);
    }  
  `,
  uniforms: {src: regl.prop('src')}
})

// => regl({
//   vert: `
//     precision mediump float;
//     attribute vec2 xy; 
//     varying vec2 uv; 
//     void main () {
//       uv = 0.5 * (1.0 + xy);
//       gl_Position = vec4(xy, 0, 1); 
//     }   
//   `, 
//   frag: `
//     precision mediump float;
//     varying vec2 uv; 
//     uniform sampler2D src;
//     void main () {
//       gl_FragColor = texture2D(src, uv);
//     }  
//   `,
//   attributes: {xy: [[-4, -4], [0, 4], [4, -4]]},
//   uniforms: {src: regl.prop('src')}
//   depth: {enable: false},
//   count: 3
// })

API

require('regl-extend').command(a, b[, ...])

require('regl-extend').buffer(a, b[, ...])

require('regl-extend').element(a, b[, ...])

require('regl-extend').texture(a, b[, ...])

require('regl-extend').renderbuffer(a, b[, ...])

require('regl-extend').framebuffer(a, b[, ...])

require('regl-extend').framebufferCube(a, b[, ...])

Extend commands are implemented for each type of regl resource. Each method extends the attributes of a sequence of arguments, returning a new object with the merged contents. The values of any valid properties for that command are transferred. The recursion stops at data values like a regl resource or a bare array. Each successive object provided overwrites existing properties of the result. Unknown properties are ignored.

License

© 2017 Ricky Reusser. MIT License.

regl-extend's People

Contributors

rreusser avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.