Coder Social home page Coder Social logo

appspell / shaderview Goto Github PK

View Code? Open in Web Editor NEW
84.0 4.0 13.0 2 MB

ShaderView is an Android View that makes it easy to use GLSL shaders for your app. It's the modern way to use shaders for Android instead of RenderScript.

License: MIT License

Kotlin 98.95% GLSL 1.05%
android shaders gltextureview textureview androidshader android-opengl customview glsl-shaders glsl shaderview

shaderview's Issues

Surface is invalid when put ShaderView in ViewPager2 and swipe to previous page item

Assume there are two Fragment (AFragment and BFragment) in ViewPager2.
Each Fragment contains one ShaderView (AShaderView and BShaderView).

When we swipe the ViewPager2:

AFragment -> BFragment -> AFragment

The Surface is invalid that used by AShaderView.

My survey:

The first step AFragment -> BFragment cause the Surface in AShaderView been release in

ShaderView/ShaderView/src/main/java/com/appspell/shaderview/gl/params/ShaderParamsImpl.kt

Lines 53 to 69 in 0573652

override fun release() {
for (key in map.keys) {
map[key]?.apply {
when (valeType) {
Param.ValueType.SAMPLER_OES -> {
(value as? TextureOESParam)?.apply {
surfaceTexture.release()
surface.release()
}
}
else -> {
// do nothing
}
}
}
}
}

(Called from onSurfaceTextureDestroyed)

and the second step BFragment -> AFragment using the Surface which had been release in the previous step.

It can not create a new Surface because Param.ValueType.SAMPLER_OES value is not null

ShaderView/ShaderView/src/main/java/com/appspell/shaderview/gl/params/ShaderParamsImpl.kt

Lines 161 to 177 in 0573652

Param.ValueType.SAMPLER_OES -> {
if (value == null) {
// if it's not initialized
location = createExternalTexture()
val surfaceTexture = SurfaceTexture(location)
value = TextureOESParam(
surfaceTexture = surfaceTexture,
surface = Surface(surfaceTexture)
).apply {
surfaceTexture.setOnFrameAvailableListener {
lock.withLock {
updateSurface.set(true)
}
}
}
}
}

Strange behavior: doesn't work in real project

Everything works in an empty project, but does not work when trying to add ShaderView to a real project. My goal is simple - display a bitmap with shader effects and dynamically change it. But for some reason, I can't even display the bitmap.

My layout:

  <com.appspell.shaderview.ShaderView
      android:id="@+id/shaderView"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />

My code:

// Called when bitmap loaded
binding.shaderView.apply {
            fragmentShaderRawResId = R.raw.fragment_texture_shader
            shaderParams = ShaderParamsBuilder()
                .addTexture2D("uTexture", bitmap, GLES30.GL_TEXTURE0)
                .build()
        }

My shader:

#version 300 es
precision mediump float;

uniform sampler2D uTexture;

in vec2 textureCoord;
out vec4 fragColor;

void main() {
   fragColor = texture(uTexture, textureCoord);
}

Result - white ShaderView.

I tried:

  • Set updateContinuously = true
  • Set debugMode = true (no logs messages at all)
  • Use drawable instead bitmap
  • Create ShaderView programmatically
  • Use shaderView.shaderParams.updateValue2D()
  • Set in manifest android:hardwareAccelerated="true"

Nothing works. Maybe there are some unobvious restrictions? The best that I managed to achieve was to display drawable (png) if ShaderView is initialized immediately in onCreate.

Performance issue (not really)

Firstly,
thanks for handy tool, really useful to avoid messing directly with OGL.

I have a question or an issue to rise though.

I've just been testing it little bit and did following simple fragmentShader

#version 300 es

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;
uniform vec2 u_resolution;

out vec4 fragColor;

float nsin(float value) {
    return (sin(value) + 1.) / 2.;
}

void main() {
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / u_resolution.y;
    uv *= 2.0;

    float x = length(uv) * 10.0 * nsin(3. * u_time);
    fragColor = vec4(vec3(x), 1.0) + vec4(1.0, 0.0, 0.0, 0.1);
}

^ simple animation put in color_frag.sh

and updated the SimpleShaderActivity
with

binding.shaderView.updateContinuously = true
        binding.shaderView.debugMode = true

        binding.shaderView.onDrawFrameListener = { params ->
            if (startTime == 0f) {
                startTime = now()
            }
            params.updateValue("u_time", now())
            params.updateValue("u_resolution", viewSize)
        }

It works fine on start, but in time let's say in a min or 2,
the performance goes really down and FPS very noticable drops to something like 10 or so, it looks like it's dropping with running time.

Any idea if I'm doing something wrong or where might be an issue ?

Throws an exception if the same bitmap is passed multiple times

I've put this code in the onBindViewHolder function in a recycler view, and it keeps throwing exceptions about the bitmap being recycled.

shaderView.shaderParams?.updateParam(
    "albedo", Param(
        Param.ValueType.SAMPLER_2D,
        value = TextureParam(
            bitmap = lastCoverBitmap,
            textureSlot = GLES30.GL_TEXTURE0
        )
    )
)

The exception:

java.lang.IllegalArgumentException: bitmap is recycled
    at android.opengl.GLUtils.texImage2D(GLUtils.java:152)
    at com.appspell.shaderview.ext.TextureKt.toGlTexture(Texture.kt:66)
    at com.appspell.shaderview.gl.params.ShaderParamsImpl.bindTextures(ShaderParamsImpl.kt:153)
    at com.appspell.shaderview.gl.params.ShaderParamsImpl.bindParams(ShaderParamsImpl.kt:74)
    at com.appspell.shaderview.gl.shader.GLShaderImpl.bindParams(GLShaderImpl.kt:89)
    at com.appspell.shaderview.ShaderView.initShaders(ShaderView.kt:177)
    at com.appspell.shaderview.ShaderView.access$initShaders(ShaderView.kt:28)
    at com.appspell.shaderview.ShaderView$rendererListener$1.onSurfaceCreated(ShaderView.kt:92)
    at com.appspell.shaderview.gl.render.GLQuadRenderImpl.onSurfaceCreated(GLQuadRender.kt:90)
    at com.appspell.shaderview.gl.view.GLTextureView$GLThread.guardedRun(GLTextureView.kt:1507)
    at com.appspell.shaderview.gl.view.GLTextureView$GLThread.run(GLTextureView.kt:1223)

I'm not sure yet, but maybe it's caused by bitmap?.toGlTexture(needToRecycle = true, textureParam.textureSlot) in the ShaderParamsImpl.bindTextures function
Maybe I'll try to fix it myself, but can't promise anything

UPDATE:
I forked the repo and tried to fix it, but have no idea of how to test it, cause it seems incompatible with jitpack, and jfrog/jcenter seems like it's a paid service, idk

Should I open a pull request, even though I haven't tested it?

I need your ideas how to simplify interface!

I want to make the simpler way how to use this library.
Do you have any ideas on how to make the architecture or API library more friendly?

Look at the code below, seems like there is a better (simpler) way to set up this view. Maybe some DSL?

shaderView.apply {
                updateContinuously = true // update each frame
                vertexShaderRawResId = R.raw.quad_tangent_space_vert
                fragmentShaderRawResId = R.raw.nomral_map
                shaderParams = ShaderParamsBuilder()
                    .addTexture2D(
                        "uNormalTexture",
                        R.drawable.normal_button,
                        GLES30.GL_TEXTURE0
                    )
                    .addColor("uColor", R.color.grey, resources)
                    .addVec3f("uVaryingColor", floatArrayOf(0.5f, 0.5f, 0.5f))
                    .addVec3f("uLightDirection", floatArrayOf(1.0f, 1.0f, 0.0f))
                    .addVec3f("uEyeDirection", floatArrayOf(0.0f, 0.0f, 0.0f))
                    .build()
                onDrawFrameListener = { shaderParams ->
                    val pos = (System.currentTimeMillis() % 5000L) / 1000f
                    shaderParams.updateValue("uLightDirection", floatArrayOf(0.0f + pos, 1.0f, 0.0f))
                }
            }

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.