如何解决shutters.js —无法初始化着色器程序
我正在尝试向通过窗帘创建的平面添加片段着色器。我之前曾将此片段着色器与其他库一起使用过-即canvas-sketch-但是由于控制台提示我出现错误:Program: Unable to initialize the shader program.
#canvas {
/* make the canvas wrapper fits the document */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.plane {
/* define the size of your plane */
width: 80%;
height: 80vh;
margin: 10vh auto;
}
<div id="canvas"></div>
<div class="plane"></div>
<script type="module">
import { Curtains,Plane } from "https://cdn.jsdelivr.net/npm/curtainsjs@7.1.0/src/index.mjs";
window.addEventListener("load",() => {
// set up our WebGL context and append the canvas to our wrapper
const curtains = new Curtains({
container: "canvas",});
// get our plane element
const planeElement = document.getElementsByClassName("plane")[0];
// set our initial parameters (basic uniforms)
const fragmentShader = `
precision mediump float;
uniform float uTime;
varying vec2 vUv;
void main() {
vec3 color = 0.5 + 0.5 * cos(uTime + vUv.xyx + vec3(0.0,2.0,4.0));
gl_FragColor = vec4(color,1.0);
}
`;
const params = {
fragmentShader,widthSegments: 20,heightSegments: 20,uniforms: {
time: {
name: "uTime",// uniform name that will be passed to our shaders
type: "1f",// this means our uniform is a float
value: 0,},};
// create our plane using our curtains object,the bound HTML element and the parameters
const plane = new Plane(curtains,planeElement,params);
plane.onRender(() => {
// use the onRender method of our plane fired at each requestAnimationFrame call
plane.uniforms.time.value++; // update our time uniform value
});
});
</script>
我确实在其他问题中看到有关如何为GL启用更详细的错误日志记录的注释,但是我不确定如何使用此库设置这些属性。
解决方法
窗帘没有变化的vUv
。它有一个叫做vTextureCoord
#canvas {
/* make the canvas wrapper fits the document */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.plane {
/* define the size of your plane */
width: 80%;
height: 80vh;
margin: 10vh auto;
}
<div id="canvas"></div>
<div class="plane"></div>
<script type="module">
import { Curtains,Plane } from "https://cdn.jsdelivr.net/npm/curtainsjs@7.1.0/src/index.mjs";
window.addEventListener("load",() => {
// set up our WebGL context and append the canvas to our wrapper
const curtains = new Curtains({
container: "canvas",});
// get our plane element
const planeElement = document.getElementsByClassName("plane")[0];
// set our initial parameters (basic uniforms)
const fragmentShader = `
precision mediump float;
uniform float uTime;
varying vec2 vTextureCoord;
void main() {
vec3 color = 0.5 + 0.5 * cos(uTime + vTextureCoord.xyx + vec3(0.0,2.0,4.0));
gl_FragColor = vec4(color,1.0);
}
`;
const params = {
fragmentShader,widthSegments: 20,heightSegments: 20,uniforms: {
time: {
name: "uTime",// uniform name that will be passed to our shaders
type: "1f",// this means our uniform is a float
value: 0,},};
// create our plane using our curtains object,the bound HTML element and the parameters
const plane = new Plane(curtains,planeElement,params);
plane.onRender(() => {
// use the onRender method of our plane fired at each requestAnimationFrame call
plane.uniforms.time.value++; // update our time uniform value
});
});
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。