Comments (9)
gl-react not only supports textures as uniforms but also supports types like: int, float, vecN, matN, ...
You can also send an array via uniforms.
gl-react
relies ongl-shader
which have support for array / struct. This mapping is not documented in gl-react because it is not currently supported in gl-react-native (but will eventually be implemented).
Here is an example:
const React = require("react");
const GL = require("gl-react");
const shaders = GL.Shaders.create({
arrayExample: {
frag: `
precision highp float;
varying vec2 uv;
uniform float array[6];
void main () {
gl_FragColor = vec4(
array[0] + array[1],
array[2] + array[3],
array[4] + array[5],
1.0);
}
`
}
});
class ArrayExample extends GL.Component {
render () {
const { width, height } = this.props;
return <GL.View
shader={shaders.arrayExample}
width={width}
height={height}
uniforms={{ array: [0.0, 0.1, 0.2, 0.3, 0.4, 0.5] }}
/>;
}
}
module.exports = ArrayExample;
renders a blue square (rgb(10%, 50%, 90%)
):
from gl-react.
Unfortunately, WebGL does not support dynamically indexing arrays. In my case (I am implementing a bilateral filter) I need to lookup values based on differences in values in the source image, which makes using an array not possible due to this limitation of WebGL. This is why I have been using a texture to store the data instead (which also gives the benefit of allowing for interpolation on the pre-calculated function).
It sounds like the functionality I am looking for is not explicitly supported, so do you have any suggested way of hacking around it? Or a suggested way of adding this ability? It looks like both gl-shader
and gl-texture2d
should allow for it just fine.
from gl-react.
oh, so you want to use a texture for this. Sorry I missed your initial needs.
You want to create a texture from your array.
Yeah gl-texture2d
allows ndarray
object.
Now we just needs a special case for this if we want it to work in gl-react.
In the meantime, as a workaround here is what you could do:
- Create a temporary canvas of your texture of dimension
width=arraySize
height=1
, get a 2D Context, draw your array in it. - get a data64 uri of it.
canvas.toDataURL()
- pass this in the uniforms (it will works like an image url).
- in your shader, lookup at position
(percentage, 0.5)
. Nice side effect is you also have linear interpolation for free.
from gl-react.
That worked great, thanks! Are there any plans to add this into gl-react
so that the work-around doesn't need to be used?
from gl-react.
that sounds like a great feature to add.
I don't think it involves too much work, I'll add it in gl-react soon and see if it is easy to add in gl-react-native.
from gl-react.
I've got it implemented.
It will be released in next version of gl-react, probably this week.
We need to check everything works as expected (especially with the 2 other features that will be included in this release).
A gl-react-native
version of this feature is not planned for now (unless someone needs it) because implies some work if we want to implement it as well as gl-texture2d does.
Use-case example:
// var ndarray = require("ndarray");
var t1 = ndarray(new Float64Array([
1, 0, 0, 1,
0, 1, 0, 1,
0, 0, 1, 1
]), [3, 1, 4]); // here, using Float*Array & [ w, h, 4 ] shape will result of RGBA & FLOAT mode
var t2 = {
disableLinearInterpolation: true,
array: ndarray(new Float64Array([
1, 0, 0, 1,
0, 1, 0, 1,
0, 0, 1, 1
]), [3, 1, 4])
};
var t3 = require("baboon-image");
(all of these ndarray shapes are supported: https://github.com/stackgl/gl-texture2d#var-tex--createtexturegl-array , in your use-case you might just need the [w,h,1]
or the [w,h]
shape. I have not tested them )
from gl-react.
Awesome! This should be perfect.
gl-react-native
support would be nice, as I'd like to have the ability to port to a native app in the future, but not a huge deal for me personally.
Another feature I've realized I will be needing though is the ability to set the texture wrapping to gl.CLAMP_TO_EDGE
. Since there's already code to enable/disable interpolation, I assume this would be pretty straight forward to add in a similar fashion?
from gl-react.
gl.CLAMP_TO_EDGE will be here by default.
selecting another mode might be another feature. If we implement this we will need to do it also for images.
from gl-react.
will be in incoming 1.1.0
from gl-react.
Related Issues (20)
- [Feature Request] Uint8Array as a Texture HOT 6
- Possible Bug: Image data flipped when captured
- TypeError: undefined is not a function (near '...GL.createComponent...') HOT 1
- image disappeared after refocus the screen
- gl-react-native App crashed with Surface with style prop HOT 5
- Update Peer Dependency to gl-react-5?
- How to remove white Background from the image HOT 1
- GL is currently not available (have you enabled remote debbuging) shows up on Android HOT 1
- Camera preview dimensions ignored? - distorted on iOS HOT 2
- Question About Texts on Images in react-native HOT 1
- [iOS] app crash calling "capture": NSInvalidArgumentException HOT 2
- How to load spine animation json file in react-native HOT 1
- Specify texture format
- GL.Node does not support video surfaces HOT 2
- Failed to execute 'shaderSource' on 'WebGL2RenderingContext': parameter 1 is not of type 'WebGLShader' HOT 4
- Bad quality camera on Android devices HOT 5
- Image from local storage are not reading , surface view coming black.
- headless example HOT 1
- How to use gl-react with next.js ? Is there any documentation about this ? HOT 1
- Runtime error: `Unable to resolve module expo-modules-core`
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gl-react.