examples/test_custom_shader.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="/js/spritejs.js"></script>
<style>
#container {
position: absolute;
width: 600px;
height: 600px;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
const vertex = `
attribute vec3 a_vertexPosition;
// attribute vec4 a_color;
varying vec3 vColor;
attribute vec3 a_pp;
uniform mat3 viewMatrix;
uniform mat3 projectionMatrix;
void main() {
gl_PointSize = 1.0;
vec3 pos = projectionMatrix * viewMatrix * vec3(a_vertexPosition.xy, 1.0);
gl_Position = vec4(pos.xy, 1.0, 1.0);
vColor = a_pp;
}
`;
const fragment = `
precision mediump float;
varying vec3 vColor;
uniform vec4 u_color;
uniform vec2 u_resolution;
void main() {
vec2 st = gl_FragCoord.xy / u_resolution;
gl_FragColor = st.x * vec4(vColor, 1);
}
`;
const container = document.getElementById('container');
const scene = new spritejs.Scene({
container,
// displayRatio: 2,
width: 600,
height: 600,
// mode: 'stickyHeight',
// contextType: '2d',
});
const fglayer = scene.layer('fglayer', {autoRender: false});
const program = fglayer.renderer.createProgram({vertex, fragment});
const s = new spritejs.Block();
s.attr({
anchor: 0.5,
size: [100, 100],
pos: [300, 300],
bgcolor: 'blue',
});
s.setProgram(program);
const {width, height} = fglayer.getResolution();
s.setUniforms({
u_resolution: [width, height],
});
s.setShaderAttribute('a_pp', () => {
return [Math.random(), Math.random(), Math.random()];
});
fglayer.append(s);
requestAnimationFrame(function update() {
fglayer.render();
requestAnimationFrame(update);
});
</script>
</body>
</html>