stevensona/shader-toy

No content in preview window

ircubic opened this issue · 2 comments

ircubic commented

When running the preview command, the preview window opens, but no content is visible. The developer console shows the generated page, and the error: [Embedded Page] Uncaught ReferenceError: THREE is not defined

From my quick review of the generated code, it looks like the canvas and all relevant script tags are generated after the </body> tag, which seems problematic.

The full generated code (edited for privacy):

<head>
  <style>
      html, body, #canvas { margin: 0; padding: 0; width: 100%; height: 100%; display: block; }
      #error {font-family: Consolas; font-size: 1.2em; color:#ccc; background-color:black; font-weight: bold;}
  </style>
</head>
<body>
      <div id="error"></div>
      <div id="container"></div>
</body>
<script src="/home/user/.vscode/extensions/stevensona.shader-toy-0.1.8/resources/jquery.min.js"></script>
<script src="/home/user/.vscode/extensions/stevensona.shader-toy-0.1.8/resources/three.min.js"></script>
<canvas id="canvas"></canvas>
<script id="vs" type="x-shader/x-vertex">
    void main() {
        gl_Position = vec4(position, 1.0);
    }
</script>
<script id="fs" type="x-shader/x-fragment">
    uniform vec3        iResolution;
    uniform float       iGlobalTime;
    uniform float       iTimeDelta;
    uniform int         iFrame;
    uniform float       iChannelTime[4];
    uniform vec3        iChannelResolution[4];
    uniform vec4        iMouse;
    uniform sampler2D   iChannel0;
    uniform sampler2D   iChannel1;
    uniform sampler2D   iChannel2;
    uniform sampler2D   iChannel3;
//                  uniform vec4        iDate;
//                  uniform float       iSampleRate;
    
    void main()
{
// -- snip --
}
</script>

<script type="text/javascript">
    (function(){
        console.error = function (message) {
            if('7' in arguments) {
                $("#error").html("<h3>Shader failed to compile</h3><ul>")                                    
                $("#error").append(arguments[7].replace(/ERROR: \d+:(\d+)/g, function(m, c) { return  "<li>Line " + String(Number(c) - 27); }));
                $("#error").append("</ul>");
            }
        };
    })();
    var canvas = document.getElementById('canvas');
    var scene = new THREE.Scene();
    var renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
    var camera = new THREE.PerspectiveCamera(45, canvas.clientWidth / canvas.clientWidth, 1, 1000);
    var clock = new THREE.Clock();
    var resolution = new THREE.Vector3(canvas.clientWidth, canvas.clientHeight, 1.0);
    var channelResolution = new THREE.Vector3(128.0, 128.0, 0.0);
    var mouse = new THREE.Vector4(0, 0, 0, 0);
    var shader = new THREE.ShaderMaterial({
            vertexShader: document.getElementById('vs').textContent,
            fragmentShader: document.getElementById('fs').textContent,
            depthWrite: false,
            depthTest: false,
            uniforms: {
                iResolution: { type: "v3", value: resolution },
                iGlobalTime: { type: "f", value: 0.0 },
                iTimeDelta: { type: "f", value: 0.0 },
                iFrame: { type: "i", value: 0 },
                iChannelTime: { type: "fv1", value: [0., 0., 0., 0.] },
                iChannelResolution: { type: "v3v", value:
                    [channelResolution, channelResolution, channelResolution, channelResolution]   
                },
                iMouse: { type: "v4", value: mouse },
            }
        });
    if(false) {
        Function.prototype;
        Function.prototype;
        Function.prototype;
        Function.prototype;
    }
    var quad = new THREE.Mesh(
        new THREE.PlaneGeometry(2, 2),
        shader
    );
    scene.add(quad);
    camera.position.z = 10;

    render();

    function render() {
        requestAnimationFrame(render);
        if (canvas.width !== canvas.clientWidth || canvas.height !== canvas.clientHeight) {
            renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
            camera.aspect = canvas.clientWidth /  canvas.clientHeight;
            camera.updateProjectionMatrix();
            resolution = new THREE.Vector3(canvas.clientWidth, canvas.clientHeight, 1.0);
        }
        
        
        shader.uniforms['iResolution'].value = resolution;
        shader.uniforms['iGlobalTime'].value = clock.getElapsedTime();
        shader.uniforms['iTimeDelta'].value = clock.getDelta();
        shader.uniforms['iFrame'].value = 0;
        shader.uniforms['iMouse'].value = mouse;

        renderer.render(scene, camera);
    }
</script>
stevensona commented

Thanks for the detailed report. Which platform is this on?

stevensona commented

@ircubic please update the extension and let me know if the issue is resolved.