File size: 3,580 Bytes
083887a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
import streamlit as st
import streamlit.components.v1 as components
st.title("Mobile-Friendly Shader Demo")
# HTML + JS shader component
html_code = """
<canvas id="glcanvas"></canvas>
<script type="text/javascript">
// Setup canvas
const canvas = document.getElementById('glcanvas');
const gl = canvas.getContext('webgl');
if (!gl) { alert('WebGL not supported'); }
// Resize canvas to fit screen
function resizeCanvas() {
canvas.width = window.innerWidth * window.devicePixelRatio;
canvas.height = window.innerHeight * 0.6 * window.devicePixelRatio; // ~60% height
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
// Vertex shader
const vertCode = `
attribute vec4 position;
void main() { gl_Position = position; }
`;
// Fragment shader
const fragCode = `
precision mediump float;
uniform float iTime;
uniform vec2 iMouse;
uniform vec2 iResolution;
void main() {
vec2 uv = gl_FragCoord.xy / iResolution.xy;
vec3 color = vec3(
uv.x + iMouse.x*0.5 + 0.5*sin(iTime),
uv.y + iMouse.y*0.5 + 0.5*cos(iTime),
0.5 + 0.5*sin(iTime)
);
gl_FragColor = vec4(color, 1.0);
}
`;
// Shader compile helper
function compileShader(gl, source, type) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS)){
console.error(gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
// Compile shaders
const vertShader = compileShader(gl, vertCode, gl.VERTEX_SHADER);
const fragShader = compileShader(gl, fragCode, gl.FRAGMENT_SHADER);
// Link program
const program = gl.createProgram();
gl.attachShader(program, vertShader);
gl.attachShader(program, fragShader);
gl.linkProgram(program);
gl.useProgram(program);
// Fullscreen quad
const vertices = new Float32Array([-1,-1, 1,-1, -1,1, -1,1, 1,-1, 1,1]);
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
const position = gl.getAttribLocation(program, "position");
gl.enableVertexAttribArray(position);
gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
// Uniform locations
const iTime = gl.getUniformLocation(program, "iTime");
const iResolution = gl.getUniformLocation(program, "iResolution");
const iMouse = gl.getUniformLocation(program, "iMouse");
// Initial mouse
let mouseX = 0.5;
let mouseY = 0.5;
// Mouse / touch events
canvas.addEventListener('mousemove', e => {
const rect = canvas.getBoundingClientRect();
mouseX = (e.clientX - rect.left) / rect.width;
mouseY = 1.0 - (e.clientY - rect.top) / rect.height;
});
canvas.addEventListener('touchmove', e => {
e.preventDefault();
const rect = canvas.getBoundingClientRect();
const touch = e.touches[0];
mouseX = (touch.clientX - rect.left) / rect.width;
mouseY = 1.0 - (touch.clientY - rect.top) / rect.height;
}, {passive:false});
// Animation loop
function render() {
gl.viewport(0, 0, canvas.width, canvas.height);
gl.uniform2f(iResolution, canvas.width, canvas.height);
gl.uniform2f(iMouse, mouseX, mouseY);
gl.uniform1f(iTime, performance.now() / 1000.0);
gl.drawArrays(gl.TRIANGLES, 0, 6);
requestAnimationFrame(render);
}
render();
</script>
"""
components.html(html_code, height=400)
st.markdown("**Instructions:** Move your mouse (desktop) or touch (mobile) the canvas to change colors in real time.")
|