Cocos Creator Shader工具

前端之家收集整理的这篇文章主要介绍了Cocos Creator Shader工具前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

十一就这样过去了,没什么大成就,但还是写个总结吧。前几天用Cocos Creator写一个demo,涉及到了shader开发,而cocos一直没有好用的shader工具,就心血来潮要自己开发一个。花了两天时间,模拟Unity Shader完成了一套基本的材质框架,由于不知道怎么扩展编辑器,就没写工具,后面等Cocos Creator的编辑器扩展功能更完善一些再说。

源码已经放到github了,戳这里。shader的语法类似于Unity Shader,详细的说明已经写在github项目主页了,大致如下:

Shader "SimpleShader" {
    Properties{ // 材质属性
        _MainTex("Main Tex",texture) = "";
        _Color("Main Color",color) = (1,1,1);
    }
    SubShader{
        Pass{
            // 变种shader宏列表。shader会根据宏的排列组合,生成不同版本的shader
            variants = (ENABLE_COLOR,ENABLE_TEXTURE);
            // 顶点着色器源码
            vsh = `
                attribute vec4 a_position;
                attribute vec2 a_texCoord;
                varying vec2 v_texCoord;
                void main()
                {
                    gl_Position = CC_PMatrix * a_position;
                    v_texCoord = a_texCoord;
                }
            `;
            // 片段着色器源码
            fsh = `
            #ifdef GL_ES
                precision mediump float;
            #endif

            #ifdef ENABLE_TEXTURE
                varying vec2 v_texCoord;
                uniform sampler2D _MainTex;
            #endif

            #ifdef ENABLE_COLOR
                uniform vec4 _Color;
            #endif
                void main()
                {
                    vec4 color = vec4(1,1);
            #ifdef ENABLE_TEXTURE
                    color = texture2D(_MainTex,v_texCoord);
            #endif

            #ifdef ENABLE_COLOR
                    color *= _Color;
            #endif
                    gl_FragColor = color;
                }
            `;
        }
    }
}

材质格式如下:

{
    "shaderPath" : "resources/shaders/simple-shader.shader","values" : { "_MainTex" : "resources/textures/tex00.jpg","_Color" : [1,0,1] },"variants" : ["ENABLE_COLOR","ENABLE_TEXTURE"] }

源码中包含一套简单的材质框架,和一个shader(非glsl)语法解析器。工具会根据shader文件中提供的变种宏列表,生成不同的着色器对象(GLProgram),材质系统用宏列表去匹配合适的着色器对象,然后合成GLProgramState,最后赋予Node。

原文链接:https://www.f2er.com/cocos2dx/338366.html

猜你在找的Cocos2d-x相关文章