Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'expo-gl' in functional components in JavaScript. Our advanced machine learning engine meticulously scans each line of code, cross-referencing millions of open source libraries to ensure your implementation is not just functional, but also robust and secure. Elevate your React applications to new heights by mastering the art of handling side effects, API calls, and asynchronous operations with confidence and precision.
tf.registerBackend('rn-webgl', async () => {
const glContext = await GLView.createContextAsync();
// ExpoGl getBufferSubData is not implemented yet (throws an exception).
tf.ENV.set('WEBGL_BUFFER_SUPPORTED', false);
//
// Mock extension support for EXT_color_buffer_float and
// EXT_color_buffer_half_float on the expo-gl context object.
// In react native we do not have to get a handle to the extension
// in order to use the functionality of that extension on the device.
//
// This code block makes iOS and Android devices pass the extension checks
// used in core. After those are done core will actually test whether
// we can render/download float or half float textures.
//
// We can remove this block once we upstream checking for these
// extensions in expo.
const { WebGL2Kernel } = require('gpu.js/src/backend/web-gl2/kernel');
const { GLView } = require('expo-gl');
let isSupported = null;
let testContext = null;
let testCanvas = {}; // not yet supported
let testExtensions = null;
let features = null;
GLView.createContextAsync()
.then(context => testContext = context);
class ExpoGLKernel extends WebGL2Kernel {
static get isSupported() {
if (isSupported !== null) {
return isSupported;
}
this.setupFeatureChecks();
isSupported = this.isContextMatch(testContext);
return isSupported;
}
static get testContext() {
return testContext;
}
in vec2 textureCoord;
out vec4 fragColor;
void main() {
vec4 textureColor = texture(inputImageTexture, textureCoord);
vec3 rgb = (textureColor.rgb - vec3(0.5)) * contrast + vec3(0.5);
fragColor = vec4(rgb, textureColor.a);
}`;
// location to contrast uniform
let contrastLocation: WebGLUniformLocation | null;
// create and prepare GL context
const glPromise = GLView.createContextAsync().then(async gl => {
// Compile vertex and fragment shaders
const vertShader = gl.createShader(gl.VERTEX_SHADER)!;
gl.shaderSource(vertShader, vertShaderSource);
gl.compileShader(vertShader);
const fragShader = gl.createShader(gl.FRAGMENT_SHADER)!;
gl.shaderSource(fragShader, fragShaderSource);
gl.compileShader(fragShader);
// Link, use program, save and enable attributes
const program = gl.createProgram()!;
gl.attachShader(program, vertShader);
gl.attachShader(program, fragShader);
gl.linkProgram(program);
gl.validateProgram(program);
async draw() {
if (this.isDrawing) {
// if another draw call is already running, we need to skip this one
return;
}
this.isDrawing = true;
const gl = await glPromise;
gl.uniform1f(contrastLocation, this.state.contrast);
gl.drawArrays(gl.TRIANGLES, 0, 6);
gl.endFrameEXP();
// we need to use flip option because framebuffer contents are flipped vertically
const snapshot = await GLView.takeSnapshotAsync(gl, {
flip: true,
});
// delete previous snapshot
if (this.state.snapshot) {
FileSystem.deleteAsync(this.state.snapshot.uri as string, { idempotent: true });
}
this.setState({ snapshot });
this.isDrawing = false;
}
get() {
deprecatedModule(
`import { GLView } from 'expo' -> import { GLView } from 'expo-gl'`,
'expo-gl'
);
return require('expo-gl').GLView;
},
},
export { default as takeSnapshotAsync } from './takeSnapshotAsync/captureRef';
export { AdMobBanner, AdMobInterstitial, AdMobRewarded, PublisherBanner } from 'expo-ads-admob';
export { Segment };
export { Asset } from 'expo-asset';
export { AppAuth };
export { BackgroundFetch };
export { BarCodeScanner } from 'expo-barcode-scanner';
export { Calendar };
export { Camera } from 'expo-camera';
export { Constants };
export { Contacts };
export { DocumentPicker };
export { FaceDetector };
export { FileSystem };
export { Font };
const GLView = GL.GLView;
export { GL, GLView };
export { GoogleSignIn };
export { ImageManipulator };
export { Haptics, Haptics as Haptic };
export { ImagePicker };
export { LocalAuthentication };
export { IntentLauncher, IntentLauncher as IntentLauncherAndroid };
export { Localization };
export { Crypto };
export { Location };
export { MediaLibrary };
export { Permissions };
export { Print };
export { Sensors };
export {
Accelerometer,