Требуется (*изображение*) в React Native, по -видимому, резко увеличивает использование RAM ⇐ IOS

[Anonymous]

Некоторые подробности о настройке - я использую React Native с Expo (SDK 51), и я строю приложение, которое имеет компонент фильтра изображения/редактора на одной из страниц.
Проблема возникает, когда я хочу использовать LUTS - это было (или, по крайней мере, казалось) лучшим вариантом, чтобы легко перенести любые фотографии, которые я внес в фильтр. Я решил использовать квадратные текстуры LUT PNG, начавшиеся с более мелких, но он представил полос, поэтому я отправился на 4096x4096 текстуры, и это выглядит нормально. Чтобы загрузить каждый из фильтров (я до сих пор не пробовал приложение за пределами метро в автономной сборке), и когда фильтр загружается, он занимает дополнительные 150-250 МБ ОЗУ для каждого загруженного фильтра в инспекторе производительности. Я искренне не уверен, почему это будет происходить, когда изображения LUT имеют больше всего 10-12 МБ. Нажимая все фильтры, использование оперативной памяти просто поднимается, переходя от 300 МБ до 3-4 ГБ! Это возвращается к нормальной жизни при выходе из страницы. Список, где пользователь выбирает фильтры, например: < /p>

Код: Выделить всё

export const FILTERS = {
normal: {
key: 'normal',
type: 'lut',
name: 'Normal',
displayName: ,
shader: lutShader,
uniforms: {
lut: require('../assets/luts/neutral.png'),
t: { uri: '' },
intensity: 1,
},
},
'blackwhite-fade': {
key: 'blackwhite-fade',
type: 'lut',
name: 'B&W Fade',
displayName: (

),
shader: lutShader,
uniforms: {
lut: require('../assets/luts/blackwhite-fade.png'),
t: { uri: '' },
intensity: 1,
},
},
...  rest of the filters

Затем в компоненте Imageeditor я загружаю фильтр и шейдер, прохожу в T Prop of Eniforms для редактируемого изображения:

Код: Выделить всё

{*/ Shortened for just the part where I show the image /*}

{selectedFilterObj && (

)}

Нафильтер Image-это просто узел от gl-react :

Код: Выделить всё

const ImageFilter = ({ uniforms, shader }: ImageFilterProps) => {
return (

);
};

Я также включу шейдер, а также образец изображения LUT:
shader

Код: Выделить всё

import { GLSL } from 'gl-react';

const lutShader = {
frag: GLSL`
precision mediump float;
varying vec2 uv;
uniform sampler2D t;
uniform sampler2D lut;
uniform float intensity;

vec4 applyLUT(vec4 src_color) {
const vec2 tiles = vec2(16.0);
const float tileSize = 256.0;

float b = clamp(src_color.b * 255.0, 0.0, 255.0);
float b_i = floor(b);

// Calculate tile indices more efficiently
vec2 tileIndex;
tileIndex.y = floor(b_i * 0.0625);  // Precalculated 1/16
tileIndex.x = mod(b_i, 16.0);

// Simplified UV calculation
vec2 pixelPos = src_color.rg * (tileSize - 1.0) + 0.5;
vec2 uv1 = (tileIndex * tileSize + pixelPos) * 0.000244140625;  // Precalculated 1/4096

vec3 lutColor = texture2D(lut, uv1).rgb;
return vec4(lutColor, 1.0);
}

void main() {
vec4 color = texture2D(t, uv);
vec4 lutColor = applyLUT(color);
gl_FragColor = mix(color, lutColor, intensity);
}
`,
};

export default lutShader;

Образец LUT - Примечание должно было сжать в JPEG, чтобы опубликовать здесь

Я попытался изменить метод для использования Skia, но он не работал, и это было не даже намного быстрее. Я полагаю, что я также попробовал предварительно загружать активы с помощью Espo-Asset , что просто поддерживало приложение загружать в течение длительного времени и вообще не помогла.

Подробнее здесь: https://stackoverflow.com/questions/794 ... rastically