Implement two-pass separable Gaussian blur for camera preview
Replace the single-pass 9-tap directional blur with a three-pass pipeline: passthrough (camera→FBO), horizontal blur (FBO-A→FBO-B), vertical blur (FBO-B→screen). This produces a true 2D Gaussian with a 13-tap kernel per pass, eliminating the visible banding/streaking of the old approach. Key changes: - TiltShiftRenderer: FBO ping-pong with two color textures, separate fullscreen quad for blur passes (no crop-to-fill), drawQuad helper - TiltShiftShader: manages two programs (passthrough + blur), blur program uses raw screen-space angle (no camera rotation adjustment) - tiltshift_fragment.glsl: rewritten for sampler2D in screen space, aspect correction on X axis (height-normalized), uBlurDirection uniform for H/V selection, wider falloff (3x multiplier) - New tiltshift_passthrough_fragment.glsl for camera→FBO copy - TiltShiftOverlay: shrink PINCH_SIZE zone (1.3x, was 2.0x) so pinch-to-zoom is reachable over more of the screen - CameraManager: optimistic zoom update fixes pinch-to-zoom stalling (stale zoomRatio base prevented delta accumulation) Bump version to 1.1.3. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
aab1ff38a4
commit
f3baa723be
7 changed files with 397 additions and 298 deletions
|
|
@ -5,6 +5,7 @@ import android.graphics.SurfaceTexture
|
|||
import android.opengl.GLES11Ext
|
||||
import android.opengl.GLES20
|
||||
import android.opengl.GLSurfaceView
|
||||
import android.util.Log
|
||||
import java.nio.ByteBuffer
|
||||
import java.nio.ByteOrder
|
||||
import java.nio.FloatBuffer
|
||||
|
|
@ -12,10 +13,16 @@ import javax.microedition.khronos.egl.EGLConfig
|
|||
import javax.microedition.khronos.opengles.GL10
|
||||
|
||||
/**
|
||||
* OpenGL renderer for applying tilt-shift effect to camera preview.
|
||||
* OpenGL renderer for applying tilt-shift effect to camera preview
|
||||
* using a two-pass separable Gaussian blur.
|
||||
*
|
||||
* This renderer receives camera frames via SurfaceTexture and applies
|
||||
* the tilt-shift blur effect using GLSL shaders.
|
||||
* Rendering pipeline (3 draw calls per frame):
|
||||
* 1. **Passthrough**: camera texture → FBO-A (handles coordinate transform via vertex/texcoord)
|
||||
* 2. **Horizontal blur**: FBO-A → FBO-B (13-tap Gaussian, tilt-shift mask)
|
||||
* 3. **Vertical blur**: FBO-B → screen (13-tap Gaussian, tilt-shift mask)
|
||||
*
|
||||
* The passthrough decouples the camera's rotated coordinate system from the blur
|
||||
* passes, which work entirely in screen space.
|
||||
*/
|
||||
class TiltShiftRenderer(
|
||||
private val context: Context,
|
||||
|
|
@ -23,16 +30,30 @@ class TiltShiftRenderer(
|
|||
private val onFrameAvailable: () -> Unit
|
||||
) : GLSurfaceView.Renderer {
|
||||
|
||||
companion object {
|
||||
private const val TAG = "TiltShiftRenderer"
|
||||
}
|
||||
|
||||
private lateinit var shader: TiltShiftShader
|
||||
private var surfaceTexture: SurfaceTexture? = null
|
||||
private var cameraTextureId: Int = 0
|
||||
|
||||
private lateinit var vertexBuffer: FloatBuffer
|
||||
private lateinit var texCoordBuffer: FloatBuffer
|
||||
// Camera quad: crop-to-fill vertices + rotated texcoords (pass 1 only)
|
||||
private lateinit var cameraVertexBuffer: FloatBuffer
|
||||
private lateinit var cameraTexCoordBuffer: FloatBuffer
|
||||
|
||||
// Fullscreen quad for blur passes (no crop, standard texcoords)
|
||||
private lateinit var fullscreenVertexBuffer: FloatBuffer
|
||||
private lateinit var fullscreenTexCoordBuffer: FloatBuffer
|
||||
|
||||
private var surfaceWidth: Int = 0
|
||||
private var surfaceHeight: Int = 0
|
||||
|
||||
// FBO resources: one framebuffer, two color textures for ping-pong
|
||||
private var fboId: Int = 0
|
||||
private var fboTexA: Int = 0
|
||||
private var fboTexB: Int = 0
|
||||
|
||||
// Current effect parameters (updated from UI thread)
|
||||
@Volatile
|
||||
var blurParameters: BlurParameters = BlurParameters.DEFAULT
|
||||
|
|
@ -69,27 +90,33 @@ class TiltShiftRenderer(
|
|||
@Volatile
|
||||
private var currentTexCoords = texCoordsBack
|
||||
|
||||
@Volatile
|
||||
private var updateTexCoordBuffer = false
|
||||
|
||||
override fun onSurfaceCreated(gl: GL10?, config: EGLConfig?) {
|
||||
GLES20.glClearColor(0f, 0f, 0f, 1f)
|
||||
|
||||
// Initialize shader
|
||||
shader = TiltShiftShader(context)
|
||||
shader.initialize()
|
||||
|
||||
// Allocate vertex buffer (8 floats = 4 vertices × 2 components)
|
||||
vertexBuffer = ByteBuffer.allocateDirect(8 * 4)
|
||||
.order(ByteOrder.nativeOrder())
|
||||
.asFloatBuffer()
|
||||
// Fill with default full-screen quad; will be recomputed when camera resolution is known
|
||||
vertexBuffer.put(floatArrayOf(-1f, -1f, 1f, -1f, -1f, 1f, 1f, 1f))
|
||||
vertexBuffer.position(0)
|
||||
// Camera quad vertex buffer (crop-to-fill, recomputed when resolution is known)
|
||||
cameraVertexBuffer = allocateFloatBuffer(8)
|
||||
cameraVertexBuffer.put(floatArrayOf(-1f, -1f, 1f, -1f, -1f, 1f, 1f, 1f))
|
||||
cameraVertexBuffer.position(0)
|
||||
|
||||
// Create texture coordinate buffer
|
||||
texCoordBuffer = ByteBuffer.allocateDirect(currentTexCoords.size * 4)
|
||||
.order(ByteOrder.nativeOrder())
|
||||
.asFloatBuffer()
|
||||
.put(currentTexCoords)
|
||||
texCoordBuffer.position(0)
|
||||
// Camera texcoord buffer (rotated for portrait)
|
||||
cameraTexCoordBuffer = allocateFloatBuffer(8)
|
||||
cameraTexCoordBuffer.put(currentTexCoords)
|
||||
cameraTexCoordBuffer.position(0)
|
||||
|
||||
// Fullscreen quad for blur passes (standard coords)
|
||||
fullscreenVertexBuffer = allocateFloatBuffer(8)
|
||||
fullscreenVertexBuffer.put(floatArrayOf(-1f, -1f, 1f, -1f, -1f, 1f, 1f, 1f))
|
||||
fullscreenVertexBuffer.position(0)
|
||||
|
||||
fullscreenTexCoordBuffer = allocateFloatBuffer(8)
|
||||
fullscreenTexCoordBuffer.put(floatArrayOf(0f, 0f, 1f, 0f, 0f, 1f, 1f, 1f))
|
||||
fullscreenTexCoordBuffer.position(0)
|
||||
|
||||
// Create camera texture
|
||||
val textures = IntArray(1)
|
||||
|
|
@ -114,88 +141,75 @@ class TiltShiftRenderer(
|
|||
surfaceWidth = width
|
||||
surfaceHeight = height
|
||||
vertexBufferDirty = true
|
||||
recreateFBOs(width, height)
|
||||
}
|
||||
|
||||
override fun onDrawFrame(gl: GL10?) {
|
||||
// Update texture with latest camera frame
|
||||
surfaceTexture?.updateTexImage()
|
||||
|
||||
// Recompute vertex buffer for crop-to-fill when camera or surface dimensions change
|
||||
if (vertexBufferDirty) {
|
||||
recomputeVertices()
|
||||
vertexBufferDirty = false
|
||||
}
|
||||
|
||||
// Update texture coordinate buffer if camera changed
|
||||
if (updateTexCoordBuffer) {
|
||||
texCoordBuffer.clear()
|
||||
texCoordBuffer.put(currentTexCoords)
|
||||
texCoordBuffer.position(0)
|
||||
cameraTexCoordBuffer.clear()
|
||||
cameraTexCoordBuffer.put(currentTexCoords)
|
||||
cameraTexCoordBuffer.position(0)
|
||||
updateTexCoordBuffer = false
|
||||
}
|
||||
|
||||
val params = blurParameters
|
||||
|
||||
// --- Pass 1: Camera → FBO-A (passthrough with crop-to-fill) ---
|
||||
GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, fboId)
|
||||
GLES20.glFramebufferTexture2D(
|
||||
GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0,
|
||||
GLES20.GL_TEXTURE_2D, fboTexA, 0
|
||||
)
|
||||
GLES20.glViewport(0, 0, surfaceWidth, surfaceHeight)
|
||||
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT)
|
||||
|
||||
// Use shader and set parameters
|
||||
shader.use(cameraTextureId, blurParameters, surfaceWidth, surfaceHeight, isFrontCamera)
|
||||
|
||||
// Set vertex positions
|
||||
GLES20.glEnableVertexAttribArray(shader.aPositionLocation)
|
||||
GLES20.glVertexAttribPointer(
|
||||
shader.aPositionLocation,
|
||||
2,
|
||||
GLES20.GL_FLOAT,
|
||||
false,
|
||||
0,
|
||||
vertexBuffer
|
||||
shader.usePassthrough(cameraTextureId)
|
||||
drawQuad(
|
||||
shader.passthroughPositionLoc, shader.passthroughTexCoordLoc,
|
||||
cameraVertexBuffer, cameraTexCoordBuffer
|
||||
)
|
||||
|
||||
// Set texture coordinates
|
||||
GLES20.glEnableVertexAttribArray(shader.aTexCoordLocation)
|
||||
GLES20.glVertexAttribPointer(
|
||||
shader.aTexCoordLocation,
|
||||
2,
|
||||
GLES20.GL_FLOAT,
|
||||
false,
|
||||
0,
|
||||
texCoordBuffer
|
||||
// --- Pass 2: FBO-A → FBO-B (horizontal blur) ---
|
||||
GLES20.glFramebufferTexture2D(
|
||||
GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0,
|
||||
GLES20.GL_TEXTURE_2D, fboTexB, 0
|
||||
)
|
||||
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT)
|
||||
shader.useBlurPass(fboTexA, params, surfaceWidth, surfaceHeight, 1f, 0f)
|
||||
drawQuad(
|
||||
shader.blurPositionLoc, shader.blurTexCoordLoc,
|
||||
fullscreenVertexBuffer, fullscreenTexCoordBuffer
|
||||
)
|
||||
|
||||
// Draw quad
|
||||
GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4)
|
||||
|
||||
// Cleanup
|
||||
GLES20.glDisableVertexAttribArray(shader.aPositionLocation)
|
||||
GLES20.glDisableVertexAttribArray(shader.aTexCoordLocation)
|
||||
// --- Pass 3: FBO-B → screen (vertical blur) ---
|
||||
GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0)
|
||||
GLES20.glViewport(0, 0, surfaceWidth, surfaceHeight)
|
||||
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT)
|
||||
shader.useBlurPass(fboTexB, params, surfaceWidth, surfaceHeight, 0f, 1f)
|
||||
drawQuad(
|
||||
shader.blurPositionLoc, shader.blurTexCoordLoc,
|
||||
fullscreenVertexBuffer, fullscreenTexCoordBuffer
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates blur parameters. Thread-safe.
|
||||
*/
|
||||
fun updateParameters(params: BlurParameters) {
|
||||
blurParameters = params
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets whether using front camera. Updates texture coordinates accordingly.
|
||||
* Thread-safe - actual buffer update happens on next frame.
|
||||
*/
|
||||
fun setFrontCamera(front: Boolean) {
|
||||
if (isFrontCamera != front) {
|
||||
isFrontCamera = front
|
||||
currentTexCoords = if (front) texCoordsFront else texCoordsBack
|
||||
// Buffer will be updated on next draw
|
||||
updateTexCoordBuffer = true
|
||||
}
|
||||
}
|
||||
|
||||
@Volatile
|
||||
private var updateTexCoordBuffer = false
|
||||
|
||||
/**
|
||||
* Sets the camera preview resolution for crop-to-fill aspect ratio correction.
|
||||
* Thread-safe — vertex buffer is recomputed on the next frame.
|
||||
*/
|
||||
fun setCameraResolution(width: Int, height: Int) {
|
||||
if (cameraWidth != width || cameraHeight != height) {
|
||||
cameraWidth = width
|
||||
|
|
@ -204,45 +218,6 @@ class TiltShiftRenderer(
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Recomputes vertex positions to achieve crop-to-fill.
|
||||
*
|
||||
* The camera sensor is landscape; after the 90° rotation applied via texture coordinates,
|
||||
* the effective portrait dimensions are (cameraHeight × cameraWidth). We scale the vertex
|
||||
* quad so the camera frame fills the screen without stretching — the GPU clips the overflow.
|
||||
*/
|
||||
private fun recomputeVertices() {
|
||||
var scaleX = 1f
|
||||
var scaleY = 1f
|
||||
|
||||
if (cameraWidth > 0 && cameraHeight > 0 && surfaceWidth > 0 && surfaceHeight > 0) {
|
||||
// After 90° rotation: portrait width = cameraHeight, portrait height = cameraWidth
|
||||
val cameraRatio = cameraHeight.toFloat() / cameraWidth
|
||||
val screenRatio = surfaceWidth.toFloat() / surfaceHeight
|
||||
|
||||
if (cameraRatio > screenRatio) {
|
||||
// Camera wider than screen → crop sides
|
||||
scaleX = cameraRatio / screenRatio
|
||||
} else {
|
||||
// Camera taller than screen → crop top/bottom
|
||||
scaleY = screenRatio / cameraRatio
|
||||
}
|
||||
}
|
||||
|
||||
vertexBuffer.clear()
|
||||
vertexBuffer.put(floatArrayOf(
|
||||
-scaleX, -scaleY,
|
||||
scaleX, -scaleY,
|
||||
-scaleX, scaleY,
|
||||
scaleX, scaleY
|
||||
))
|
||||
vertexBuffer.position(0)
|
||||
}
|
||||
|
||||
/**
|
||||
* Releases OpenGL resources.
|
||||
* Must be called from GL thread.
|
||||
*/
|
||||
fun release() {
|
||||
shader.release()
|
||||
surfaceTexture?.release()
|
||||
|
|
@ -252,5 +227,117 @@ class TiltShiftRenderer(
|
|||
GLES20.glDeleteTextures(1, intArrayOf(cameraTextureId), 0)
|
||||
cameraTextureId = 0
|
||||
}
|
||||
|
||||
deleteFBOs()
|
||||
}
|
||||
|
||||
// --- Private helpers ---
|
||||
|
||||
private fun drawQuad(
|
||||
positionLoc: Int,
|
||||
texCoordLoc: Int,
|
||||
vertices: FloatBuffer,
|
||||
texCoords: FloatBuffer
|
||||
) {
|
||||
GLES20.glEnableVertexAttribArray(positionLoc)
|
||||
GLES20.glVertexAttribPointer(positionLoc, 2, GLES20.GL_FLOAT, false, 0, vertices)
|
||||
|
||||
GLES20.glEnableVertexAttribArray(texCoordLoc)
|
||||
GLES20.glVertexAttribPointer(texCoordLoc, 2, GLES20.GL_FLOAT, false, 0, texCoords)
|
||||
|
||||
GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4)
|
||||
|
||||
GLES20.glDisableVertexAttribArray(positionLoc)
|
||||
GLES20.glDisableVertexAttribArray(texCoordLoc)
|
||||
}
|
||||
|
||||
/**
|
||||
* Recomputes camera vertex positions to achieve crop-to-fill.
|
||||
*
|
||||
* The camera sensor is landscape; after the 90° rotation applied via texture coordinates,
|
||||
* the effective portrait dimensions are (cameraHeight × cameraWidth). We scale the vertex
|
||||
* quad so the camera frame fills the surface without stretching — the GPU clips the overflow.
|
||||
*/
|
||||
private fun recomputeVertices() {
|
||||
var scaleX = 1f
|
||||
var scaleY = 1f
|
||||
|
||||
if (cameraWidth > 0 && cameraHeight > 0 && surfaceWidth > 0 && surfaceHeight > 0) {
|
||||
val cameraRatio = cameraHeight.toFloat() / cameraWidth
|
||||
val screenRatio = surfaceWidth.toFloat() / surfaceHeight
|
||||
|
||||
if (cameraRatio > screenRatio) {
|
||||
scaleX = cameraRatio / screenRatio
|
||||
} else {
|
||||
scaleY = screenRatio / cameraRatio
|
||||
}
|
||||
}
|
||||
|
||||
cameraVertexBuffer.clear()
|
||||
cameraVertexBuffer.put(floatArrayOf(
|
||||
-scaleX, -scaleY,
|
||||
scaleX, -scaleY,
|
||||
-scaleX, scaleY,
|
||||
scaleX, scaleY
|
||||
))
|
||||
cameraVertexBuffer.position(0)
|
||||
}
|
||||
|
||||
private fun recreateFBOs(width: Int, height: Int) {
|
||||
deleteFBOs()
|
||||
|
||||
// Create two color textures for ping-pong
|
||||
val texIds = IntArray(2)
|
||||
GLES20.glGenTextures(2, texIds, 0)
|
||||
fboTexA = texIds[0]
|
||||
fboTexB = texIds[1]
|
||||
|
||||
for (texId in texIds) {
|
||||
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, texId)
|
||||
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR)
|
||||
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR)
|
||||
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE)
|
||||
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE)
|
||||
GLES20.glTexImage2D(
|
||||
GLES20.GL_TEXTURE_2D, 0, GLES20.GL_RGBA,
|
||||
width, height, 0,
|
||||
GLES20.GL_RGBA, GLES20.GL_UNSIGNED_BYTE, null
|
||||
)
|
||||
}
|
||||
|
||||
// Create single FBO (we swap the attached texture for ping-pong)
|
||||
val fbos = IntArray(1)
|
||||
GLES20.glGenFramebuffers(1, fbos, 0)
|
||||
fboId = fbos[0]
|
||||
|
||||
// Verify with texture A
|
||||
GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, fboId)
|
||||
GLES20.glFramebufferTexture2D(
|
||||
GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0,
|
||||
GLES20.GL_TEXTURE_2D, fboTexA, 0
|
||||
)
|
||||
val status = GLES20.glCheckFramebufferStatus(GLES20.GL_FRAMEBUFFER)
|
||||
if (status != GLES20.GL_FRAMEBUFFER_COMPLETE) {
|
||||
Log.e(TAG, "FBO incomplete: $status")
|
||||
}
|
||||
GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0)
|
||||
}
|
||||
|
||||
private fun deleteFBOs() {
|
||||
if (fboId != 0) {
|
||||
GLES20.glDeleteFramebuffers(1, intArrayOf(fboId), 0)
|
||||
fboId = 0
|
||||
}
|
||||
if (fboTexA != 0 || fboTexB != 0) {
|
||||
GLES20.glDeleteTextures(2, intArrayOf(fboTexA, fboTexB), 0)
|
||||
fboTexA = 0
|
||||
fboTexB = 0
|
||||
}
|
||||
}
|
||||
|
||||
private fun allocateFloatBuffer(floatCount: Int): FloatBuffer {
|
||||
return ByteBuffer.allocateDirect(floatCount * 4)
|
||||
.order(ByteOrder.nativeOrder())
|
||||
.asFloatBuffer()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue