React-Native несколько стековых узлов GL вызывают проблемы производительности - PullRequest
Новая
       25

React-Native несколько стековых узлов GL вызывают проблемы производительности

0 голосов
/ 11 апреля 2019

Я пытаюсь добавить несколько эффектов на фотографию в React-Native, используя gl-react-v2.

Вот простой пример эффекта, который я использую для редактирования изображения: 

import GL from 'gl-react';
import React from 'react';
import PropTypes from 'prop-types';

const shaders = GL.Shaders.create({
  Negative: {
    frag: `
    precision highp float;
    varying vec2 uv;
    uniform sampler2D t;
    uniform float factor;

    void main() {
      vec4 c = texture2D(t, uv);
      gl_FragColor = vec4(mix(c.rgb, 1.0 - c.rgb, factor), c.a);
    }
  `
  }
});

module.exports = GL.createComponent(
  ({children: t, factor}) => {
    return (
      <GL.Node
        shader={shaders.Negative}
        uniforms={{t, factor}}
      />
    );
  },
  {
    displayName: 'Negative',
    defaultProps: {
      factor: 1
    },
    propTypes: {
      children: PropTypes.any.isRequired,
      factor: PropTypes.object
    }
  }
);

Затем я создаю еще один Component, где я складываю некоторые эффекты: 

import GL from 'gl-react';
import React from 'react';
import PropTypes from 'prop-types';
import Negative from './effects/negative';
import Vignette from './effects/vignette';

export default GL.createComponent(
  ({children,filter}) => {
    return (
      <Vignette vignette={filter.vignette}>
        <Negative factor={filter.negative}>
          {children}
        </Negative>
      </Vignette>
    );
  },
  {
    displayName: 'ImageEffects',
    defaultProps: {
      filter: {
        vignette: 0,
        negative: 0
      }
    },
    propTypes: {
      children: PropTypes.node.isRequired,
      filter: PropTypes.object.isRequired
    }
  }
);

Затем я рендеринг изображения с эффектами в AnimatedSurface: 

import PropTypes from 'prop-types';
import React, {Component} from 'react';
import {AnimatedSurface} from 'gl-react-native';
import ImageEffects from '../image-effects/index';

class BackgroundImage extends Component {
  static propTypes = {
    filter: PropTypes.object,
    src: PropTypes.string,
    width: PropTypes.number,
    height: PropTypes.number
  };

  render() {
    const {src, width, height, filter} = this.props;
    return (
      <AnimatedSurface preload width={width} height={height} backgroundColor={'transparent'}>
        <ImageEffects width={width} height={height} filter={filter}>
          {src}
        </ImageEffects>
      </AnimatedSurface>
    );
  }
}

export default BackgroundImage;

Проблема в том, чтокогда я складываю больше эффектов, производительность Surface падает при изменении AnimatedValue, а поток JS блокируется.Это правильный способ реализовать такую ​​функциональность?Или есть решение, позволяющее избежать проблем с производительностью, когда несколько компонентов GL расположены в стеке?

...