regl-project / regl

👑 Functional WebGL
MIT License
5.19k stars 320 forks source link

Missing context in CDN version? #540

Open munrocket opened 4 years ago

munrocket commented 4 years ago

Steps to reproduce: 1) Add REGL from CDN: https://cdn.jsdelivr.net/npm/regl@1.3.11/dist/regl.js 2) Create some code with context parameters in regl.texture() scope

const regl = createREGL();
const tex0 = regl.texture({
    width: regl.context('drawingBufferWidth'),
    height: regl.context('drawingBufferHeight'),
    type: 'float'
});

//or

const tex1 = regl.texture({
    width: regl.context('width'),
    height: regl.context('height'),
    type: 'float',
    context: {
        width: (ctx) => { return ctx.clientWidth },
        height: (ctx) => { return ctx.clientHeight },
    }
});

3) Get an error

suvarchal commented 2 years ago

@munrocket i guess it would be more useful to post the console log error, in following re-execution i am not sure if it is my hardware or regl:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script src="https://npmcdn.com/regl/dist/regl.js"></script>
<script>
    var canvas = document.querySelector("#myCanvas");
    var gl = canvas.getContext("webgl");
    var ext = gl.getExtension("OES_texture_float");
    if (!ext) {
        alert("this machine or browser does not support OES_texture_float");
    }

    var regl = createREGL(canvas);

    const tex0 = regl.texture({
        width: regl.context('drawingBufferWidth'),
        height: regl.context('drawingBufferHeight'),
        type: 'float'
    });
    //or

    const tex1 = regl.texture({
        width: regl.context('width'),
        height: regl.context('height'),
        type: 'float',
        context: {
            width: (ctx) => { return ctx.clientWidth },
            height: (ctx) => { return ctx.clientHeight },
        }
    });

</script>

</body>
</html>

gives me error in console Error: (regl) you must enable the OES_texture_float extension in order to use floating point textures. while i tried to set `OES_texture_float`.

suvarchal commented 2 years ago

enable extensions using extensions arg during init fixed above issue and following code works

var regl = createREGL({extensions: ['oes_standard_derivatives', 'oes_texture_float']});

    const tex0 = regl.texture({
        width: 800,
        height: 600,
        type: 'float'
    });