{"id":13608442,"url":"https://github.com/appspell/ShaderView","last_synced_at":"2025-04-12T17:31:32.154Z","repository":{"id":40461438,"uuid":"324111664","full_name":"appspell/ShaderView","owner":"appspell","description":"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.","archived":false,"fork":false,"pushed_at":"2023-04-03T03:05:18.000Z","size":2046,"stargazers_count":92,"open_issues_count":4,"forks_count":15,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-11-07T14:38:59.999Z","etag":null,"topics":["android","android-opengl","androidshader","customview","glsl","glsl-shaders","gltextureview","renderscript","shaders","shaderview","textureview","video-processing","video-shader"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/appspell.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-24T08:56:29.000Z","updated_at":"2024-10-28T14:37:14.000Z","dependencies_parsed_at":"2024-08-01T19:42:11.250Z","dependency_job_id":"7591e9f6-7238-4764-9a56-b4e51c6a808a","html_url":"https://github.com/appspell/ShaderView","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appspell%2FShaderView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appspell%2FShaderView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appspell%2FShaderView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appspell%2FShaderView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/appspell","download_url":"https://codeload.github.com/appspell/ShaderView/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248605086,"owners_count":21132106,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","android-opengl","androidshader","customview","glsl","glsl-shaders","gltextureview","renderscript","shaders","shaderview","textureview","video-processing","video-shader"],"created_at":"2024-08-01T19:01:27.250Z","updated_at":"2025-04-12T17:31:27.145Z","avatar_url":"https://github.com/appspell.png","language":"Kotlin","readme":"# ShaderView\n[![](https://jitpack.io/v/appspell/ShaderView.svg)](https://jitpack.io/#appspell/ShaderView)\n\nThis library is the easiest way to use **OpenGL shaders** as an **[Android View](https://developer.android.com/reference/android/view/View)**. You just simply need to add **ShaderView** in your layout and set up shaders.\nThe advantage of this library that you can use ShaderView in your hierarchy as a regular View.\n\n\n### Use cases:\n\n- Shaders for video\n- Advanced UI components (blur, shadow, lighting, etc.)\n- UI effects and animation\n- Realtime image animation\n- Shaders for a camera\n\n\u003cimg src=\"https://i.imgur.com/bV8im18.gif\" width=\"30%\"\u003e\u003cimg src=\"https://i.imgur.com/zQa1uas.gif\" width=\"30%\"\u003e\n\n## Table of content\n\n- [How to use it](https://github.com/appspell/ShaderView#how-to-use-it)\n   - [Add to the project](https://github.com/appspell/ShaderView#add-dependency-to-the-project)\n   - [Add ShaderView to XML layout](https://github.com/appspell/ShaderView#add-shaderview-to-xml-layout)\n   - [Add ShaderView programmatically](https://github.com/appspell/ShaderView#add-shaderview-programmatically-or-configure-programmatically)\n- [The full list of ShaderView properties](https://github.com/appspell/ShaderView#the-full-list-of-shaderview-properties)\n- [How to send custom data to the shader](https://github.com/appspell/ShaderView#how-to-send-custom-data-to-the-shader)\n- [How to add custom fragment shader using build-in vector shader](https://github.com/appspell/ShaderView#how-to-add-custom-fragment-shader-using-build-in-vector-shader)\n- [How to add shaders for video playback](https://github.com/appspell/ShaderView#how-to-add-shaders-for-video-playback)\n- [Example of shaders](https://github.com/appspell/ShaderView#example-of-shaders)\n\n\n## How to use it\n\n### Add dependency to the project\n\n**Gradle**\n\n```gralde\nallprojects {\n\trepositories {\n\t\t...\n\t\tmaven { url 'https://jitpack.io' }\n\t}\n}\n```\n\n```gradle\nimplementation 'com.github.appspell:ShaderView:[last-version]'\n```\n\n### Add ShaderView to XML layout\n\n1. Add ShaderView to the XML layout\n\n```xml\n    \u003ccom.appspell.shaderview.ShaderView\n        android:id=\"@+id/shaderView\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\"\n        app:fragment_shader_raw_res_id=\"@raw/fragment_shader\" /\u003e\n```\n\n2. Set your fragment and vertex (if needed) shaders using the following attributes:\n\n`app:fragment_shader_raw_res_id` - reference to the fragment shader file in RAW resource solder [example](https://github.com/appspell/ShaderView/blob/main/lib/src/main/res/raw/default_frag.fsh)\n\n`app:vertex_shader_raw_res_id` - reference to the vertex shader file in RAW resource solder [example](https://github.com/appspell/ShaderView/blob/main/lib/src/main/res/raw/quad_vert.vsh)\n\n### Add ShaderView programmatically (or configure programmatically)\n\n```kotlin\nval shaderView = ShaderView(this)\n\nwith(shaderView) {\n   fragmentShaderRawResId = R.raw.color_frag\n   shaderParams = ShaderParams.Builder()\n                .addColor(\"diffuseColor\", R.color.teal_200, resources)\n                .build()\n}\n```\n\n\n## The full list of ShaderView properties:\n\n`fragmentShaderRawResId` - reference to the vertex shader file in RAW resource solder [example]\n\n`vertexShaderRawResId` - reference to the fragment shader file in RAW resource solder [example]\n\n`shaderParams` - custom parameters that we're going to send to the shader (uniform)\n\n`onViewReadyListener` - called when the view is created and ready to create a shader\n\n`onDrawFrameListener` - called each frame\n\n`updateContinuously` -  should we render the view each frame (default is \"false\")\n\n`debugMode` - enable or disable debug logs\n\n\n## How to send custom data to the shader\n\nPass `ShaderParams` to the `ShaderView` if you need to set up some `uniform` attributes.\n\n```kotlin\nshaderView.shaderParams = ShaderParamsBuilder()\n                    .addTexture2D(\n                        \"uNormalTexture\", // name of `sampler2D` in the fragment shader\n                        R.drawable.normal_button, // drawable that we use for such texture\n                        GLES30.GL_TEXTURE0 // texture slot\n                    )\n                    .addColor(\"uColor\", R.color.grey, resources) // send color as `uniform vec4`\n                    .addVec4f(\"uColor2\", floatArrayOf(0.5f, 0.5f, 0.5f, 1f))\n                    .addVec3f(\"uVaryingColor\", floatArrayOf(0.5f, 0.5f, 0.5f))\n                    .addFloat(\"uTime\", 1.0f)\n                    .build()\n```\n\nDuring execution, you may update this param:\n\n```kotlin\nshaderParams.updateValue(\"time\", System.currentTimeMillis())\n```\n\nIf you need to update `uniform` each frame, you may use `onDrawFrameListener`.\n\n```kotlin\nshaderView.onDrawFrameListener = { shaderParams -\u003e\n                    shaderParams.updateValue(\"time\", System.currentTimeMillis())\n                }\n```\n\n*The full list of supported uniform types:\nfloat, int, bool,\nvec2f, vec3f, vec4f, vec2i, vec3i, vec4i,\nmat3, mat4, mat3x4,\nsampler2D, samplerExternalOES*\n\n\n## How to add custom **fragment shader** using build-in vector shader\n\n1. Set up version\n2. Configure input and output. By default vertex shader sends texture coordinates using this field `in vec2 textureCoord`\n3. add `main()` function and return the result color to `fragColor`\n\n```glsl\n#version 300 es\nprecision mediump float;\n\nin vec2 textureCoord;\nout vec4 fragColor;\n\nvoid main() {\n    fragColor = vec4(textureCoord.x, textureCoord.y, textureCoord.y, 1.0);\n}\n```\n\n\n## How to add shaders for **video playback**\n\nFull code of example using [ExoPlayer](https://github.com/google/ExoPlayer) you may find [here](https://github.com/appspell/ShaderView/blob/main/demo/src/main/java/com/appspell/shaderview/demo/video/VideoActivity.kt) and [here](https://github.com/appspell/ShaderView/blob/main/demo/src/main/java/com/appspell/shaderview/demo/video/VideoAdvancedActivity.kt)\n\n1. Setup [OES texture](https://www.khronos.org/registry/OpenGL/extensions/OES/OES_EGL_image_external_essl3.txt) in [fragment shader](https://github.com/appspell/ShaderView/blob/main/demo/src/main/res/raw/video_shader.fsh):\n```glsl\n#version 300 es\n#extension GL_OES_EGL_image_external_essl3 : require\n\nuniform samplerExternalOES uVideoTexture;\n```\n\n2. Define it for ShaderParams\n```glsl\nshaderParams = ShaderParamsBuilder()\n                .addTextureOES(\"uVideoTexture\") // video texture input/output\n                .build()\n```\n3. When `ShaderView` is ready, send `Surface` to the video player\n```kotlin\nshaderView.onViewReadyListener = { shader -\u003e\n                // get surface from shader params\n                val surface = shader.params.getTexture2dOESSurface(\"uVideoTexture\")\n\n                // initialize video player with this surface\n                initVideoPlayer(surface)\n            }\n```\n\n\n## Example of shaders\n- [simple shader](https://github.com/appspell/ShaderView/blob/main/demo/src/main/res/raw/simple_frag.fsh)\n- [blur](https://github.com/appspell/ShaderView/blob/main/demo/src/main/res/raw/blur.fsh)\n- normal map shader: [vertex](https://github.com/appspell/ShaderView/blob/main/ShaderView/src/main/res/raw/quad_tangent_space_vert.vsh), [fragment](https://github.com/appspell/ShaderView/blob/main/demo/src/main/res/raw/nomral_map.fsh)\n- [color](https://github.com/appspell/ShaderView/blob/main/demo/src/main/res/raw/color_frag.fsh)\n- [multiple textures](https://github.com/appspell/ShaderView/blob/main/demo/src/main/res/raw/multiple_textures_frag.fsh)\n- [video](https://github.com/appspell/ShaderView/blob/main/demo/src/main/res/raw/video_shader.fsh)\n- [advanced video shader](https://github.com/appspell/ShaderView/blob/main/demo/src/main/res/raw/video_advanced_shader.fsh)\n\nIn Android Demo Project code you may found it in ViewHolders [here](https://github.com/appspell/ShaderView/blob/main/demo/src/main/java/com/appspell/shaderview/demo/list/ShaderListAdapter.kt)\n\n\n## Additional information\n\nWhy we use [TextureView](https://developer.android.com/reference/android/view/TextureView) instead of [SurfaceView](https://developer.android.com/reference/android/view/SurfaceView) you can read [here](https://github.com/crosswalk-project/crosswalk-website/wiki/Android-SurfaceView-vs-TextureView). \n\nTo be able to use OpenGL rendering for Android TextureView, we've created [GLTextureView.kt](https://github.com/appspell/ShaderView/blob/main/lib/src/main/java/com/appspell/shaderview/gl/view/GLTextureView.kt)\n","funding_links":[],"categories":["Kotlin"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappspell%2FShaderView","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fappspell%2FShaderView","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappspell%2FShaderView/lists"}