Cherry-pick critical bug fixes from upstream PR #66 and add PR preview deployment

.github/PR_PREVIEW.md

@@ -0,0 +1,82 @@
+# PR Preview Deployment
+
+This repository has automated PR preview deployments set up via GitHub Actions.
+
+## How It Works
+
+When a Pull Request is created or updated:
+
+1. The PR Preview workflow automatically deploys the PR branch to GitHub Pages
+2. Each PR gets its own subdirectory: `https://ap0ught.github.io/matrix/pr-{number}/`
+3. A comment is posted on the PR with links to test the preview
+4. The preview is automatically updated when new commits are pushed
+
+## Manual Deployment
+
+You can also manually trigger a preview deployment:
+
+1. Go to the Actions tab
+2. Select "PR Preview Deployment"
+3. Click "Run workflow"
+4. Select the branch you want to deploy
+
+## Preview URLs
+
+After deployment, you can access your PR preview at:
+
+- **Main preview:** `https://ap0ught.github.io/matrix/pr-{number}/`
+- **With options:** `https://ap0ught.github.io/matrix/pr-{number}/?suppressWarnings=true`
+
+### Test Links
+
+The automated PR comment includes convenient test links for different Matrix versions:
+
+- Default Matrix effect
+- Mirror mode with mouse interaction
+- 3D volumetric mode
+- Resurrections version
+
+## Cleanup
+
+PR previews remain on GitHub Pages until manually removed. To clean up old previews:
+
+1. Check out the `gh-pages` branch
+2. Remove the `pr-{number}` directory
+3. Commit and push
+
+## Requirements
+
+- GitHub Pages must be enabled for the repository
+- The workflow requires these permissions:
+  - `contents: write` - to push to gh-pages branch
+  - `pages: write` - to deploy to GitHub Pages
+  - `pull-requests: write` - to comment on PRs
+
+## Technical Details
+
+- **Workflow file:** `.github/workflows/pr-preview.yml`
+- **Deployment branch:** `gh-pages`
+- **Directory structure:** Each PR gets its own subdirectory
+- **Files deployed:** `index.html`, `js/`, `lib/`, `assets/`, `shaders/`
+
+## Limitations
+
+- This is a static site deployment - no server-side processing
+- Previews don't require any build step (keeping with the project's philosophy)
+- Each preview is a complete copy of the web application
+
+## Local Testing Alternative
+
+If you prefer to test locally instead of using the preview:
+
+```bash
+# Clone and checkout the PR branch
+git fetch origin pull/{PR_NUMBER}/head:pr-{PR_NUMBER}
+git checkout pr-{PR_NUMBER}
+
+# Start a local server
+python3 -m http.server 8000
+
+# Open in browser
+open http://localhost:8000/?suppressWarnings=true
+```

.github/workflows/pr-preview.yml

@@ -0,0 +1,277 @@
+name: PR Preview Deployment
+
+# Deploy PR branches to GitHub Pages at /pr-{number}/ for testing
+# This allows testing changes without merging to master
+
+on:
+  workflow_dispatch:  # Allow manual trigger
+  pull_request:
+    types: [opened, synchronize, reopened]
+    branches:
+      - master
+
+permissions:
+  contents: write
+  pages: write
+  id-token: write
+  pull-requests: write
+
+jobs:
+  deploy-preview:
+    name: Deploy PR Preview
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout PR branch
+      uses: actions/checkout@v4
+      with:
+        ref: ${{ github.event.pull_request.head.sha || github.sha }}
+        fetch-depth: 1
+        token: ${{ github.token }}
+
+    - name: Determine preview path
+      id: preview
+      run: |
+        if [ "${{ github.event_name }}" = "pull_request" ]; then
+          PR_NUMBER="${{ github.event.pull_request.number }}"
+          PREVIEW_PATH="pr-${PR_NUMBER}"
+        else
+          # Manual trigger - use branch name
+          BRANCH_NAME="${GITHUB_REF#refs/heads/}"
+          PREVIEW_PATH="pr-${BRANCH_NAME//\//-}"
+        fi
+        echo "path=${PREVIEW_PATH}" >> $GITHUB_OUTPUT
+        echo "url=https://ap0ught.github.io/matrix/${PREVIEW_PATH}/" >> $GITHUB_OUTPUT
+        echo "Preview will be deployed to: ${PREVIEW_PATH}"
+
+    - name: Checkout gh-pages branch
+      uses: actions/checkout@v4
+      with:
+        ref: gh-pages
+        path: gh-pages
+        fetch-depth: 0
+        token: ${{ github.token }}
+      continue-on-error: true
+
+    - name: Initialize gh-pages if needed
+      run: |
+        if [ ! -d "gh-pages/.git" ]; then
+          echo "Creating new gh-pages branch"
+          rm -rf gh-pages
+          mkdir -p gh-pages
+          cd gh-pages
+          git init
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          git checkout -b gh-pages
+
+          # Set up remote with authentication
+          git remote add origin "https://x-access-token:${{ github.token }}@github.com/${{ github.repository }}.git"
+
+          echo "# Matrix PR Previews" > README.md
+          echo "" >> README.md
+          echo "This branch contains PR preview deployments." >> README.md
+          echo "Main site: https://ap0ught.github.io/matrix/" >> README.md
+
+          git add .
+          git commit -m "Initialize gh-pages branch"
+          cd ..
+        else
+          echo "gh-pages branch exists, configuring..."
+          cd gh-pages
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          cd ..
+        fi
+
+    - name: Prepare preview directory
+      run: |
+        PREVIEW_PATH="${{ steps.preview.outputs.path }}"
+
+        # Create preview directory in gh-pages
+        mkdir -p "gh-pages/${PREVIEW_PATH}"
+
+        # Copy web application files to preview directory
+        cp index.html "gh-pages/${PREVIEW_PATH}/"
+        cp -r js "gh-pages/${PREVIEW_PATH}/"
+        cp -r lib "gh-pages/${PREVIEW_PATH}/"
+        cp -r assets "gh-pages/${PREVIEW_PATH}/"
+        cp -r shaders "gh-pages/${PREVIEW_PATH}/"
+
+        # Optional files (don't fail if missing)
+        cp README.md "gh-pages/${PREVIEW_PATH}/" 2>/dev/null || true
+        cp screenshot.png "gh-pages/${PREVIEW_PATH}/" 2>/dev/null || true
+
+        echo "✅ Preview files copied to gh-pages/${PREVIEW_PATH}"
+        ls -la "gh-pages/${PREVIEW_PATH}"
+
+    - name: Update gh-pages index
+      run: |
+        cd gh-pages
+
+        # Create or update index.html with list of previews
+        cat > index.html <<'HTMLEOF'
+        <!DOCTYPE html>
+        <html lang="en">
+        <head>
+            <meta charset="UTF-8">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <title>Matrix PR Previews</title>
+            <style>
+                body {
+                    font-family: 'Courier New', monospace;
+                    background: #000;
+                    color: #0f0;
+                    padding: 20px;
+                    max-width: 800px;
+                    margin: 0 auto;
+                }
+                h1 { color: #0f0; text-shadow: 0 0 10px #0f0; }
+                a { color: #0f0; text-decoration: none; }
+                a:hover { text-decoration: underline; text-shadow: 0 0 5px #0f0; }
+                .preview { 
+                    margin: 10px 0; 
+                    padding: 10px;
+                    border: 1px solid #0f0;
+                    border-radius: 4px;
+                }
+                .main-link {
+                    font-size: 1.2em;
+                    margin-bottom: 30px;
+                    padding: 15px;
+                    border: 2px solid #0f0;
+                    border-radius: 4px;
+                }
+            </style>
+        </head>
+        <body>
+            <h1>Matrix PR Preview Deployments</h1>
+
+            <div class="main-link">
+                <strong>Main Site:</strong> <a href="/">https://ap0ught.github.io/matrix/</a>
+            </div>
+
+            <h2>Available PR Previews:</h2>
+            <div id="previews"></div>
+
+            <script>
+                const previews = [];
+        HTMLEOF
+
+        # Add preview paths to the list
+        for dir in pr-*/ ; do
+          if [ -d "$dir" ]; then
+            dir_name="${dir%/}"
+            echo "                previews.push('$dir_name');" >> index.html
+          fi
+        done
+
+        cat >> index.html <<'HTMLEOF'
+
+                const container = document.getElementById('previews');
+                if (previews.length === 0) {
+                    container.innerHTML = '<p>No PR previews available yet.</p>';
+                } else {
+                    previews.sort().reverse().forEach(preview => {
+                        const div = document.createElement('div');
+                        div.className = 'preview';
+                        div.innerHTML = `<strong>${preview}</strong>: <a href="/matrix/${preview}/">View Preview</a>`;
+                        container.appendChild(div);
+                    });
+                }
+            </script>
+        </body>
+        </html>
+        HTMLEOF
+
+        echo "✅ Updated gh-pages index.html"
+
+    - name: Deploy to gh-pages
+      run: |
+        cd gh-pages
+
+        # Ensure git config is set
+        git config user.name "github-actions[bot]"
+        git config user.email "github-actions[bot]@users.noreply.github.com"
+
+        # Set up authentication for push
+        git remote set-url origin "https://x-access-token:${{ github.token }}@github.com/${{ github.repository }}.git" || \
+          git remote add origin "https://x-access-token:${{ github.token }}@github.com/${{ github.repository }}.git"
+
+        # Stage all changes
+        git add .
+
+        # Check if there are changes to commit
+        if git diff --staged --quiet; then
+          echo "No changes to deploy"
+        else
+          git commit -m "Deploy preview: ${{ steps.preview.outputs.path }}"
+
+          # Push to gh-pages branch
+          git push origin gh-pages --force
+          echo "✅ Successfully deployed to gh-pages"
+        fi
+
+    - name: Comment on PR with preview URL
+      if: github.event_name == 'pull_request'
+      uses: actions/github-script@v7
+      with:
+        script: |
+          const previewUrl = '${{ steps.preview.outputs.url }}';
+          const comment = `## 🎬 PR Preview Deployed!
+
+          Your changes are now available for testing:
+
+          **Preview URL:** ${previewUrl}
+
+          ### Test Links:
+          - [Default Matrix](${previewUrl}?suppressWarnings=true)
+          - [Mirror Effect](${previewUrl}?effect=mirror&suppressWarnings=true)
+          - [3D Mode](${previewUrl}?version=3d&suppressWarnings=true)
+          - [Resurrections](${previewUrl}?version=resurrections&suppressWarnings=true)
+
+          The preview will be updated automatically when you push new commits.
+
+          ---
+          *Preview deployed from commit ${{ github.event.pull_request.head.sha }}*`;
+
+          // Find existing preview comment
+          const { data: comments } = await github.rest.issues.listComments({
+            owner: context.repo.owner,
+            repo: context.repo.repo,
+            issue_number: context.issue.number,
+          });
+
+          const botComment = comments.find(comment => 
+            comment.user.type === 'Bot' && 
+            comment.body.includes('PR Preview Deployed')
+          );
+
+          if (botComment) {
+            // Update existing comment
+            await github.rest.issues.updateComment({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              comment_id: botComment.id,
+              body: comment
+            });
+          } else {
+            // Create new comment
+            await github.rest.issues.createComment({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number,
+              body: comment
+            });
+          }
+
+    - name: Summary
+      run: |
+        echo "## 🎉 PR Preview Deployed Successfully!" >> $GITHUB_STEP_SUMMARY
+        echo "" >> $GITHUB_STEP_SUMMARY
+        echo "**Preview URL:** ${{ steps.preview.outputs.url }}" >> $GITHUB_STEP_SUMMARY
+        echo "" >> $GITHUB_STEP_SUMMARY
+        echo "### Quick Test Links:" >> $GITHUB_STEP_SUMMARY
+        echo "- [Default Matrix](${{ steps.preview.outputs.url }}?suppressWarnings=true)" >> $GITHUB_STEP_SUMMARY
+        echo "- [Mirror Effect](${{ steps.preview.outputs.url }}?effect=mirror&suppressWarnings=true)" >> $GITHUB_STEP_SUMMARY
+        echo "- [3D Mode](${{ steps.preview.outputs.url }}?version=3d&suppressWarnings=true)" >> $GITHUB_STEP_SUMMARY

js/regl/main.js

@@ -73,7 +73,7 @@ export default async (canvas, config) => {
 	};
 	const effects = createEffectsMapping("regl", passModules);
 	const effectPass = getEffectPass(config.effect, effects, "palette");
-	const context = { regl, config, lkg, cameraTex, cameraAspectRatio };
+	const context = { regl, canvas, config, lkg, cameraTex, cameraAspectRatio };
 	const pipeline = makePipeline(context, [makeRain, makeBloomPass, effectPass, makeQuiltPass]);
 	const screenUniforms = { tex: pipeline[pipeline.length - 1].outputs.primary };
 	const drawToScreen = regl({ uniforms: screenUniforms });