├── LICENSE ├── README.md ├── assets ├── resources.meta ├── resources │ ├── shader.meta │ ├── shader │ │ ├── cloud2d.txt │ │ ├── cloud2d.txt.meta │ │ ├── lightcircle.txt │ │ └── lightcircle.txt.meta │ ├── texture.meta │ └── texture │ │ ├── angel.png │ │ ├── angel.png.meta │ │ ├── image.jpg │ │ ├── image.jpg.meta │ │ ├── image2.png │ │ └── image2.png.meta ├── scene.meta ├── scene │ ├── test-frag-file-noshadertoy.fire │ ├── test-frag-file-noshadertoy.fire.meta │ ├── test-frag-file-shadertoy.fire │ ├── test-frag-file-shadertoy.fire.meta │ ├── test-single-file.fire │ └── test-single-file.fire.meta ├── scripts.meta └── scripts │ ├── CustomMaterial.ts │ ├── CustomMaterial.ts.meta │ ├── Glowing.ts │ ├── Glowing.ts.meta │ ├── ShaderAssembler.ts │ ├── ShaderAssembler.ts.meta │ ├── ShaderFactory.ts │ ├── ShaderFactory.ts.meta │ ├── Test1.ts │ ├── Test1.ts.meta │ ├── Test2.ts │ ├── Test2.ts.meta │ ├── Test3.ts │ ├── Test3.ts.meta │ ├── handler.meta │ ├── handler │ ├── handler.ts │ └── handler.ts.meta │ ├── loader.meta │ └── loader │ ├── LoaderUtil.ts │ └── LoaderUtil.ts.meta ├── creator.d.ts ├── jsconfig.json ├── project.json ├── snapshot ├── compelete.png ├── shader_disable.gif └── shadertoy.gif └── tsconfig.json /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Sinmere Yuan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # cocos-creator-shader-assembler 2 | 3 | ## 简介 4 | 5 | TypeScript版本 6 | 7 | 使用Creator2.0的材质系统 ，懒人shader， 自定义shader部分不通过可通过少量修改，shadertoy部分shader和完整格式可直接复制用。 8 | 9 | 1.支持完整配置let object={name：'',defines:[]，vert:'',frag:''} 格式。 10 | 11 | 2.支持shadertoy部分代码，单pass Demo支持，多pass引擎不支持，shader 文件保存文本格式txt。 12 | 13 | 3.支持部分不完整的shader 采用define覆盖方式，进行兼容，有部分shader多次定义需手动更改，shader 文件保存文本格式txt。 14 | 15 | 16 | ## 实现概述 17 | 18 | 使用控件ShaderAssembler挂载控件的方式对Sprite中材质进行操控，不对Sprite进行改造，所有自定义材质都再ShaderAssmber管理自定义材质。 19 | 20 | ShaderFactory注册Template到渲染引擎中，ShaderFactory要先注册，才能使用自定义Shader。 21 | 22 | ShaderFactory可独立操作，一次性全部注册，或者动态注册。 23 | 24 | 25 | ### 自定义材质类 26 | 27 | 参考colinsusie 提供的[CustomMaterial](https://github.com/colinsusie/creator_2_0_material_demo/blob/master/assets/Scripts/CustomMaterial.js)，这个材质类可以实现各种不同的效果。，再此感谢colin的分享。 28 | 29 | 30 | ### Demo代码片段 31 | import 完整的Object shader配置 32 | ```js 33 | import Glowing from './Glowing'; 34 | let shader_assembler = this.sprite.node.getComponent(ShaderAssembler); 35 | // 注册渲染引擎pass template 可直接调用ShaderFactory独立注册 36 | shader_assembler.registerShaderTemplate(Glowing); 37 | let mat = shader_assembler.createCustomMaterial( 38 | Glowing.name, 39 | [ 40 | {name: 'iResolution', type: renderer.PARAM_FLOAT3}, 41 | {name: 'iTime', type: renderer.PARAM_FLOAT}, 42 | ], 43 | [] 44 | ) 45 | var iResolution = new cc.Vec3( 46 | this.sprite.spriteFrame.getTexture().width, 47 | this.sprite.spriteFrame.getTexture().height, 48 | 0 49 | ); 50 | mat.color = new cc.Color().fromHEX("#1A7ADC") 51 | shader_assembler.activateCustomMaterial(this.sprite,mat) 52 | mat.setParamValue("iResolution", iResolution); 53 | ``` 54 | 55 | shadertoy上代码copy直接用 56 | ```js 57 | var name = 'cloud2d'; 58 | 59 | var self = this; 60 | cc.loader.loadRes('shader/' + name, function (err, data) { 61 | let shader_assembler = self.sprite.node.getComponent(ShaderAssembler); 62 | shader_assembler.registerFragShaderTemplate( 63 | name, 64 | default_vert, 65 | default_frag_prefix + data.text + default_frag_postfix 66 | , 67 | [ 68 | { name: 'use2DPos' }, 69 | { name: 'useModel' }, 70 | ]); 71 | let mat = shader_assembler.createCustomMaterial( 72 | name, 73 | [ 74 | { name: 'iResolution', type: renderer.PARAM_FLOAT3 }, 75 | { name: 'iTime', type: renderer.PARAM_FLOAT }, 76 | ], 77 | [ 78 | { name: 'use2DPos', value: 'true' }, 79 | { name: 'useModel', value: 'false' } 80 | ] 81 | ) 82 | var iResolution = new cc.Vec3( 83 | self.sprite.node.width, 84 | self.sprite.node.height, 85 | 10 86 | ); 87 | console.log(iResolution); 88 | shader_assembler.activateCustomMaterial(self.sprite, mat) 89 | mat.setParamValue("iResolution", iResolution); 90 | }); 91 | ``` 92 | 93 | 非shadertoy代码，定义缺失，采用define方式覆盖，只有加少量define，让shader修改量降至最小。 94 | ```js 95 | var name = 'lightcircle'; 96 | var self = this; 97 | cc.loader.loadRes('shader/' + name, function (err, data) { 98 | // console.log(data.text); 99 | let shader_assembler = self.sprite.node.getComponent(ShaderAssembler); 100 | shader_assembler.registerFragShaderTemplate( 101 | name, 102 | default_vert, 103 | `#define v_texCoord uv0 104 | `+default_frag_prefix + data.text 105 | , 106 | [ 107 | { name: 'use2DPos' }, 108 | { name: 'useModel' }, 109 | ]); 110 | let mat = shader_assembler.createCustomMaterial( 111 | name, 112 | [ 113 | { name: 'iResolution', type: renderer.PARAM_FLOAT3 }, 114 | { name: 'iTime', type: renderer.PARAM_FLOAT }, 115 | ], 116 | [ 117 | { name: 'use2DPos', value: 'true' }, 118 | { name: 'useModel', value: 'false' } 119 | ] 120 | ) 121 | let iResolution = new cc.Vec3( 122 | self.sprite.node.width, 123 | self.sprite.node.height, 124 | 10 125 | ); 126 | console.log(iResolution); 127 | shader_assembler.activateCustomMaterial(self.sprite, mat) 128 | mat.setParamValue("iResolution", iResolution); 129 | }); 130 | ``` 131 | 132 | ### 效果图 133 | 134 | - 完整shader配置： 135 | 136 | 137 | ![效果](https://github.com/Sinmere/cocos-creator-shader-assembler/blob/master/snapshot/compelete.png) 138 | 139 | - shadertoy： 140 | 141 | ![效果](https://github.com/Sinmere/cocos-creator-shader-assembler/blob/master/snapshot/shadertoy.gif) 142 | 143 | - 1.x修复shader 144 | 145 | ![效果](https://github.com/Sinmere/cocos-creator-shader-assembler/blob/master/snapshot/shader_disable.gif) -------------------------------------------------------------------------------- /assets/resources.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.1", 3 | "uuid": "7b81d4e8-ec84-4716-968d-500ac1d78a54", 4 | "isGroup": false, 5 | "subMetas": {} 6 | } -------------------------------------------------------------------------------- /assets/resources/shader.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.1", 3 | "uuid": "cce8422d-2fb8-442d-ae4f-2aa9abaaef75", 4 | "isSubpackage": false, 5 | "subpackageName": "", 6 | "subMetas": {} 7 | } -------------------------------------------------------------------------------- /assets/resources/shader/cloud2d.txt: -------------------------------------------------------------------------------- 1 | const float cloudscale = 1.1; 2 | const float speed = 0.03; 3 | const float clouddark = 0.5; 4 | const float cloudlight = 0.3; 5 | const float cloudcover = 0.2; 6 | const float cloudalpha = 8.0; 7 | const float skytint = 0.5; 8 | const vec3 skycolour1 = vec3(0.2, 0.4, 0.6); 9 | const vec3 skycolour2 = vec3(0.4, 0.7, 1.0); 10 | 11 | const mat2 m = mat2( 1.6, 1.2, -1.2, 1.6 ); 12 | 13 | vec2 hash( vec2 p ) { 14 | p = vec2(dot(p,vec2(127.1,311.7)), dot(p,vec2(269.5,183.3))); 15 | return -1.0 + 2.0*fract(sin(p)*43758.5453123); 16 | } 17 | 18 | float noise( in vec2 p ) { 19 | const float K1 = 0.366025404; // (sqrt(3)-1)/2; 20 | const float K2 = 0.211324865; // (3-sqrt(3))/6; 21 | vec2 i = floor(p + (p.x+p.y)*K1); 22 | vec2 a = p - i + (i.x+i.y)*K2; 23 | vec2 o = (a.x>a.y) ? vec2(1.0,0.0) : vec2(0.0,1.0); //vec2 of = 0.5 + 0.5*vec2(sign(a.x-a.y), sign(a.y-a.x)); 24 | vec2 b = a - o + K2; 25 | vec2 c = a - 1.0 + 2.0*K2; 26 | vec3 h = max(0.5-vec3(dot(a,a), dot(b,b), dot(c,c) ), 0.0 ); 27 | vec3 n = h*h*h*h*vec3( dot(a,hash(i+0.0)), dot(b,hash(i+o)), dot(c,hash(i+1.0))); 28 | return dot(n, vec3(70.0)); 29 | } 30 | 31 | float fbm(vec2 n) { 32 | float total = 0.0, amplitude = 0.1; 33 | for (int i = 0; i < 7; i++) { 34 | total += noise(n) * amplitude; 35 | n = m * n; 36 | amplitude *= 0.4; 37 | } 38 | return total; 39 | } 40 | 41 | void mainImage( out vec4 fragColor, in vec2 fragCoord ) { 42 | vec2 p = fragCoord.xy / iResolution.xy; 43 | vec2 uv = p*vec2(iResolution.x/iResolution.y,1.0); 44 | float time = iTime * speed; 45 | float q = fbm(uv * cloudscale * 0.5); 46 | 47 | //ridged noise shape 48 | float r = 0.0; 49 | uv *= cloudscale; 50 | uv -= q - time; 51 | float weight = 0.8; 52 | for (int i=0; i<8; i++){ 53 | r += abs(weight*noise( uv )); 54 | uv = m*uv + time; 55 | weight *= 0.7; 56 | } 57 | 58 | //noise shape 59 | float f = 0.0; 60 | uv = p*vec2(iResolution.x/iResolution.y,1.0); 61 | uv *= cloudscale; 62 | uv -= q - time; 63 | weight = 0.7; 64 | for (int i=0; i<8; i++){ 65 | f += weight*noise( uv ); 66 | uv = m*uv + time; 67 | weight *= 0.6; 68 | } 69 | 70 | f *= r + f; 71 | 72 | //noise colour 73 | float c = 0.0; 74 | time = iTime * speed * 2.0; 75 | uv = p*vec2(iResolution.x/iResolution.y,1.0); 76 | uv *= cloudscale*2.0; 77 | uv -= q - time; 78 | weight = 0.4; 79 | for (int i=0; i<7; i++){ 80 | c += weight*noise( uv ); 81 | uv = m*uv + time; 82 | weight *= 0.6; 83 | } 84 | 85 | //noise ridge colour 86 | float c1 = 0.0; 87 | time = iTime * speed * 3.0; 88 | uv = p*vec2(iResolution.x/iResolution.y,1.0); 89 | uv *= cloudscale*3.0; 90 | uv -= q - time; 91 | weight = 0.4; 92 | for (int i=0; i<7; i++){ 93 | c1 += abs(weight*noise( uv )); 94 | uv = m*uv + time; 95 | weight *= 0.6; 96 | } 97 | 98 | c += c1; 99 | 100 | vec3 skycolour = mix(skycolour2, skycolour1, p.y); 101 | vec3 cloudcolour = vec3(1.1, 1.1, 0.9) * clamp((clouddark + cloudlight*c), 0.0, 1.0); 102 | 103 | f = cloudcover + cloudalpha*f*r; 104 | 105 | vec3 result = mix(skycolour, clamp(skytint * skycolour + cloudcolour, 0.0, 1.0), clamp(f + c, 0.0, 1.0)); 106 | 107 | fragColor = vec4( result, 1.0 ); 108 | } -------------------------------------------------------------------------------- /assets/resources/shader/cloud2d.txt.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "2.0.0", 3 | "uuid": "57073f7f-61f6-490e-a3ba-03e6044e4a0b", 4 | "subMetas": {} 5 | } -------------------------------------------------------------------------------- /assets/resources/shader/lightcircle.txt: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | uniform float time; 5 | void main( void ) { 6 | // 在预览插件使用 7 | float time=iGlobalTime*1.0; 8 | //vec2 position = ((gl_FragCoord.xy / iResolution.xy) * 2. - 1.) * vec2(iResolution.x / iResolution.y, 1.0); 9 | // 纹理坐标 10 | vec2 uv= v_texCoord.xy; 11 | // 用纹理坐标来确定大小和位置 12 | vec2 position = (uv * 2.-1.) * vec2(1.0, 1.0); 13 | 14 | float d = abs(0.1 + length(position) - 0.5 * abs(sin(time))) * 5.0; 15 | gl_FragColor += vec4(0.1/d, 0.1 / d, 0.2 / d, 1); 16 | 17 | } -------------------------------------------------------------------------------- /assets/resources/shader/lightcircle.txt.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "2.0.0", 3 | "uuid": "7d2e2bd5-bea7-4ac6-bbbe-1bcae212e908", 4 | "subMetas": {} 5 | } -------------------------------------------------------------------------------- /assets/resources/texture.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.1", 3 | "uuid": "32fc8b48-4953-4ac0-addc-9473ba4b629f", 4 | "isSubpackage": false, 5 | "subpackageName": "", 6 | "subMetas": {} 7 | } -------------------------------------------------------------------------------- /assets/resources/texture/angel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sinmere/cocos-creator-shader-assembler/4fe71ae9b6745bb1a1302fb973165bc4dedeffbc/assets/resources/texture/angel.png -------------------------------------------------------------------------------- /assets/resources/texture/angel.png.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "2.2.0", 3 | "uuid": "9e45df8f-9ecd-4e76-9780-28b3ef7bc7ca", 4 | "type": "sprite", 5 | "wrapMode": "clamp", 6 | "filterMode": "bilinear", 7 | "premultiplyAlpha": false, 8 | "subMetas": { 9 | "angel": { 10 | "ver": "1.0.3", 11 | "uuid": "5dd97566-cd65-40b8-b684-2bfabc287df0", 12 | "rawTextureUuid": "9e45df8f-9ecd-4e76-9780-28b3ef7bc7ca", 13 | "trimType": "auto", 14 | "trimThreshold": 1, 15 | "rotated": false, 16 | "offsetX": 0, 17 | "offsetY": 0, 18 | "trimX": 0, 19 | "trimY": 0, 20 | "width": 200, 21 | "height": 200, 22 | "rawWidth": 200, 23 | "rawHeight": 200, 24 | "borderTop": 0, 25 | "borderBottom": 0, 26 | "borderLeft": 0, 27 | "borderRight": 0, 28 | "subMetas": {} 29 | } 30 | } 31 | } -------------------------------------------------------------------------------- /assets/resources/texture/image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sinmere/cocos-creator-shader-assembler/4fe71ae9b6745bb1a1302fb973165bc4dedeffbc/assets/resources/texture/image.jpg -------------------------------------------------------------------------------- /assets/resources/texture/image.jpg.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "2.2.0", 3 | "uuid": "01f61879-27e2-4e7d-b3bb-aa2f700fe25d", 4 | "type": "sprite", 5 | "wrapMode": "clamp", 6 | "filterMode": "bilinear", 7 | "premultiplyAlpha": false, 8 | "subMetas": { 9 | "image": { 10 | "ver": "1.0.3", 11 | "uuid": "0509c5be-e2c4-44a1-ab71-f3eca3829e71", 12 | "rawTextureUuid": "01f61879-27e2-4e7d-b3bb-aa2f700fe25d", 13 | "trimType": "auto", 14 | "trimThreshold": 1, 15 | "rotated": false, 16 | "offsetX": 0, 17 | "offsetY": 0, 18 | "trimX": 0, 19 | "trimY": 0, 20 | "width": 960, 21 | "height": 600, 22 | "rawWidth": 960, 23 | "rawHeight": 600, 24 | "borderTop": 0, 25 | "borderBottom": 0, 26 | "borderLeft": 0, 27 | "borderRight": 0, 28 | "subMetas": {} 29 | } 30 | } 31 | } -------------------------------------------------------------------------------- /assets/resources/texture/image2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sinmere/cocos-creator-shader-assembler/4fe71ae9b6745bb1a1302fb973165bc4dedeffbc/assets/resources/texture/image2.png -------------------------------------------------------------------------------- /assets/resources/texture/image2.png.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "2.2.0", 3 | "uuid": "5ff1f678-1ed4-4a80-9e12-5de73373cf14", 4 | "type": "sprite", 5 | "wrapMode": "clamp", 6 | "filterMode": "bilinear", 7 | "premultiplyAlpha": false, 8 | "subMetas": { 9 | "image2": { 10 | "ver": "1.0.3", 11 | "uuid": "7df2361b-5ddc-40f5-b01e-c8f8d5bd1afe", 12 | "rawTextureUuid": "5ff1f678-1ed4-4a80-9e12-5de73373cf14", 13 | "trimType": "auto", 14 | "trimThreshold": 1, 15 | "rotated": false, 16 | "offsetX": -11.5, 17 | "offsetY": -4, 18 | "trimX": 327, 19 | "trimY": 230, 20 | "width": 73, 21 | "height": 298, 22 | "rawWidth": 750, 23 | "rawHeight": 750, 24 | "borderTop": 0, 25 | "borderBottom": 0, 26 | "borderLeft": 0, 27 | "borderRight": 0, 28 | "subMetas": {} 29 | } 30 | } 31 | } -------------------------------------------------------------------------------- /assets/scene.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.1", 3 | "uuid": "29f52784-2fca-467b-92e7-8fd9ef8c57b7", 4 | "isGroup": false, 5 | "subMetas": {} 6 | } -------------------------------------------------------------------------------- /assets/scene/test-frag-file-noshadertoy.fire: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "__type__": "cc.SceneAsset", 4 | "_name": "", 5 | "_objFlags": 0, 6 | "_native": "", 7 | "scene": { 8 | "__id__": 1 9 | } 10 | }, 11 | { 12 | "__type__": "cc.Scene", 13 | "_objFlags": 0, 14 | "_parent": null, 15 | "_children": [ 16 | { 17 | "__id__": 2 18 | } 19 | ], 20 | "_active": true, 21 | "_level": 0, 22 | "_components": [], 23 | "_prefab": null, 24 | "_opacity": 255, 25 | "_color": { 26 | "__type__": "cc.Color", 27 | "r": 255, 28 | "g": 255, 29 | "b": 255, 30 | "a": 255 31 | }, 32 | "_contentSize": { 33 | "__type__": "cc.Size", 34 | "width": 0, 35 | "height": 0 36 | }, 37 | "_anchorPoint": { 38 | "__type__": "cc.Vec2", 39 | "x": 0, 40 | "y": 0 41 | }, 42 | "_scale": { 43 | "__type__": "cc.Vec3", 44 | "x": 0.4578450520833333, 45 | "y": 0.4578450520833333, 46 | "z": 1 47 | }, 48 | "_quat": { 49 | "__type__": "cc.Quat", 50 | "x": 0, 51 | "y": 0, 52 | "z": 0, 53 | "w": 1 54 | }, 55 | "_zIndex": 0, 56 | "groupIndex": 0, 57 | "autoReleaseAssets": false, 58 | "_id": "46ac96b4-7284-4df8-9316-55fee1d8ce90" 59 | }, 60 | { 61 | "__type__": "cc.Node", 62 | "_name": "Canvas", 63 | "_objFlags": 0, 64 | "_parent": { 65 | "__id__": 1 66 | }, 67 | "_children": [ 68 | { 69 | "__id__": 3 70 | }, 71 | { 72 | "__id__": 5 73 | }, 74 | { 75 | "__id__": 8 76 | } 77 | ], 78 | "_active": true, 79 | "_level": 0, 80 | "_components": [ 81 | { 82 | "__id__": 10 83 | } 84 | ], 85 | "_prefab": null, 86 | "_opacity": 255, 87 | "_color": { 88 | "__type__": "cc.Color", 89 | "r": 255, 90 | "g": 255, 91 | "b": 255, 92 | "a": 255 93 | }, 94 | "_contentSize": { 95 | "__type__": "cc.Size", 96 | "width": 960, 97 | "height": 640 98 | }, 99 | "_anchorPoint": { 100 | "__type__": "cc.Vec2", 101 | "x": 0.5, 102 | "y": 0.5 103 | }, 104 | "_position": { 105 | "__type__": "cc.Vec3", 106 | "x": 480, 107 | "y": 320, 108 | "z": 0 109 | }, 110 | "_scale": { 111 | "__type__": "cc.Vec3", 112 | "x": 1, 113 | "y": 1, 114 | "z": 1 115 | }, 116 | "_rotationX": 0, 117 | "_rotationY": 0, 118 | "_quat": { 119 | "__type__": "cc.Quat", 120 | "x": 0, 121 | "y": 0, 122 | "z": 0, 123 | "w": 1 124 | }, 125 | "_skewX": 0, 126 | "_skewY": 0, 127 | "_zIndex": 0, 128 | "groupIndex": 0, 129 | "_id": "f3iyGcLZ9DO5NAJCVbWYWr" 130 | }, 131 | { 132 | "__type__": "cc.Node", 133 | "_name": "Main Camera", 134 | "_objFlags": 0, 135 | "_parent": { 136 | "__id__": 2 137 | }, 138 | "_children": [], 139 | "_active": true, 140 | "_level": 1, 141 | "_components": [ 142 | { 143 | "__id__": 4 144 | } 145 | ], 146 | "_prefab": null, 147 | "_opacity": 255, 148 | "_color": { 149 | "__type__": "cc.Color", 150 | "r": 255, 151 | "g": 255, 152 | "b": 255, 153 | "a": 255 154 | }, 155 | "_contentSize": { 156 | "__type__": "cc.Size", 157 | "width": 0, 158 | "height": 0 159 | }, 160 | "_anchorPoint": { 161 | "__type__": "cc.Vec2", 162 | "x": 0.5, 163 | "y": 0.5 164 | }, 165 | "_position": { 166 | "__type__": "cc.Vec3", 167 | "x": 0, 168 | "y": 0, 169 | "z": 0 170 | }, 171 | "_scale": { 172 | "__type__": "cc.Vec3", 173 | "x": 1, 174 | "y": 1, 175 | "z": 1 176 | }, 177 | "_rotationX": 0, 178 | "_rotationY": 0, 179 | "_quat": { 180 | "__type__": "cc.Quat", 181 | "x": 0, 182 | "y": 0, 183 | "z": 0, 184 | "w": 1 185 | }, 186 | "_skewX": 0, 187 | "_skewY": 0, 188 | "_zIndex": 0, 189 | "groupIndex": 0, 190 | "_id": "a4NwJt4xVERKKFyCfuRjo7" 191 | }, 192 | { 193 | "__type__": "cc.Camera", 194 | "_name": "", 195 | "_objFlags": 0, 196 | "node": { 197 | "__id__": 3 198 | }, 199 | "_enabled": true, 200 | "_cullingMask": 4294967295, 201 | "_clearFlags": 7, 202 | "_backgroundColor": { 203 | "__type__": "cc.Color", 204 | "r": 0, 205 | "g": 0, 206 | "b": 0, 207 | "a": 255 208 | }, 209 | "_depth": -1, 210 | "_zoomRatio": 1, 211 | "_targetTexture": null, 212 | "_id": "ccpgcDHXZFlp/ryNGFIqja" 213 | }, 214 | { 215 | "__type__": "cc.Node", 216 | "_name": "New Sprite(Splash)", 217 | "_objFlags": 0, 218 | "_parent": { 219 | "__id__": 2 220 | }, 221 | "_children": [], 222 | "_active": true, 223 | "_level": 1, 224 | "_components": [ 225 | { 226 | "__id__": 6 227 | }, 228 | { 229 | "__id__": 7 230 | } 231 | ], 232 | "_prefab": null, 233 | "_opacity": 255, 234 | "_color": { 235 | "__type__": "cc.Color", 236 | "r": 255, 237 | "g": 255, 238 | "b": 255, 239 | "a": 255 240 | }, 241 | "_contentSize": { 242 | "__type__": "cc.Size", 243 | "width": 400, 244 | "height": 400 245 | }, 246 | "_anchorPoint": { 247 | "__type__": "cc.Vec2", 248 | "x": 0.5, 249 | "y": 0.5 250 | }, 251 | "_position": { 252 | "__type__": "cc.Vec3", 253 | "x": 0, 254 | "y": 0, 255 | "z": 0 256 | }, 257 | "_scale": { 258 | "__type__": "cc.Vec3", 259 | "x": 1, 260 | "y": 1, 261 | "z": 1 262 | }, 263 | "_rotationX": 0, 264 | "_rotationY": 0, 265 | "_quat": { 266 | "__type__": "cc.Quat", 267 | "x": 0, 268 | "y": 0, 269 | "z": 0, 270 | "w": 1 271 | }, 272 | "_skewX": 0, 273 | "_skewY": 0, 274 | "_zIndex": 0, 275 | "groupIndex": 0, 276 | "_id": "19k/1uYoVIEoxO1Scmp3IN" 277 | }, 278 | { 279 | "__type__": "cc.Sprite", 280 | "_name": "", 281 | "_objFlags": 0, 282 | "node": { 283 | "__id__": 5 284 | }, 285 | "_enabled": true, 286 | "_srcBlendFactor": 770, 287 | "_dstBlendFactor": 771, 288 | "_spriteFrame": { 289 | "__uuid__": "a23235d1-15db-4b95-8439-a2e005bfff91" 290 | }, 291 | "_type": 0, 292 | "_sizeMode": 0, 293 | "_fillType": 0, 294 | "_fillCenter": { 295 | "__type__": "cc.Vec2", 296 | "x": 0, 297 | "y": 0 298 | }, 299 | "_fillStart": 0, 300 | "_fillRange": 0, 301 | "_isTrimmedMode": true, 302 | "_state": 0, 303 | "_atlas": null, 304 | "_id": "71wQPSKxtIsLVBwI0O5nUI" 305 | }, 306 | { 307 | "__type__": "7aa07gKym1LcJwvR6A6H+S5", 308 | "_name": "", 309 | "_objFlags": 0, 310 | "node": { 311 | "__id__": 5 312 | }, 313 | "_enabled": true, 314 | "_id": "d4jvpAm15E8JCszosMULYV" 315 | }, 316 | { 317 | "__type__": "cc.Node", 318 | "_name": "Test3_Frag_Shader", 319 | "_objFlags": 0, 320 | "_parent": { 321 | "__id__": 2 322 | }, 323 | "_children": [], 324 | "_active": true, 325 | "_level": 1, 326 | "_components": [ 327 | { 328 | "__id__": 9 329 | } 330 | ], 331 | "_prefab": null, 332 | "_opacity": 255, 333 | "_color": { 334 | "__type__": "cc.Color", 335 | "r": 255, 336 | "g": 255, 337 | "b": 255, 338 | "a": 255 339 | }, 340 | "_contentSize": { 341 | "__type__": "cc.Size", 342 | "width": 0, 343 | "height": 0 344 | }, 345 | "_anchorPoint": { 346 | "__type__": "cc.Vec2", 347 | "x": 0.5, 348 | "y": 0.5 349 | }, 350 | "_position": { 351 | "__type__": "cc.Vec3", 352 | "x": 0, 353 | "y": 0, 354 | "z": 0 355 | }, 356 | "_scale": { 357 | "__type__": "cc.Vec3", 358 | "x": 1, 359 | "y": 1, 360 | "z": 1 361 | }, 362 | "_rotationX": 0, 363 | "_rotationY": 0, 364 | "_quat": { 365 | "__type__": "cc.Quat", 366 | "x": 0, 367 | "y": 0, 368 | "z": 0, 369 | "w": 1 370 | }, 371 | "_skewX": 0, 372 | "_skewY": 0, 373 | "_zIndex": 0, 374 | "groupIndex": 0, 375 | "_id": "a2xIVfIylLhLb9bVZ5HmCB" 376 | }, 377 | { 378 | "__type__": "975c8jnx05FhJxvfj7TAgKr", 379 | "_name": "", 380 | "_objFlags": 0, 381 | "node": { 382 | "__id__": 8 383 | }, 384 | "_enabled": true, 385 | "sprite": { 386 | "__id__": 6 387 | }, 388 | "_id": "22CeOWSZVMJKdWJr7PkYIV" 389 | }, 390 | { 391 | "__type__": "cc.Canvas", 392 | "_name": "", 393 | "_objFlags": 0, 394 | "node": { 395 | "__id__": 2 396 | }, 397 | "_enabled": true, 398 | "_designResolution": { 399 | "__type__": "cc.Size", 400 | "width": 960, 401 | "height": 640 402 | }, 403 | "_fitWidth": false, 404 | "_fitHeight": true, 405 | "_id": "2a8/zuEQVA6pkzYVRdwEHo" 406 | } 407 | ] -------------------------------------------------------------------------------- /assets/scene/test-frag-file-noshadertoy.fire.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.0", 3 | "uuid": "46ac96b4-7284-4df8-9316-55fee1d8ce90", 4 | "asyncLoadAssets": false, 5 | "autoReleaseAssets": false, 6 | "subMetas": {} 7 | } -------------------------------------------------------------------------------- /assets/scene/test-frag-file-shadertoy.fire: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "__type__": "cc.SceneAsset", 4 | "_name": "", 5 | "_objFlags": 0, 6 | "_native": "", 7 | "scene": { 8 | "__id__": 1 9 | } 10 | }, 11 | { 12 | "__type__": "cc.Scene", 13 | "_objFlags": 0, 14 | "_parent": null, 15 | "_children": [ 16 | { 17 | "__id__": 2 18 | } 19 | ], 20 | "_active": true, 21 | "_level": 0, 22 | "_components": [], 23 | "_prefab": null, 24 | "_opacity": 255, 25 | "_color": { 26 | "__type__": "cc.Color", 27 | "r": 255, 28 | "g": 255, 29 | "b": 255, 30 | "a": 255 31 | }, 32 | "_contentSize": { 33 | "__type__": "cc.Size", 34 | "width": 0, 35 | "height": 0 36 | }, 37 | "_anchorPoint": { 38 | "__type__": "cc.Vec2", 39 | "x": 0, 40 | "y": 0 41 | }, 42 | "_scale": { 43 | "__type__": "cc.Vec3", 44 | "x": 0.4578450520833333, 45 | "y": 0.4578450520833333, 46 | "z": 1 47 | }, 48 | "_quat": { 49 | "__type__": "cc.Quat", 50 | "x": 0, 51 | "y": 0, 52 | "z": 0, 53 | "w": 1 54 | }, 55 | "_zIndex": 0, 56 | "groupIndex": 0, 57 | "autoReleaseAssets": false, 58 | "_id": "a101b5db-06ca-43b3-888a-78c428d64702" 59 | }, 60 | { 61 | "__type__": "cc.Node", 62 | "_name": "Canvas", 63 | "_objFlags": 0, 64 | "_parent": { 65 | "__id__": 1 66 | }, 67 | "_children": [ 68 | { 69 | "__id__": 3 70 | }, 71 | { 72 | "__id__": 5 73 | }, 74 | { 75 | "__id__": 8 76 | } 77 | ], 78 | "_active": true, 79 | "_level": 0, 80 | "_components": [ 81 | { 82 | "__id__": 10 83 | } 84 | ], 85 | "_prefab": null, 86 | "_opacity": 255, 87 | "_color": { 88 | "__type__": "cc.Color", 89 | "r": 255, 90 | "g": 255, 91 | "b": 255, 92 | "a": 255 93 | }, 94 | "_contentSize": { 95 | "__type__": "cc.Size", 96 | "width": 960, 97 | "height": 640 98 | }, 99 | "_anchorPoint": { 100 | "__type__": "cc.Vec2", 101 | "x": 0.5, 102 | "y": 0.5 103 | }, 104 | "_position": { 105 | "__type__": "cc.Vec3", 106 | "x": 480, 107 | "y": 320, 108 | "z": 0 109 | }, 110 | "_scale": { 111 | "__type__": "cc.Vec3", 112 | "x": 1, 113 | "y": 1, 114 | "z": 1 115 | }, 116 | "_rotationX": 0, 117 | "_rotationY": 0, 118 | "_quat": { 119 | "__type__": "cc.Quat", 120 | "x": 0, 121 | "y": 0, 122 | "z": 0, 123 | "w": 1 124 | }, 125 | "_skewX": 0, 126 | "_skewY": 0, 127 | "_zIndex": 0, 128 | "groupIndex": 0, 129 | "_id": "28mzvnYStAd4McweMd1sox" 130 | }, 131 | { 132 | "__type__": "cc.Node", 133 | "_name": "Main Camera", 134 | "_objFlags": 0, 135 | "_parent": { 136 | "__id__": 2 137 | }, 138 | "_children": [], 139 | "_active": true, 140 | "_level": 1, 141 | "_components": [ 142 | { 143 | "__id__": 4 144 | } 145 | ], 146 | "_prefab": null, 147 | "_opacity": 255, 148 | "_color": { 149 | "__type__": "cc.Color", 150 | "r": 255, 151 | "g": 255, 152 | "b": 255, 153 | "a": 255 154 | }, 155 | "_contentSize": { 156 | "__type__": "cc.Size", 157 | "width": 0, 158 | "height": 0 159 | }, 160 | "_anchorPoint": { 161 | "__type__": "cc.Vec2", 162 | "x": 0.5, 163 | "y": 0.5 164 | }, 165 | "_position": { 166 | "__type__": "cc.Vec3", 167 | "x": 0, 168 | "y": 0, 169 | "z": 0 170 | }, 171 | "_scale": { 172 | "__type__": "cc.Vec3", 173 | "x": 1, 174 | "y": 1, 175 | "z": 1 176 | }, 177 | "_rotationX": 0, 178 | "_rotationY": 0, 179 | "_quat": { 180 | "__type__": "cc.Quat", 181 | "x": 0, 182 | "y": 0, 183 | "z": 0, 184 | "w": 1 185 | }, 186 | "_skewX": 0, 187 | "_skewY": 0, 188 | "_zIndex": 0, 189 | "groupIndex": 0, 190 | "_id": "dfeHAQPp5CKrRFJz3bIm0K" 191 | }, 192 | { 193 | "__type__": "cc.Camera", 194 | "_name": "", 195 | "_objFlags": 0, 196 | "node": { 197 | "__id__": 3 198 | }, 199 | "_enabled": true, 200 | "_cullingMask": 4294967295, 201 | "_clearFlags": 7, 202 | "_backgroundColor": { 203 | "__type__": "cc.Color", 204 | "r": 0, 205 | "g": 0, 206 | "b": 0, 207 | "a": 255 208 | }, 209 | "_depth": -1, 210 | "_zoomRatio": 1, 211 | "_targetTexture": null, 212 | "_id": "4b7JnMrxZNnYTmUlrLbTb0" 213 | }, 214 | { 215 | "__type__": "cc.Node", 216 | "_name": "New Sprite(Splash)", 217 | "_objFlags": 0, 218 | "_parent": { 219 | "__id__": 2 220 | }, 221 | "_children": [], 222 | "_active": true, 223 | "_level": 1, 224 | "_components": [ 225 | { 226 | "__id__": 6 227 | }, 228 | { 229 | "__id__": 7 230 | } 231 | ], 232 | "_prefab": null, 233 | "_opacity": 255, 234 | "_color": { 235 | "__type__": "cc.Color", 236 | "r": 255, 237 | "g": 255, 238 | "b": 255, 239 | "a": 255 240 | }, 241 | "_contentSize": { 242 | "__type__": "cc.Size", 243 | "width": 960, 244 | "height": 640 245 | }, 246 | "_anchorPoint": { 247 | "__type__": "cc.Vec2", 248 | "x": 0.5, 249 | "y": 0.5 250 | }, 251 | "_position": { 252 | "__type__": "cc.Vec3", 253 | "x": 0, 254 | "y": 0, 255 | "z": 0 256 | }, 257 | "_scale": { 258 | "__type__": "cc.Vec3", 259 | "x": 1, 260 | "y": 1, 261 | "z": 1 262 | }, 263 | "_rotationX": 0, 264 | "_rotationY": 0, 265 | "_quat": { 266 | "__type__": "cc.Quat", 267 | "x": 0, 268 | "y": 0, 269 | "z": 0, 270 | "w": 1 271 | }, 272 | "_skewX": 0, 273 | "_skewY": 0, 274 | "_zIndex": 0, 275 | "groupIndex": 0, 276 | "_id": "7b/yAxTXVDe7fd344HCsO7" 277 | }, 278 | { 279 | "__type__": "cc.Sprite", 280 | "_name": "", 281 | "_objFlags": 0, 282 | "node": { 283 | "__id__": 5 284 | }, 285 | "_enabled": true, 286 | "_srcBlendFactor": 770, 287 | "_dstBlendFactor": 771, 288 | "_spriteFrame": { 289 | "__uuid__": "a23235d1-15db-4b95-8439-a2e005bfff91" 290 | }, 291 | "_type": 0, 292 | "_sizeMode": 0, 293 | "_fillType": 0, 294 | "_fillCenter": { 295 | "__type__": "cc.Vec2", 296 | "x": 0, 297 | "y": 0 298 | }, 299 | "_fillStart": 0, 300 | "_fillRange": 0, 301 | "_isTrimmedMode": true, 302 | "_state": 0, 303 | "_atlas": null, 304 | "_id": "91SNK3Fz1NsqS/7eMZU0vJ" 305 | }, 306 | { 307 | "__type__": "7aa07gKym1LcJwvR6A6H+S5", 308 | "_name": "", 309 | "_objFlags": 0, 310 | "node": { 311 | "__id__": 5 312 | }, 313 | "_enabled": true, 314 | "_id": "ff9x3wJLBKFp4whVUiwT0g" 315 | }, 316 | { 317 | "__type__": "cc.Node", 318 | "_name": "Test2_Frag_Shader_Toy", 319 | "_objFlags": 0, 320 | "_parent": { 321 | "__id__": 2 322 | }, 323 | "_children": [], 324 | "_active": true, 325 | "_level": 1, 326 | "_components": [ 327 | { 328 | "__id__": 9 329 | } 330 | ], 331 | "_prefab": null, 332 | "_opacity": 255, 333 | "_color": { 334 | "__type__": "cc.Color", 335 | "r": 255, 336 | "g": 255, 337 | "b": 255, 338 | "a": 255 339 | }, 340 | "_contentSize": { 341 | "__type__": "cc.Size", 342 | "width": 0, 343 | "height": 0 344 | }, 345 | "_anchorPoint": { 346 | "__type__": "cc.Vec2", 347 | "x": 0.5, 348 | "y": 0.5 349 | }, 350 | "_position": { 351 | "__type__": "cc.Vec3", 352 | "x": 0, 353 | "y": 0, 354 | "z": 0 355 | }, 356 | "_scale": { 357 | "__type__": "cc.Vec3", 358 | "x": 1, 359 | "y": 1, 360 | "z": 1 361 | }, 362 | "_rotationX": 0, 363 | "_rotationY": 0, 364 | "_quat": { 365 | "__type__": "cc.Quat", 366 | "x": 0, 367 | "y": 0, 368 | "z": 0, 369 | "w": 1 370 | }, 371 | "_skewX": 0, 372 | "_skewY": 0, 373 | "_zIndex": 0, 374 | "groupIndex": 0, 375 | "_id": "6asYnmt/VJ/pemm+t2LXEu" 376 | }, 377 | { 378 | "__type__": "f17ben0DmpC6aBaF1tW6qnA", 379 | "_name": "", 380 | "_objFlags": 0, 381 | "node": { 382 | "__id__": 8 383 | }, 384 | "_enabled": true, 385 | "sprite": { 386 | "__id__": 6 387 | }, 388 | "_id": "ferNJq8NVCFaWXC0epNLNP" 389 | }, 390 | { 391 | "__type__": "cc.Canvas", 392 | "_name": "", 393 | "_objFlags": 0, 394 | "node": { 395 | "__id__": 2 396 | }, 397 | "_enabled": true, 398 | "_designResolution": { 399 | "__type__": "cc.Size", 400 | "width": 960, 401 | "height": 640 402 | }, 403 | "_fitWidth": false, 404 | "_fitHeight": true, 405 | "_id": "58qibDbyFLhpVz2mhM4mPr" 406 | } 407 | ] -------------------------------------------------------------------------------- /assets/scene/test-frag-file-shadertoy.fire.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.0", 3 | "uuid": "a101b5db-06ca-43b3-888a-78c428d64702", 4 | "asyncLoadAssets": false, 5 | "autoReleaseAssets": false, 6 | "subMetas": {} 7 | } -------------------------------------------------------------------------------- /assets/scene/test-single-file.fire: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "__type__": "cc.SceneAsset", 4 | "_name": "", 5 | "_objFlags": 0, 6 | "_native": "", 7 | "scene": { 8 | "__id__": 1 9 | } 10 | }, 11 | { 12 | "__type__": "cc.Scene", 13 | "_objFlags": 0, 14 | "_parent": null, 15 | "_children": [ 16 | { 17 | "__id__": 2 18 | } 19 | ], 20 | "_active": true, 21 | "_level": 0, 22 | "_components": [], 23 | "_prefab": null, 24 | "_opacity": 255, 25 | "_color": { 26 | "__type__": "cc.Color", 27 | "r": 255, 28 | "g": 255, 29 | "b": 255, 30 | "a": 255 31 | }, 32 | "_contentSize": { 33 | "__type__": "cc.Size", 34 | "width": 0, 35 | "height": 0 36 | }, 37 | "_anchorPoint": { 38 | "__type__": "cc.Vec2", 39 | "x": 0, 40 | "y": 0 41 | }, 42 | "_scale": { 43 | "__type__": "cc.Vec3", 44 | "x": 0.5813232421875, 45 | "y": 0.5813232421875, 46 | "z": 1 47 | }, 48 | "_quat": { 49 | "__type__": "cc.Quat", 50 | "x": 0, 51 | "y": 0, 52 | "z": 0, 53 | "w": 1 54 | }, 55 | "_zIndex": 0, 56 | "groupIndex": 0, 57 | "autoReleaseAssets": false, 58 | "_id": "6a7c36ac-d403-46c3-9d92-7b9495406d94" 59 | }, 60 | { 61 | "__type__": "cc.Node", 62 | "_name": "Canvas", 63 | "_objFlags": 0, 64 | "_parent": { 65 | "__id__": 1 66 | }, 67 | "_children": [ 68 | { 69 | "__id__": 3 70 | }, 71 | { 72 | "__id__": 5 73 | }, 74 | { 75 | "__id__": 8 76 | } 77 | ], 78 | "_active": true, 79 | "_level": 1, 80 | "_components": [ 81 | { 82 | "__id__": 10 83 | } 84 | ], 85 | "_prefab": null, 86 | "_opacity": 255, 87 | "_color": { 88 | "__type__": "cc.Color", 89 | "r": 255, 90 | "g": 255, 91 | "b": 255, 92 | "a": 255 93 | }, 94 | "_contentSize": { 95 | "__type__": "cc.Size", 96 | "width": 960, 97 | "height": 640 98 | }, 99 | "_anchorPoint": { 100 | "__type__": "cc.Vec2", 101 | "x": 0.5, 102 | "y": 0.5 103 | }, 104 | "_position": { 105 | "__type__": "cc.Vec3", 106 | "x": 480, 107 | "y": 320, 108 | "z": 0 109 | }, 110 | "_scale": { 111 | "__type__": "cc.Vec3", 112 | "x": 1, 113 | "y": 1, 114 | "z": 1 115 | }, 116 | "_rotationX": 0, 117 | "_rotationY": 0, 118 | "_quat": { 119 | "__type__": "cc.Quat", 120 | "x": 0, 121 | "y": 0, 122 | "z": 0, 123 | "w": 1 124 | }, 125 | "_skewX": 0, 126 | "_skewY": 0, 127 | "_zIndex": 0, 128 | "groupIndex": 0, 129 | "_id": "6eMJrgzjpEgJDtU2RK1h0b" 130 | }, 131 | { 132 | "__type__": "cc.Node", 133 | "_name": "Main Camera", 134 | "_objFlags": 0, 135 | "_parent": { 136 | "__id__": 2 137 | }, 138 | "_children": [], 139 | "_active": true, 140 | "_level": 2, 141 | "_components": [ 142 | { 143 | "__id__": 4 144 | } 145 | ], 146 | "_prefab": null, 147 | "_opacity": 255, 148 | "_color": { 149 | "__type__": "cc.Color", 150 | "r": 255, 151 | "g": 255, 152 | "b": 255, 153 | "a": 255 154 | }, 155 | "_contentSize": { 156 | "__type__": "cc.Size", 157 | "width": 0, 158 | "height": 0 159 | }, 160 | "_anchorPoint": { 161 | "__type__": "cc.Vec2", 162 | "x": 0.5, 163 | "y": 0.5 164 | }, 165 | "_position": { 166 | "__type__": "cc.Vec3", 167 | "x": 0, 168 | "y": 0, 169 | "z": 0 170 | }, 171 | "_scale": { 172 | "__type__": "cc.Vec3", 173 | "x": 1, 174 | "y": 1, 175 | "z": 1 176 | }, 177 | "_rotationX": 0, 178 | "_rotationY": 0, 179 | "_quat": { 180 | "__type__": "cc.Quat", 181 | "x": 0, 182 | "y": 0, 183 | "z": 0, 184 | "w": 1 185 | }, 186 | "_skewX": 0, 187 | "_skewY": 0, 188 | "_zIndex": 0, 189 | "groupIndex": 0, 190 | "_id": "ecoJz+OGhEmJY1xXjVoG5Y" 191 | }, 192 | { 193 | "__type__": "cc.Camera", 194 | "_name": "", 195 | "_objFlags": 0, 196 | "node": { 197 | "__id__": 3 198 | }, 199 | "_enabled": true, 200 | "_cullingMask": 4294967295, 201 | "_clearFlags": 7, 202 | "_backgroundColor": { 203 | "__type__": "cc.Color", 204 | "r": 0, 205 | "g": 0, 206 | "b": 0, 207 | "a": 255 208 | }, 209 | "_depth": -1, 210 | "_zoomRatio": 1, 211 | "_targetTexture": null, 212 | "_id": "ebH0VKWE1NEJCUo2ZsImiD" 213 | }, 214 | { 215 | "__type__": "cc.Node", 216 | "_name": "image2", 217 | "_objFlags": 0, 218 | "_parent": { 219 | "__id__": 2 220 | }, 221 | "_children": [], 222 | "_active": true, 223 | "_level": 2, 224 | "_components": [ 225 | { 226 | "__id__": 6 227 | }, 228 | { 229 | "__id__": 7 230 | } 231 | ], 232 | "_prefab": null, 233 | "_opacity": 255, 234 | "_color": { 235 | "__type__": "cc.Color", 236 | "r": 255, 237 | "g": 255, 238 | "b": 255, 239 | "a": 255 240 | }, 241 | "_contentSize": { 242 | "__type__": "cc.Size", 243 | "width": 73, 244 | "height": 298 245 | }, 246 | "_anchorPoint": { 247 | "__type__": "cc.Vec2", 248 | "x": 0.5, 249 | "y": 0.5 250 | }, 251 | "_position": { 252 | "__type__": "cc.Vec3", 253 | "x": 0, 254 | "y": 0, 255 | "z": 0 256 | }, 257 | "_scale": { 258 | "__type__": "cc.Vec3", 259 | "x": 1, 260 | "y": 1, 261 | "z": 1 262 | }, 263 | "_rotationX": 0, 264 | "_rotationY": 0, 265 | "_quat": { 266 | "__type__": "cc.Quat", 267 | "x": 0, 268 | "y": 0, 269 | "z": 0, 270 | "w": 1 271 | }, 272 | "_skewX": 0, 273 | "_skewY": 0, 274 | "_zIndex": 0, 275 | "groupIndex": 0, 276 | "_id": "57/uq+HM9ByIsmzzkb4NQ+" 277 | }, 278 | { 279 | "__type__": "cc.Sprite", 280 | "_name": "", 281 | "_objFlags": 0, 282 | "node": { 283 | "__id__": 5 284 | }, 285 | "_enabled": true, 286 | "_srcBlendFactor": 770, 287 | "_dstBlendFactor": 771, 288 | "_spriteFrame": { 289 | "__uuid__": "7df2361b-5ddc-40f5-b01e-c8f8d5bd1afe" 290 | }, 291 | "_type": 0, 292 | "_sizeMode": 1, 293 | "_fillType": 0, 294 | "_fillCenter": { 295 | "__type__": "cc.Vec2", 296 | "x": 0, 297 | "y": 0 298 | }, 299 | "_fillStart": 0, 300 | "_fillRange": 0, 301 | "_isTrimmedMode": true, 302 | "_state": 0, 303 | "_atlas": null, 304 | "_id": "44rMbOgmFJ4YOwf0x747bA" 305 | }, 306 | { 307 | "__type__": "7aa07gKym1LcJwvR6A6H+S5", 308 | "_name": "", 309 | "_objFlags": 0, 310 | "node": { 311 | "__id__": 5 312 | }, 313 | "_enabled": true, 314 | "_id": "f5CZhmVHtFEr4ku6EYJFCL" 315 | }, 316 | { 317 | "__type__": "cc.Node", 318 | "_name": "Test1_SINGLE", 319 | "_objFlags": 0, 320 | "_parent": { 321 | "__id__": 2 322 | }, 323 | "_children": [], 324 | "_active": true, 325 | "_level": 2, 326 | "_components": [ 327 | { 328 | "__id__": 9 329 | } 330 | ], 331 | "_prefab": null, 332 | "_opacity": 255, 333 | "_color": { 334 | "__type__": "cc.Color", 335 | "r": 255, 336 | "g": 255, 337 | "b": 255, 338 | "a": 255 339 | }, 340 | "_contentSize": { 341 | "__type__": "cc.Size", 342 | "width": 0, 343 | "height": 0 344 | }, 345 | "_anchorPoint": { 346 | "__type__": "cc.Vec2", 347 | "x": 0.5, 348 | "y": 0.5 349 | }, 350 | "_position": { 351 | "__type__": "cc.Vec3", 352 | "x": 0, 353 | "y": 0, 354 | "z": 0 355 | }, 356 | "_scale": { 357 | "__type__": "cc.Vec3", 358 | "x": 1, 359 | "y": 1, 360 | "z": 1 361 | }, 362 | "_rotationX": 0, 363 | "_rotationY": 0, 364 | "_quat": { 365 | "__type__": "cc.Quat", 366 | "x": 0, 367 | "y": 0, 368 | "z": 0, 369 | "w": 1 370 | }, 371 | "_skewX": 0, 372 | "_skewY": 0, 373 | "_zIndex": 0, 374 | "groupIndex": 0, 375 | "_id": "44Oe64O81Ac7avtB03kx38" 376 | }, 377 | { 378 | "__type__": "aa7d7biYvhJ1r6jUEL/E6A/", 379 | "_name": "", 380 | "_objFlags": 0, 381 | "node": { 382 | "__id__": 8 383 | }, 384 | "_enabled": true, 385 | "sprite": { 386 | "__id__": 6 387 | }, 388 | "_id": "6833EMx7FL66SjtgVWc0rN" 389 | }, 390 | { 391 | "__type__": "cc.Canvas", 392 | "_name": "", 393 | "_objFlags": 0, 394 | "node": { 395 | "__id__": 2 396 | }, 397 | "_enabled": true, 398 | "_designResolution": { 399 | "__type__": "cc.Size", 400 | "width": 960, 401 | "height": 640 402 | }, 403 | "_fitWidth": false, 404 | "_fitHeight": true, 405 | "_id": "e7oi/QUYRChIWQRlHFbiLu" 406 | } 407 | ] -------------------------------------------------------------------------------- /assets/scene/test-single-file.fire.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.0", 3 | "uuid": "6a7c36ac-d403-46c3-9d92-7b9495406d94", 4 | "asyncLoadAssets": false, 5 | "autoReleaseAssets": false, 6 | "subMetas": {} 7 | } -------------------------------------------------------------------------------- /assets/scripts.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.1", 3 | "uuid": "4734c20c-0db8-4eb2-92ea-e692f4d70934", 4 | "isGroup": false, 5 | "subMetas": {} 6 | } -------------------------------------------------------------------------------- /assets/scripts/CustomMaterial.ts: -------------------------------------------------------------------------------- 1 | const renderEngine = cc.renderer.renderEngine; 2 | const renderer = renderEngine.renderer; 3 | const gfx = renderEngine.gfx; 4 | const Material = renderEngine.Material; 5 | 6 | export default class CustomMaterial extends Material { 7 | 8 | _color = null; 9 | _effect = null; 10 | _mainTech = null; 11 | _texture = null; 12 | 13 | _shaderName = ''; 14 | _params = null; 15 | _defines = ''; 16 | 17 | constructor(shaderName, params, defines, presist = false) { 18 | super(presist) 19 | 20 | this._shaderName = shaderName; 21 | this._params = params; 22 | this._defines = defines; 23 | 24 | var pass = new renderer.Pass(shaderName); 25 | pass.setDepth(false, false); 26 | pass.setCullMode(gfx.CULL_NONE); 27 | pass.setBlend( 28 | gfx.BLEND_FUNC_ADD, 29 | gfx.BLEND_SRC_ALPHA, gfx.BLEND_ONE_MINUS_SRC_ALPHA, 30 | gfx.BLEND_FUNC_ADD, 31 | gfx.BLEND_SRC_ALPHA, gfx.BLEND_ONE_MINUS_SRC_ALPHA 32 | ); 33 | 34 | // var Technique = function Technique(stages, parameters, passes, layer) 35 | // 1.stages参数用来设置_stageIDs 引擎中都是transparent 具体意义不明待解答 36 | // 2.parameters sprite必带 textrue color 37 | // 3 pass 上面的标准来 单pass 38 | // 4.lay无用 39 | var techParams = [ 40 | { name: 'texture', type: renderer.PARAM_TEXTURE_2D }, 41 | { name: 'color', type: renderer.PARAM_COLOR4 } 42 | ]; 43 | if (params) { 44 | techParams = techParams.concat(params); 45 | } 46 | var mainTech = new renderer.Technique( 47 | ['transparent'], 48 | techParams, 49 | [ 50 | pass 51 | ] 52 | ); 53 | 54 | console.log(mainTech); 55 | 56 | // color初始白 标配 57 | this._color = { r: 1, g: 1, b: 1, a: 1 }; 58 | 59 | // SpriteMaterial Define 模板 60 | // defines = [ 61 | // { name: 'useTexture', value: true }, 62 | // { name: 'useModel', value: false }, 63 | // { name: 'alphaTest', value: false }, 64 | // { name: 'use2DPos', value: true }, 65 | // { name: 'useColor', value: true } 66 | // ]; 67 | 68 | // Effect 69 | this._effect = new renderer.Effect( 70 | [ 71 | mainTech], 72 | { 73 | 'color': this._color 74 | }, 75 | defines 76 | ); 77 | 78 | this._mainTech = mainTech; 79 | this._texture = null; 80 | } 81 | 82 | 83 | get effect() { 84 | return this._effect; 85 | } 86 | 87 | get shaderName(){ 88 | return this._shaderName; 89 | } 90 | 91 | get texture() { 92 | return this._texture; 93 | } 94 | 95 | set texture(value) { 96 | if (this._texture !== value) { 97 | this._texture = value; 98 | this._effect.setProperty('texture', value.getImpl()); 99 | this._texIds['texture'] = value.getId(); 100 | } 101 | } 102 | 103 | get color() { 104 | return this._color; 105 | } 106 | 107 | set color(value) { 108 | var color = this._color; 109 | color.r = value.r / 255; 110 | color.g = value.g / 255; 111 | color.b = value.b / 255; 112 | color.a = value.a / 255; 113 | this._effect.setProperty('color', color); 114 | } 115 | 116 | clone() { 117 | var copy = new CustomMaterial(this._shaderName, this._params, this._defines); 118 | copy.texture = this.texture; 119 | copy.color = this.color; 120 | copy.updateHash(); 121 | return copy; 122 | }; 123 | 124 | // 设置自定义参数的值 125 | setParamValue(name, value) { 126 | // 等价于this._properties[name] = value; 127 | this._effect.setProperty(name, value); 128 | }; 129 | 130 | // 设置定义值 131 | setDefine(name, value) { 132 | this._effect.define(name, value); 133 | }; 134 | } 135 | 136 | 137 | 138 | 139 | -------------------------------------------------------------------------------- /assets/scripts/CustomMaterial.ts.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.5", 3 | "uuid": "e1b90feb-a217-4493-849d-9a611900d683", 4 | "isPlugin": false, 5 | "loadPluginInWeb": true, 6 | "loadPluginInNative": true, 7 | "loadPluginInEditor": false, 8 | "subMetas": {} 9 | } -------------------------------------------------------------------------------- /assets/scripts/Glowing.ts: -------------------------------------------------------------------------------- 1 | let shader = { 2 | name: "Glowing", 3 | 4 | defines: [], 5 | 6 | vert: `uniform mat4 viewProj; 7 | attribute vec3 a_position; 8 | attribute vec2 a_uv0; 9 | varying vec2 uv0; 10 | void main () { 11 | vec4 pos = viewProj * vec4(a_position, 1); 12 | gl_Position = pos; 13 | uv0 = a_uv0; 14 | } 15 | `, 16 | 17 | frag: `uniform sampler2D texture; 18 | uniform vec3 iResolution; 19 | uniform float iTime; 20 | uniform vec4 color; 21 | varying vec2 uv0; 22 | 23 | const float radius = 4.0; 24 | // const vec3 color = vec3(0.9, 0.9, 0.0); 25 | 26 | float coefficient() 27 | { 28 | float v = mod(iTime, 3.0); 29 | if(v > 1.5) 30 | v = 3.0 - v; 31 | return v; 32 | } 33 | 34 | void mainImage( out vec4 fragColor, in vec2 fragCoord ) 35 | { 36 | vec2 uv = fragCoord.xy; 37 | vec2 unit = 1.0 / iResolution.xy; 38 | vec4 texel = texture2D(texture, uv); 39 | vec4 finalColor = vec4(0.0); 40 | float density = 0.0; 41 | 42 | if(texel.a >= 1.0) 43 | { 44 | finalColor = texel; 45 | } 46 | else 47 | { 48 | for(int i = 0; i < int(radius); ++i) 49 | { 50 | density += texture2D(texture, vec2(uv.x + unit.x * float(i), uv.y + unit.y * float(i))).a; 51 | density += texture2D(texture, vec2(uv.x - unit.x * float(i), uv.y + unit.y * float(i))).a; 52 | density += texture2D(texture, vec2(uv.x - unit.x * float(i), uv.y - unit.y * float(i))).a; 53 | density += texture2D(texture, vec2(uv.x + unit.x * float(i), uv.y - unit.y * float(i))).a; 54 | } 55 | density = density / radius; 56 | finalColor = vec4(color.rgb * density, density); 57 | finalColor += vec4(texel.rgb * texel.a, texel.a); 58 | } 59 | fragColor = finalColor; 60 | } 61 | 62 | void main() 63 | { 64 | mainImage(gl_FragColor, uv0.xy); 65 | }`, 66 | } 67 | 68 | export default shader; -------------------------------------------------------------------------------- /assets/scripts/Glowing.ts.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.5", 3 | "uuid": "b6e0ebea-dd0d-4347-9aa8-718e8456e3dd", 4 | "isPlugin": false, 5 | "loadPluginInWeb": true, 6 | "loadPluginInNative": true, 7 | "loadPluginInEditor": false, 8 | "subMetas": {} 9 | } -------------------------------------------------------------------------------- /assets/scripts/ShaderAssembler.ts: -------------------------------------------------------------------------------- 1 | // Learn TypeScript: 2 | // - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/typescript.html 3 | // - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/typescript.html 4 | // Learn Attribute: 5 | // - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html 6 | // - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/reference/attributes.html 7 | // Learn life-cycle callbacks: 8 | // - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html 9 | // - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html 10 | 11 | const { ccclass, property } = cc._decorator; 12 | const renderEngine = cc.renderer.renderEngine; 13 | 14 | export const default_vert = ` 15 | 16 | #ifdef use2DPos 17 | attribute vec2 a_position; 18 | #else 19 | attribute vec3 a_position; 20 | #endif 21 | 22 | #ifdef useModel 23 | uniform mat4 model; 24 | #endif 25 | 26 | uniform mat4 viewProj; 27 | attribute mediump vec2 a_uv0; 28 | varying mediump vec2 uv0; 29 | 30 | void main () { 31 | mat4 mvp; 32 | #ifdef useModel 33 | mvp = viewProj * model; 34 | #else 35 | mvp = viewProj; 36 | #endif 37 | 38 | #ifdef use2DPos 39 | vec4 pos = mvp * vec4(a_position, 0, 1); 40 | #else 41 | vec4 pos = mvp * vec4(a_position, 1); 42 | #endif 43 | 44 | uv0 = a_uv0; 45 | gl_Position = pos; 46 | } 47 | `; 48 | 49 | 50 | export const default_frag_prefix = ` 51 | #define iChannel0 texture 52 | #define iGlobalTime iTime 53 | uniform sampler2D texture; 54 | varying mediump vec2 uv0; 55 | uniform lowp vec4 color; 56 | uniform float iTime; 57 | uniform vec3 iResolution; 58 | uniform vec4 iMouse; 59 | `; 60 | 61 | export const default_frag_postfix =` 62 | void main() 63 | { 64 | mainImage(gl_FragColor, gl_FragCoord.xy); 65 | } 66 | ` 67 | 68 | import ShaderFactory from './ShaderFactory'; 69 | import CustomMaterial from './CustomMaterial'; 70 | 71 | @ccclass 72 | export default class ShaderAssembler extends cc.Component { 73 | 74 | _materials = {}; 75 | 76 | _current_material = null; 77 | 78 | _sprite: cc.Sprite = null; 79 | 80 | 81 | 82 | // 灰度图 调用则清空shader效果 83 | state2Gray() { 84 | this._sprite.setState(cc.Sprite.State.GRAY); 85 | } 86 | 87 | // 灰度图 调用则清空shader效果 88 | state2Normal() { 89 | this._sprite.setState(cc.Sprite.State.NORMAL); 90 | } 91 | 92 | createCustomMaterial(name, params, define) { 93 | let custom_material = new CustomMaterial(name, params, define); 94 | this.setMaterial(name, custom_material); 95 | return custom_material; 96 | } 97 | 98 | get currentMaterial() { 99 | return this._current_material; 100 | } 101 | 102 | // 取自定义材质 103 | getMaterial(name) { 104 | if (this._materials) { 105 | return this._materials[name]; 106 | } else { 107 | return undefined; 108 | } 109 | } 110 | 111 | // 设置自定义材质 112 | setMaterial(name, mat) { 113 | if (!this._materials) { 114 | this._materials = {} 115 | } 116 | this._materials[name] = mat; 117 | this._current_material = mat; 118 | } 119 | 120 | // 删除节点上材质 121 | removeMaterial(name){ 122 | if(this._current_material.shaderName === name){ 123 | this.state2Normal(); 124 | delete this._materials[name]; 125 | this._current_material = null; 126 | }else{ 127 | delete this._materials[name]; 128 | } 129 | } 130 | 131 | activateCustomMaterial(sprite, material) { 132 | console.log(material) 133 | if (!(sprite instanceof cc.Sprite)) { 134 | return; 135 | } 136 | let spriteFrame = sprite.spriteFrame; 137 | // WebGL 138 | if (cc.game.renderType !== cc.game.RENDER_TYPE_CANVAS) { 139 | // Set texture 140 | if (spriteFrame && spriteFrame.textureLoaded()) { 141 | let texture = spriteFrame.getTexture(); 142 | if (material.texture !== texture) { 143 | material.texture = texture; 144 | sprite._updateMaterial(material); 145 | } 146 | else if (material !== sprite._material) { 147 | sprite._updateMaterial(material); 148 | } 149 | if (sprite._renderData) { 150 | sprite._renderData.material = material; 151 | } 152 | 153 | // 1 << 4 等价于 cc.RenderFlow.FLAG_COLOR 可解决ts强迫症小红点 154 | sprite.node._renderFlag |= cc.RenderFlow.FLAG_COLOR 155 | 156 | sprite.markForUpdateRenderData(true); 157 | sprite.markForRender(true); 158 | } 159 | else { 160 | sprite.disableRender(); 161 | } 162 | } 163 | else { 164 | sprite.markForUpdateRenderData(true); 165 | sprite.markForRender(true); 166 | } 167 | } 168 | 169 | registerShaderTemplate(shader) { 170 | ShaderFactory.addShader(shader); 171 | } 172 | 173 | registerFragShaderTemplate(name, vert, frag, define) { 174 | let shader = {} 175 | shader['name'] = name; 176 | shader['vert'] = vert; 177 | shader['frag'] = frag; 178 | shader['define'] = define; 179 | // shader 180 | ShaderFactory.addShader(shader); 181 | } 182 | } 183 | 184 | -------------------------------------------------------------------------------- /assets/scripts/ShaderAssembler.ts.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.5", 3 | "uuid": "7aa0780a-ca6d-4b70-9c2f-47a03a1fe4b9", 4 | "isPlugin": false, 5 | "loadPluginInWeb": true, 6 | "loadPluginInNative": true, 7 | "loadPluginInEditor": false, 8 | "subMetas": {} 9 | } -------------------------------------------------------------------------------- /assets/scripts/ShaderFactory.ts: -------------------------------------------------------------------------------- 1 | // Learn TypeScript: 2 | // - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/typescript.html 3 | // - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/typescript.html 4 | // Learn Attribute: 5 | // - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html 6 | // - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/reference/attributes.html 7 | // Learn life-cycle callbacks: 8 | // - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html 9 | // - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html 10 | var ShaderFactory = { 11 | _shaders: {}, 12 | 13 | // 增加一个新的Shader 14 | addShader: function (shader) { 15 | if (this._shaders[shader.name]) { 16 | // console.error("addShader - shader already exist: ", shader.name); 17 | return; 18 | } 19 | // 注册program _template 提供给Technique的pass使用 里面有2个默认模板 20 | if (cc.renderer._forward) { 21 | cc.renderer._forward._programLib.define(shader.name, shader.vert, shader.frag, shader.defines || []); 22 | this._shaders[shader.name] = shader; 23 | } else { 24 | //在微信上初始时cc.renderer._forward不存在，需要等引擎初始化完毕才能使用 25 | //其实没有__preload不用这层，没测试就加着了 26 | cc.game.once(cc.game.EVENT_ENGINE_INITED, function () { 27 | cc.renderer._forward._programLib.define(shader.name, shader.vert, shader.frag, shader.defines || []); 28 | this._shaders[shader.name] = shader; 29 | }); 30 | } 31 | }, 32 | 33 | // 取Shader的定义 34 | getShader: function (name) { 35 | return this._shaders[name]; 36 | } 37 | } 38 | 39 | export default ShaderFactory; 40 | -------------------------------------------------------------------------------- /assets/scripts/ShaderFactory.ts.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.5", 3 | "uuid": "c6b29134-f9f4-412d-ad1b-0057c5ee51ff", 4 | "isPlugin": false, 5 | "loadPluginInWeb": true, 6 | "loadPluginInNative": true, 7 | "loadPluginInEditor": false, 8 | "subMetas": {} 9 | } -------------------------------------------------------------------------------- /assets/scripts/Test1.ts: -------------------------------------------------------------------------------- 1 | // Learn TypeScript: 2 | // - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/typescript.html 3 | // - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/typescript.html 4 | // Learn Attribute: 5 | // - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html 6 | // - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/reference/attributes.html 7 | // Learn life-cycle callbacks: 8 | // - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html 9 | // - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html 10 | 11 | const {ccclass, property} = cc._decorator; 12 | const renderEngine = cc.renderer.renderEngine; 13 | const renderer = renderEngine.renderer; 14 | 15 | import ShaderAssembler, {default_vert} from './ShaderAssembler'; 16 | import Glowing from './Glowing'; 17 | 18 | @ccclass 19 | export default class Test extends cc.Component { 20 | 21 | @property(cc.Sprite) 22 | sprite: cc.Sprite = null; 23 | 24 | _start = 0; 25 | 26 | 27 | start () { 28 | console.log(default_vert); 29 | this._start = Date.now(); 30 | let shader_assembler = this.sprite.node.getComponent(ShaderAssembler); 31 | shader_assembler.registerShaderTemplate(Glowing); 32 | let mat = shader_assembler.createCustomMaterial( 33 | Glowing.name, 34 | [ 35 | {name: 'iResolution', type: renderer.PARAM_FLOAT3}, 36 | {name: 'iTime', type: renderer.PARAM_FLOAT}, 37 | ], 38 | [] 39 | ) 40 | var iResolution = new cc.Vec3( 41 | this.sprite.spriteFrame.getTexture().width, 42 | this.sprite.spriteFrame.getTexture().height, 43 | 0 44 | ); 45 | mat.color = new cc.Color().fromHEX("#1A7ADC") 46 | shader_assembler.activateCustomMaterial(this.sprite,mat) 47 | mat.setParamValue("iResolution", iResolution); 48 | } 49 | 50 | update() { 51 | const mat = this.sprite.node.getComponent(ShaderAssembler).currentMaterial; 52 | if (!mat) { 53 | return; 54 | } 55 | const now = Date.now(); 56 | const time = (now - this._start) / 1000; 57 | mat.setParamValue("iTime", time); 58 | 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /assets/scripts/Test1.ts.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.5", 3 | "uuid": "aa7d76e2-62f8-49d6-bea3-5042ff13a03f", 4 | "isPlugin": false, 5 | "loadPluginInWeb": true, 6 | "loadPluginInNative": true, 7 | "loadPluginInEditor": false, 8 | "subMetas": {} 9 | } -------------------------------------------------------------------------------- /assets/scripts/Test2.ts: -------------------------------------------------------------------------------- 1 | // Learn TypeScript: 2 | // - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/typescript.html 3 | // - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/typescript.html 4 | // Learn Attribute: 5 | // - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html 6 | // - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/reference/attributes.html 7 | // Learn life-cycle callbacks: 8 | // - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html 9 | // - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html 10 | 11 | const { ccclass, property } = cc._decorator; 12 | 13 | const renderEngine = cc.renderer.renderEngine; 14 | const renderer = renderEngine.renderer; 15 | 16 | import ShaderAssembler, { default_vert, default_frag_prefix, default_frag_postfix } from './ShaderAssembler'; 17 | 18 | 19 | @ccclass 20 | export default class Test extends cc.Component { 21 | 22 | @property(cc.Sprite) 23 | sprite: cc.Sprite = null; 24 | 25 | _start = 0; 26 | 27 | start() { 28 | this._start = Date.now(); 29 | var name = 'cloud2d'; 30 | 31 | var self = this; 32 | cc.loader.loadRes('shader/' + name, function (err, data) { 33 | // console.log(data.text); 34 | // console.log(default_vert); 35 | // console.log(default_frag_prefix + data.text + default_frag_postfix); 36 | let shader_assembler = self.sprite.node.getComponent(ShaderAssembler); 37 | shader_assembler.registerFragShaderTemplate( 38 | name, 39 | default_vert, 40 | default_frag_prefix + data.text + default_frag_postfix 41 | , 42 | [ 43 | { name: 'use2DPos' }, 44 | { name: 'useModel' }, 45 | ]); 46 | let mat = shader_assembler.createCustomMaterial( 47 | name, 48 | [ 49 | { name: 'iResolution', type: renderer.PARAM_FLOAT3 }, 50 | { name: 'iTime', type: renderer.PARAM_FLOAT }, 51 | ], 52 | [ 53 | { name: 'use2DPos', value: 'true' }, 54 | { name: 'useModel', value: 'false' } 55 | ] 56 | ) 57 | // var iResolution = new cc.Vec3( 58 | // self.sprite.spriteFrame.getTexture().width, 59 | // self.sprite.spriteFrame.getTexture().height, 60 | // 10 61 | // ); 62 | var iResolution = new cc.Vec3( 63 | self.sprite.node.width, 64 | self.sprite.node.height, 65 | 10 66 | ); 67 | console.log(iResolution); 68 | shader_assembler.activateCustomMaterial(self.sprite, mat) 69 | mat.setParamValue("iResolution", iResolution); 70 | }); 71 | } 72 | 73 | update() { 74 | const mat = this.sprite.node.getComponent(ShaderAssembler).currentMaterial; 75 | if (!mat) { 76 | return; 77 | } 78 | const now = Date.now(); 79 | const time = (now - this._start) / 1000; 80 | mat.setParamValue("iTime", time); 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /assets/scripts/Test2.ts.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.5", 3 | "uuid": "f17be9f4-0e6a-42e9-a05a-175b56eaa9c0", 4 | "isPlugin": false, 5 | "loadPluginInWeb": true, 6 | "loadPluginInNative": true, 7 | "loadPluginInEditor": false, 8 | "subMetas": {} 9 | } -------------------------------------------------------------------------------- /assets/scripts/Test3.ts: -------------------------------------------------------------------------------- 1 | // Learn TypeScript: 2 | // - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/typescript.html 3 | // - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/typescript.html 4 | // Learn Attribute: 5 | // - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html 6 | // - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/reference/attributes.html 7 | // Learn life-cycle callbacks: 8 | // - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html 9 | // - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html 10 | 11 | const { ccclass, property } = cc._decorator; 12 | 13 | const renderEngine = cc.renderer.renderEngine; 14 | const renderer = renderEngine.renderer; 15 | 16 | import ShaderAssembler, { default_vert, default_frag_prefix, default_frag_postfix } from './ShaderAssembler'; 17 | 18 | 19 | @ccclass 20 | export default class Test extends cc.Component { 21 | 22 | @property(cc.Sprite) 23 | sprite: cc.Sprite = null; 24 | 25 | _start = 0; 26 | 27 | start() { 28 | this._start = Date.now(); 29 | var name = 'lightcircle'; 30 | 31 | var self = this; 32 | cc.loader.loadRes('shader/' + name, function (err, data) { 33 | // console.log(data.text); 34 | let shader_assembler = self.sprite.node.getComponent(ShaderAssembler); 35 | shader_assembler.registerFragShaderTemplate( 36 | name, 37 | default_vert, 38 | `#define v_texCoord uv0 39 | `+default_frag_prefix + data.text 40 | , 41 | [ 42 | { name: 'use2DPos' }, 43 | { name: 'useModel' }, 44 | ]); 45 | let mat = shader_assembler.createCustomMaterial( 46 | name, 47 | [ 48 | { name: 'iResolution', type: renderer.PARAM_FLOAT3 }, 49 | { name: 'iTime', type: renderer.PARAM_FLOAT }, 50 | ], 51 | [ 52 | { name: 'use2DPos', value: 'true' }, 53 | { name: 'useModel', value: 'false' } 54 | ] 55 | ) 56 | // var iResolution = new cc.Vec3( 57 | // self.sprite.spriteFrame.getTexture().width, 58 | // self.sprite.spriteFrame.getTexture().height, 59 | // 10 60 | // ); 61 | var iResolution = new cc.Vec3( 62 | self.sprite.node.width, 63 | self.sprite.node.height, 64 | 10 65 | ); 66 | console.log(iResolution); 67 | shader_assembler.activateCustomMaterial(self.sprite, mat) 68 | mat.setParamValue("iResolution", iResolution); 69 | }); 70 | } 71 | 72 | update() { 73 | const mat = this.sprite.node.getComponent(ShaderAssembler).currentMaterial; 74 | if (!mat) { 75 | return; 76 | } 77 | const now = Date.now(); 78 | const time = (now - this._start) / 1000; 79 | mat.setParamValue("iTime", time); 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /assets/scripts/Test3.ts.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.5", 3 | "uuid": "975c88e7-c74e-4584-9c6f-7e3ed30202ab", 4 | "isPlugin": false, 5 | "loadPluginInWeb": true, 6 | "loadPluginInNative": true, 7 | "loadPluginInEditor": false, 8 | "subMetas": {} 9 | } -------------------------------------------------------------------------------- /assets/scripts/handler.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.1", 3 | "uuid": "66bc4317-cc8a-4063-bdc4-e9e0c78bb035", 4 | "isSubpackage": false, 5 | "subpackageName": "", 6 | "subMetas": {} 7 | } -------------------------------------------------------------------------------- /assets/scripts/handler/handler.ts: -------------------------------------------------------------------------------- 1 | export default class handler 2 | { 3 | private cb:Function; 4 | private host:any; 5 | private args:any[]; 6 | 7 | constructor(cb:Function, host = null, ...args) 8 | { 9 | this.cb = cb; 10 | this.host = host; 11 | this.args = args; 12 | } 13 | 14 | exec(...extras) 15 | { 16 | this.cb.apply(this.host, this.args.concat(extras)); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /assets/scripts/handler/handler.ts.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.5", 3 | "uuid": "f645834f-f1c2-4263-b19b-dfff22bcd018", 4 | "isPlugin": false, 5 | "loadPluginInWeb": true, 6 | "loadPluginInNative": true, 7 | "loadPluginInEditor": false, 8 | "subMetas": {} 9 | } -------------------------------------------------------------------------------- /assets/scripts/loader.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.1", 3 | "uuid": "699d06e9-61eb-44a5-b25a-ae368d9619dc", 4 | "isSubpackage": false, 5 | "subpackageName": "", 6 | "subMetas": {} 7 | } -------------------------------------------------------------------------------- /assets/scripts/loader/LoaderUtil.ts: -------------------------------------------------------------------------------- 1 | // Learn TypeScript: 2 | // - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/typescript.html 3 | // - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/typescript.html 4 | // Learn Attribute: 5 | // - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html 6 | // - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/reference/attributes.html 7 | // Learn life-cycle callbacks: 8 | // - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html 9 | // - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html 10 | 11 | const {ccclass, property} = cc._decorator; 12 | 13 | @ccclass 14 | export default class NewClass extends cc.Component { 15 | 16 | 17 | 18 | createRemoteDownloadTask(url) : Promise{ 19 | return new Promise((resolve) => { 20 | cc.loader.load(url , function (err, data) { 21 | resolve(data); 22 | }); 23 | }) 24 | } 25 | 26 | createLocalLoadTask(url) : Promise{ 27 | return new Promise((resolve) => { 28 | cc.loader.load(url , function (err, data) { 29 | resolve(data); 30 | }); 31 | }) 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /assets/scripts/loader/LoaderUtil.ts.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.5", 3 | "uuid": "ccc6795e-c6dd-4e84-9aeb-b63bcdafe022", 4 | "isPlugin": false, 5 | "loadPluginInWeb": true, 6 | "loadPluginInNative": true, 7 | "loadPluginInEditor": false, 8 | "subMetas": {} 9 | } -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "commonjs", 5 | "experimentalDecorators": true 6 | }, 7 | "exclude": [ 8 | "node_modules", 9 | ".vscode", 10 | "library", 11 | "local", 12 | "settings", 13 | "temp" 14 | ] 15 | } -------------------------------------------------------------------------------- /project.json: -------------------------------------------------------------------------------- 1 | { 2 | "engine": "cocos2d-html5", 3 | "packages": "packages" 4 | } -------------------------------------------------------------------------------- /snapshot/compelete.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sinmere/cocos-creator-shader-assembler/4fe71ae9b6745bb1a1302fb973165bc4dedeffbc/snapshot/compelete.png -------------------------------------------------------------------------------- /snapshot/shader_disable.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sinmere/cocos-creator-shader-assembler/4fe71ae9b6745bb1a1302fb973165bc4dedeffbc/snapshot/shader_disable.gif -------------------------------------------------------------------------------- /snapshot/shadertoy.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sinmere/cocos-creator-shader-assembler/4fe71ae9b6745bb1a1302fb973165bc4dedeffbc/snapshot/shadertoy.gif -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "lib": [ "dom", "es5", "es2015.promise" ], 5 | "target": "es5", 6 | "allowJs": true, 7 | "experimentalDecorators": true, 8 | "skipLibCheck": true 9 | }, 10 | "exclude": [ 11 | "node_modules", 12 | "library", 13 | "local", 14 | "temp", 15 | "build", 16 | "settings" 17 | ] 18 | } 19 | --------------------------------------------------------------------------------