三个 Js 简单着色器不起作用答案

【问题标题】：Three Js simple Shader not working三个 Js 简单着色器不起作用
【发布时间】：2015-04-12 02:08:36
【问题描述】：

我正在尝试使用 three.js 运行以下简单着色器

mat = new THREE.ShaderMaterial({
  uniforms: {
    color: { type: 'v3', value: new THREE.Color(0xcccccc) }
  },
  vertexShader: 'attribute vec3 vert;\n'
              + 'void main() {\n' 
              + '  gl_Position = vec4(vert, 1.0);\n'
              + '}',
  fragmentShader: 'uniform vec3 color;\n'
                + 'void main() {\n'
                + '  gl_FragColor = vec4(color,1);\n'
                + '}'
})

着色器编译，但具有此材质的对象是不可见的。

这应该以恒定的浅灰色显示对象。

当我使用kick.js shader editor 运行它时它按预期工作。

预定义的材质都很好用。

我错过了什么吗？

【问题讨论】：

这个着色器应该做什么？预期的结果是什么？
可能与设置 gl_Position 和 vert 属性有关。你确定它有价值吗？看看我一直在做的一些three.js shader experiments。

标签： three.js webgl shader

【解决方案1】：

你的顶点着色器应该是：

// Multiply each vertex by the model-view matrix and the projection matrix
// (both provided by Three.js) to get a final vertex position. 
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

【讨论】：