三个js -基本着色器的后期处理
Three js - basic shader for postprocessing
我一直在尝试写一个简单的着色器来添加噪音。但是我不能用以下设置获得uv坐标。
片段着色器:
uniform float seed;
uniform sampler2D pass;
varying vec2 vUv;
void main (){
//noise
vec2 pos = gl_FragCoord.xy;
pos.x *= seed;
pos.y *= seed;
float lum=fract(sin(dot(pos ,vec2(12.9898,78.233))) * 434658.5453116487577816842168767168087910388737310);
vec4 tx = texture2D(pass, vUv);
gl_FragColor = vec4(tx.r*lum,tx.g*lum,tx.b*lum,1.0);
}
顶点着色器:
varying vec2 vUv;
void main (){
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}
呈现:
OBJECT.material = OBJECT.mat.flat; // THREE MeshPhongMaterial ({color: 0xE40D59,shading:THREE.FlatShading});
RENDERER.render(SCENE,CAMERA,BEAUTY_PASS,false);
OBJECT.material = OBJECT.mat.noise; // THREE ShaderMaterial
RENDERER.render(SCENE,CAMERA);
我得到以下错误:
错误:WebGL: DrawElements:绑定顶点属性缓冲区不存在对于来自绑定元素数组@的给定索引有足够的大小http://threejs.org/build/three.min.js: 439
我做了一些测试,我可以通过为所有像素选择相同的坐标来运行它
vec4 tx = texture2D(pass, vec2(0.5,0.5));
显示我的对象与一个红色的嘈杂的颜色,然而,vUv变量工作得很好,如果我删除第一个渲染通道(RENDERER.render(SCENE,CAMERA,BEAUTY_PASS,False)
)。
为什么我不能得到第二次渲染的uv坐标?根据几个例子,我应该能够使用相同的场景和相机来渲染它,就像这个例子
如果没有初始纹理,几何体将没有必要的内置WebGL UV缓冲区。
有几种解决方案,但也许最简单的是确保网格的第一次渲染具有纹理。一个简单的白色就可以了。
three.js r.58
相关文章:
- 可以't让我的if语句处理js中的html表单输入
- 在 Node.js 中处理.js和.css
- 当我们使用基于标记的DOM就绪执行时,如何处理js函数
- PHP无法处理js表单
- 正在处理.js - 当鼠标离开画布时继续交互
- JavaScript 函数中的 JQuery 函数 :: 处理.js.
- 从画布动态“卸载”处理 JS 草图
- 处理.js:p.keyRelease不是一个函数/模拟keyRelease
- 裁剪图像处理.js
- 在处理 JS 中导入
- 处理 js - 关卡滚动
- 处理.js计时器
- 在 3D 场景中处理.js对象选择
- 处理 JS 和代码隐藏中的字符串中的单引号
- 什么是对列表重新排序进行动画处理.js反应友好方式
- 在处理.js中,如何声明对象类型和对象数组
- 如何处理JS错误
- Rails+Ajax:如何在点击一个元素后处理JS代码
- "超过了最大调用堆栈大小“;在处理JS时实现Fractal工厂时出错
- 存储/导入变量&函数处理(JS)