Strange behavior: doesn't work in real project

ShaderView

This library is the easiest way to use OpenGL shaders as an Android View. You just simply need to add ShaderView in your layout and set up shaders. The advantage of this library that you can use ShaderView in your hierarchy as a regular View.

Use cases:

Shaders for video
Advanced UI components (blur, shadow, lighting, etc.)
UI effects and animation
Realtime image animation
Shaders for a camera

Table of content

How to use it

Add dependency to the project

Gradle

allprojects {
	repositories {
		...
		maven { url 'https://jitpack.io' }
	}
}

implementation 'com.github.appspell:ShaderView:[last-version]'

Add ShaderView to XML layout

Add ShaderView to the XML layout

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

Set your fragment and vertex (if needed) shaders using the following attributes:

app:fragment_shader_raw_res_id - reference to the fragment shader file in RAW resource solder example

app:vertex_shader_raw_res_id - reference to the vertex shader file in RAW resource solder example

Add ShaderView programmatically (or configure programmatically)

val shaderView = ShaderView(this)

with(shaderView) {
   fragmentShaderRawResId = R.raw.color_frag
   shaderParams = ShaderParams.Builder()
                .addColor("diffuseColor", R.color.teal_200, resources)
                .build()
}

The full list of ShaderView properties:

fragmentShaderRawResId - reference to the vertex shader file in RAW resource solder [example]

vertexShaderRawResId - reference to the fragment shader file in RAW resource solder [example]

shaderParams - custom parameters that we're going to send to the shader (uniform)

onViewReadyListener - called when the view is created and ready to create a shader

onDrawFrameListener - called each frame

updateContinuously - should we render the view each frame (default is "false")

debugMode - enable or disable debug logs

How to send custom data to the shader

Pass ShaderParams to the ShaderView if you need to set up some uniform attributes.

shaderView.shaderParams = ShaderParamsBuilder()
                    .addTexture2D(
                        "uNormalTexture", // name of `sampler2D` in the fragment shader
                        R.drawable.normal_button, // drawable that we use for such texture
                        GLES30.GL_TEXTURE0 // texture slot
                    )
                    .addColor("uColor", R.color.grey, resources) // send color as `uniform vec4`
                    .addVec4f("uColor2", floatArrayOf(0.5f, 0.5f, 0.5f, 1f))
                    .addVec3f("uVaryingColor", floatArrayOf(0.5f, 0.5f, 0.5f))
                    .addFloat("uTime", 1.0f)
                    .build()

During execution, you may update this param:

shaderParams.updateValue("time", System.currentTimeMillis())

If you need to update uniform each frame, you may use onDrawFrameListener.

shaderView.onDrawFrameListener = { shaderParams ->
                    shaderParams.updateValue("time", System.currentTimeMillis())
                }

The full list of supported uniform types: float, int, bool, vec2f, vec3f, vec4f, vec2i, vec3i, vec4i, mat3, mat4, mat3x4, sampler2D, samplerExternalOES

How to add custom fragment shader using build-in vector shader

Set up version
Configure input and output. By default vertex shader sends texture coordinates using this field in vec2 textureCoord
add main() function and return the result color to fragColor

#version 300 es
precision mediump float;

in vec2 textureCoord;
out vec4 fragColor;

void main() {
    fragColor = vec4(textureCoord.x, textureCoord.y, textureCoord.y, 1.0);
}

How to add shaders for video playback

Full code of example using ExoPlayer you may find here and here

Setup OES texture in fragment shader:

#version 300 es
#extension GL_OES_EGL_image_external_essl3 : require

uniform samplerExternalOES uVideoTexture;

Define it for ShaderParams

shaderParams = ShaderParamsBuilder()
                .addTextureOES("uVideoTexture") // video texture input/output
                .build()

When ShaderView is ready, send Surface to the video player

shaderView.onViewReadyListener = { shader ->
                // get surface from shader params
                val surface = shader.params.getTexture2dOESSurface("uVideoTexture")

                // initialize video player with this surface
                initVideoPlayer(surface)
            }

Example of shaders

In Android Demo Project code you may found it in ViewHolders here

Additional information

Why we use TextureView instead of SurfaceView you can read here.

To be able to use OpenGL rendering for Android TextureView, we've created GLTextureView.kt

	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
	}
	}
	}
	}
	}

	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)
	}
	}
	}
	}
	}

appspell / shaderview Goto Github PK

shaderview's Introduction

ShaderView

Use cases:

Table of content

How to use it

Add dependency to the project

Add ShaderView to XML layout

Add ShaderView programmatically (or configure programmatically)

The full list of ShaderView properties:

How to send custom data to the shader

How to add custom fragment shader using build-in vector shader

How to add shaders for video playback

Example of shaders

Additional information

shaderview's People

Contributors

Stargazers

Watchers

Forkers

shaderview's Issues

Recommend Projects

Recommend Topics

Recommend Org