基于GPU（OpenGL ES）实现实时预览颜色直方图问题求助

嘿，我完全懂你现在的处境——在React Native + Expo里用GLView做实时相机直方图，GPUImage因为要碰原生代码没法用，自己啃WebGL又卡在直方图的实现上。别急，我给你梳理一套纯JS/GL的实现思路，都是基于Expo现有API来的：

直方图本质是统计画面中每个亮度区间（0-255）的像素数量，对应到WebGL里，核心步骤是：

• 把相机实时预览的纹理传入WebGL上下文
• 通过着色器统计每个颜色通道（或灰度）的像素分布
• 把统计结果渲染成可视化的柱状图

1. 绑定相机预览纹理到GLView #

首先用Expo Camera获取实时画面，在GLView的初始化回调里把相机纹理绑定到WebGL上下文：

import React, { useState, useRef } from 'react';
import { Camera } from 'expo-camera';
import { GLView } from 'expo-gl';

export default function HistogramCamera() {
  const cameraRef = useRef(null);
  const glRef = useRef(null);

  const initGL = async (gl) => {
    glRef.current = gl;
    // 绑定相机预览纹理
    if (cameraRef.current) {
      const cameraTexture = await cameraRef.current.getPreviewTextureAsync(gl);
      // 后续的渲染循环、着色器逻辑都要基于这个纹理
      startRenderLoop(gl, cameraTexture);
    }
  };

  const startRenderLoop = (gl, texture) => {
    // 这里写WebGL渲染逻辑，包括直方图统计和绘制
    gl.enable(gl.SCISSOR_TEST);
    const render = () => {
      gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
      gl.scissor(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
      gl.clearColor(0, 0, 0, 0);
      gl.clear(gl.COLOR_BUFFER_BIT);

      // 这里插入直方图统计和绘制代码

      gl.endFrameEXP();
      requestAnimationFrame(render);
    };
    render();
  };

  return (
    <>
      <Camera ref={cameraRef} style={{ flex: 1 }} type={Camera.Constants.Type.back} />
      <GLView 
        style={{ position: 'absolute', bottom: 20, left: 20, right: 20, height: 120 }} 
        onContextCreate={initGL}
      />
    </>
  );
}

2. 用着色器实现直方图统计 #

这里要分两个阶段：统计像素分布和绘制直方图，需要用到帧缓冲（Framebuffer）来存储统计结果：

阶段1：统计像素亮度分布 #

创建一个256x1的帧缓冲纹理（对应0-255的亮度值），用片元着色器遍历相机纹理的每个像素，累加对应亮度区间的计数。如果你的Expo环境支持WebGL 2.0，可以用atomicAdd来高效累加：

// 统计用的片元着色器（WebGL 2.0）
#version 300 es
precision highp float;
uniform sampler2D u_cameraTex;
in vec2 v_texCoord;
layout(r32ui) uniform uimage2D u_histogramTex;

void main() {
  vec4 color = texture(u_cameraTex, v_texCoord);
  // 计算灰度值（要单独统计RGB的话，分别处理r/g/b通道即可）
  float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));
  uint index = uint(floor(gray * 255.0));
  // 原子累加对应索引的计数
  imageAtomicAdd(u_histogramTex, ivec2(index, 0), 1u);
}

如果是WebGL 1.0（不支持原子操作），可以把图像分块多次渲染，或者退而求其次用CPU统计：从WebGL中读取像素数据到JS数组，然后循环统计每个亮度区间的数量，再把结果传给着色器。

阶段2：绘制可视化直方图 #

把统计好的纹理渲染成柱状图，片元着色器根据当前坐标读取计数，归一化后绘制高度：

// 绘制直方图的片元着色器
precision highp float;
uniform sampler2D u_histogramTex;
uniform float u_maxCount; // 画面中的最大像素数，用来归一化高度
varying vec2 v_texCoord;

void main() {
  // 读取对应x位置的计数
  float count = texture2D(u_histogramTex, vec2(v_texCoord.x, 0.5)).r;
  // 归一化到0-1的高度
  float barHeight = count / u_maxCount;
  // 绘制红色柱状（要RGB分离的话，分别读取三个通道的计数即可）
  if (v_texCoord.y < barHeight) {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 0.8);
  } else {
    gl_FragColor = vec4(0.0);
  }
}

3. 避坑指南 #

• 纹理坐标翻转：相机预览的纹理坐标通常是上下颠倒的，记得在顶点着色器里处理：v_texCoord = vec2(a_texCoord.x, 1.0 - a_texCoord.y);
• 性能优化：实时预览下尽量减少draw call，复用帧缓冲和纹理；如果用CPU统计，注意控制读取像素的频率（比如每2帧统计一次）
• 计数归一化：一定要计算画面的最大像素数（比如相机分辨率的宽×高），否则直方图高度会溢出画布

内容的提问来源于stack exchange，提问作者Edouard