shader新手,请问 creator中如何输入顶点数据？

Creator 2.x
#1

刚学shader,看了一点openGL文档，查了下怎么在cocos creator中使用shader,在openGL文档里看到顶点数据是自定义的，然后网上查阅资料看到creator中使用顶点着色器时 渲染节点中包含多少个顶点，.vert文件就执行多少次.
( https://blog.csdn.net/operhero1990/article/details/50216497 )
那么如果我只想对纹理的部分渲染呢？比如一张图片，我们希望只对图片的下半部分变灰处理。
https://blog.csdn.net/xufeng0991/article/details/72973664
module.exports =
#ifdef GL_ES
precision lowp float;
#endif

varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
void main()
{
vec4 c = v_fragmentColor * texture2D(CC_Texture0, v_texCoord);
gl_FragColor.xyz = vec3(0.2126c.r + 0.7152c.g + 0.0722*c.b);
gl_FragColor.w = c.w;
}`
我参考的是这上面的博文，应该如何修改？v_texCoord 无法赋值呢。
v_texCoord = {
0.0f, 0.0f,
1.0f, 0.0f,
0.5f, 1.0f

}

1赞
#2

可以用v_texCoord去控制下半部分变灰。
1.x和2.x的渲染方式不一样，不知道你问的是哪个版本的引擎。

#3

同问，怎么用shader实现多边形遮罩

#4

1.9版本。我想知道怎么控制顶点数据，比如一张图片，需要处理的只是1.0,1.0,0.5，怎么办？

#5

我昨天才学openGL,不会啊

#6

主要问题是自网上看到如果渲染节点中包含多少个顶点就调用多少次.vert文件，这里的顶点数据就是各个点转化成标准坐标吗？

#7

你可以参考这个https://github.com/shangdibaozi/CocosCreatorWebGL

#8

我刚刚实现了一下只对纹理的部分进行处理，还有些疑问
https://forum.cocos.com/t/shader/74434
我是看https://learnopengl-cn.readthedocs.io/zh/latest/01%20Getting%20started/06%20Textures/
学习的，对纹理这块还不是很清楚

#9

因为v_texCoord的坐标系原点在左下角。
建议看看《WebGL编程指南》第5章。

#10

这样只是简单的根据坐标来处理。。。无法做到 像多边形裁剪图片

#11

这部分我看了openGL中文文档，左下角0,0的话，当v_maxY = 0.3时y轴坐标小于0.3就应该全部变灰了啊，为什么和我想的相反？
if( v_texCoord.y < v_maxY ){ gl_FragColor.xyz = vec3(0.2126*c.r + 0.7152*c.g + 0.0722*c.b); gl_FragColor.w = c.w; }else{ gl_FragColor = src_color; }

image.png629×591 40.9 KB

#12

这篇文章里有教如何裁出一个圆，https://www.imooc.com/article/74413
` if (length(gl_PointCoord - vec2(0.5, 0.5)) > 0.5) {
discard;
}
gl_FragColor = fragColor;

`
复杂的多边形应该也是控制坐标吧

#13

我说的 当然是那种不规则的多边形啊

#14

这里面涉及显示坐标系、纹理坐标系和图片坐标系之间的对应关系。
cocos creator里面图片四个顶点是这样安排的

每个顶点对应的纹理坐标是(0, 1), (1, 1), (0, 0), (1, 0)

O_]QK@44MT)1KB8RVF][(KF.png1046×679 10.9 KB

#16

大神，谢谢，恍然大悟！。那现在我还剩下一个问题，
module.exports =
attribute vec4 a_position;
attribute vec2 a_texCoord;
attribute vec4 a_color;
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
void main()
{
gl_Position = CC_PMatrix * a_position;
v_fragmentColor = a_color;
v_texCoord = a_texCoord;
}
``
这里定义的a_position， a_texCoord， a_color这几个值从哪里获取的，分别是什么？

#17

https://blog.csdn.net/simpledrunk/article/details/17095821
https://blog.csdn.net/luoshiyong123/article/details/82744524?utm_source=blogxgwz2

https://forum.cocos.com/t/shader/59401

你看下这三篇文档对你有没有用

#18 
var gl = cc._renderContext;
var program = new cc.GLProgram();
program.initWithVertexShaderByteArray(VSHADER_SOURCE, FSHADER_SOURCE);
program.link();
program.use();
sgNode.setShaderProgram(program);

var a_Position = gl.getAttribLocation(program._programObj, 'a_Position');
var a_TexCoord = gl.getAttribLocation(program._programObj, 'a_TexCoord');
#19

谢谢大神，我把 var a_position = g1.getAttribLocation( glProgram._programObj, ‘a_position’ )
var a_texCoord = g1.getAttribLocation( glProgram._programObj, ‘a_texCoord’ )
console.log( ‘a_position’, a_position )
console.log( ‘a_texCoord’, a_texCoord )
输出一个是0，一个是2
https://learnopengl-cn.github.io/01%20Getting%20started/04%20Hello%20Triangle/
官方文档里写：每个顶点属性从一个VBO管理的内存中获得它的数据，而具体是从哪个VBO（程序中可以有多个VBO）获取则是通过在调用glVetexAttribPointer时绑定到GL_ARRAY_BUFFER的VBO决定的，代码里没有显现的调用函数，
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
这部分是creator帮忙处理了的吧。

#20

如果你要自己制定顶点数据的话这部分需要你自己去处理。
我上面发的链接里面的示例工程你可以参考，里面都是些基础示例。
我说过你可以参考《WebGL编程指南》这本书讲得很通俗易懂。

#21

好的，谢谢大神。是这本吧

image.png701×399 75.7 KB

还有，链接在哪里。。。。