Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Minimum changes to glsl-sandbox to get WebGL 2.0 working #51

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Minimum changes to glsl-sandbox to get WebGL 2.0 working #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d1d2d71
Minimum change to glsl-sandbox to get WebGL 2.0 working
Spaxe Apr 12, 2017
a592e95
Added WebGL 1.0 backwards support for mobile phones and older devices
Spaxe Apr 12, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
153 changes: 118 additions & 35 deletions static/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,14 +63,15 @@
<script src="js/codemirror.js"></script>
<script src="js/glsl.js"></script>

<script id="example" type="x-shader/x-fragment">precision mediump float;

#extension GL_OES_standard_derivatives : enable
<script id="example" type="x-shader/x-fragment">#version 300 es
precision mediump float;

uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;

out vec4 fragColor;

void main( void ) {

vec2 position = ( gl_FragCoord.xy / resolution.xy ) + mouse / 4.0;
Expand All @@ -81,14 +82,14 @@
color += sin( position.x * sin( time / 5.0 ) * 10.0 ) + sin( position.y * sin( time / 35.0 ) * 80.0 );
color *= sin( time / 10.0 ) * 0.5;

gl_FragColor = vec4( vec3( color, color * 0.5, sin( color + time / 3.0 ) * 0.75 ), 1.0 );
fragColor = vec4( vec3( color, color * 0.5, sin( color + time / 3.0 ) * 0.75 ), 1.0 );

}</script>
}
</script>

<script id="fragmentShader" type="x-shader/x-fragment">

precision mediump float;

uniform vec2 resolution;
uniform sampler2D texture;

Expand All @@ -101,24 +102,65 @@

</script>

<script id="vertexShader" type="x-shader/x-vertex">
<script id="fragmentShader300es" type="x-shader/x-fragment">#version 300 es

precision mediump float;

uniform vec2 resolution;
uniform sampler2D tex;

out vec4 fragColor;

void main() {

vec2 uv = gl_FragCoord.xy / resolution.xy;
fragColor = texture( tex, uv );

}

</script>

<script id="vertexShader" type="x-shader/x-vertex">
attribute vec3 position;

void main() {

gl_Position = vec4( position, 1.0 );

}

</script>

<script id="surfaceVertexShader" type="x-shader/x-vertex">

attribute vec3 position;
attribute vec2 surfacePosAttrib;
varying vec2 surfacePosition;

void main() {

surfacePosition = surfacePosAttrib;
gl_Position = vec4( position, 1.0 );

}
</script>

<script id="vertexShader300es" type="x-shader/x-vertex">#version 300 es

in vec3 position;

void main() {

gl_Position = vec4( position, 1.0 );

}

</script>

<script id="surfaceVertexShader300es" type="x-shader/x-vertex">#version 300 es

in vec3 position;
in vec2 surfacePosAttrib;
out vec2 surfacePosition;

void main() {

surfacePosition = surfacePosAttrib;
Expand All @@ -130,6 +172,13 @@

<script>

var startingFragmentShader = '5d00000100b70200000000000000381c88cdaf8125d4569ed1e6e6c09c2fe72b7d489ad9d27ce026c1d90b38e6a986e7c482f98001c7d016ca8db7da32debe67fc602659f4e96ae150d75ea26ae8e8f4056e0b845d0814a2acee3a47ec45af66fb0405385eaedd50db968497c1cbbd79f0634d5534182b2093986dae5ac7e840eb137f39f5b27efbb488f4e85faa6f4c942182673e75dca44f7ffbd8c25c5a2763cb750b9b4e14b9fd5c15ca81ed7ef88a4f77a114cd2d7f675b6a05b467bd164f4058dd3250e6fcdc9d7c195dccdc63b304e1f8c7aaccb1edb7992aa1341e96aa6e8b1ca044e70207be752de1b41e4e07843ab895b2a1995b97085afff70f5eff9d2b630a4c5e43e7ce6f977616d57c97935342e48d0ee9ad3462804ae5608b6872b9749632bf8514fea3ebf9d64b10deb3ff041395050deffbf038e3';

var startingFragmentShader300es = '5d00000100a90200000000000000119d88a75623ed1f97decafdbca9f60d5d9aea5c15090d6b99d1bf278123255f7071406b0031147756a95f17500c89f6bb5b982f2996ce0eeec087a302f677faa8ff536d4904bd9e7deb9045d178189362a624333f49df388b60d0d4a174e5d774706548f6322bbca185d84070b143366137ea50788b60c695e83c44b476a2ca324430e11650bb06cc89bc7a19bfd7b93c1a5d382895d9db4865ff7514599a0c6ef3e5e4b232372ee947a42811132b7fa30d635c41c253def1996f6bf984204573e8dc43594c7c9446628b75e9b3ec3c79e14df44b5644785e0ec9ab4ad858a873a001868a7a49ab5d9ad3c7dd40b28e4dc1a4965078b9ce03a8ff5e2fd312cf7031476ad29a4edf64fe07de6907e00913a59f97834d305b9b8c4ffa85b049';

var gl;
var glVersion;

initialize_helper();

var compressor=initialize_compressor();
Expand Down Expand Up @@ -286,19 +335,31 @@
add_server_buttons();

// Initialise WebGL
var contextAttributes = { preserveDrawingBuffer: true };

try {

gl = canvas.getContext( 'experimental-webgl', { preserveDrawingBuffer: true } );
gl = canvas.getContext( 'webgl2', contextAttributes )
|| canvas.getContext( 'webgl', contextAttributes )
|| canvas.getContext( 'experimental-webgl', contextAttributes );

} catch( error ) { }
} catch ( error ) { }

if ( !gl ) {

alert("WebGL not supported, but code will be shown.");

} else {


// Version string looks like "WebGL x.0 (...)"
var versionString = gl.getParameter(gl.VERSION).substr(0, 9);
console.info("Rendering using", versionString);
if (versionString === "WebGL 2.0") {
glVersion = 2.0;
} else { // go for lowest
glVersion = 1.0;
}

// enable dFdx, dFdy, fwidth
gl.getExtension('OES_standard_derivatives');

Expand Down Expand Up @@ -351,7 +412,7 @@
event.preventDefault();
}
}, false );

if (gl) {

var surfaceMouseDown = function ( event ) {
Expand Down Expand Up @@ -387,7 +448,7 @@
canvas.addEventListener( 'contextmenu', noContextMenu, false);
panButton.addEventListener( 'contextmenu', noContextMenu, false);
}

var clientXLast, clientYLast;

document.addEventListener( 'mousemove', function ( event ) {
Expand All @@ -404,10 +465,10 @@
stopHideUI();

var codeElement, dx, dy;

parameters.mouseX = clientX / window.innerWidth;
parameters.mouseY = 1 - clientY / window.innerHeight;

if (resizer.isResizing) {

resizer.currentWidth = Math.max(Math.min(clientX - resizer.offsetMouseX, resizer.maxWidth), resizer.minWidth);
Expand Down Expand Up @@ -460,7 +521,18 @@

onWindowResize();
window.addEventListener( 'resize', onWindowResize, false );
load_url_code();

// Depending on the WebGL version, we load a different starting fragment
// shader.
if (glVersion >= 2.0) {

load_url_code(startingFragmentShader300es);

} else {

load_url_code(startingFragmentShader);

}

compileScreenProgram();

Expand Down Expand Up @@ -517,9 +589,9 @@
if (gl) {

surface.width = surface.height * parameters.screenWidth / parameters.screenHeight;

var halfWidth = surface.width * 0.5, halfHeight = surface.height * 0.5;

gl.bindBuffer( gl.ARRAY_BUFFER, surface.buffer );
gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( [
surface.centerX - halfWidth, surface.centerY - halfHeight,
Expand All @@ -542,11 +614,11 @@
}

function compile() {

if (!gl) {

if (!getWebGL) {

getWebGL = true;
compileButton.addEventListener( 'click', function ( event ) {

Expand All @@ -557,15 +629,20 @@
compileButton.style.color = '#ff0000';
compileButton.textContent = 'WebGL not supported!';
set_save_button('hidden');

}
return;

}

var program = gl.createProgram();
var fragment = code.getValue();
var vertex = document.getElementById( 'surfaceVertexShader' ).textContent;

if (glVersion >= 2.0) {
var vertex = document.getElementById( 'surfaceVertexShader300es' ).text.trim();
} else {
var vertex = document.getElementById( 'surfaceVertexShader' ).text.trim();
}

var vs = createShader( vertex, gl.VERTEX_SHADER );
var fs = createShader( fragment, gl.FRAGMENT_SHADER );
Expand Down Expand Up @@ -636,12 +713,18 @@
}

function compileScreenProgram() {

if (!gl) { return; }

var program = gl.createProgram();
var fragment = document.getElementById( 'fragmentShader' ).textContent;
var vertex = document.getElementById( 'vertexShader' ).textContent;

if (glVersion >= 2.0) {
var fragment = document.getElementById( 'fragmentShader300es' ).text.trim();
var vertex = document.getElementById( 'vertexShader300es' ).text.trim();
} else {
var fragment = document.getElementById( 'fragmentShader' ).text.trim();
var vertex = document.getElementById( 'vertexShader' ).text.trim();
}

var vs = createShader( vertex, gl.VERTEX_SHADER );
var fs = createShader( fragment, gl.FRAGMENT_SHADER );
Expand Down Expand Up @@ -740,7 +823,7 @@


//

function htmlEncode(str){

return String(str)
Expand All @@ -755,7 +838,7 @@
//

function createShader( src, type ) {

var shader = gl.createShader( type );
var line, lineNum, lineError, index = 0, indexEnd;

Expand All @@ -773,7 +856,7 @@
if ( !gl.getShaderParameter( shader, gl.COMPILE_STATUS ) ) {

var error = gl.getShaderInfoLog( shader );

// Remove trailing linefeed, for FireFox's benefit.
while ((error.length > 1) && (error.charCodeAt(error.length - 1) < 32)) {
error = error.substring(0, error.length - 1);
Expand Down Expand Up @@ -851,11 +934,11 @@
computeSurfaceCorners();

if (gl) {

gl.viewport( 0, 0, canvas.width, canvas.height );

createRenderTargets();

}
}

Expand Down Expand Up @@ -886,7 +969,7 @@

gl.bindBuffer( gl.ARRAY_BUFFER, surface.buffer );
gl.vertexAttribPointer( surface.positionAttribute, 2, gl.FLOAT, false, 0, 0 );

gl.bindBuffer( gl.ARRAY_BUFFER, buffer );
gl.vertexAttribPointer( vertexPosition, 2, gl.FLOAT, false, 0, 0 );

Expand All @@ -909,7 +992,7 @@

gl.bindBuffer( gl.ARRAY_BUFFER, buffer );
gl.vertexAttribPointer( screenVertexPosition, 2, gl.FLOAT, false, 0, 0 );

gl.activeTexture( gl.TEXTURE1 );
gl.bindTexture( gl.TEXTURE_2D, frontTarget.texture );

Expand Down
5 changes: 3 additions & 2 deletions static/js/helpers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ function initialize_compressor() {
function initialize_helper() {
}

function load_url_code() {
function load_url_code( lzma_compressed_code ) {
if ( window.location.hash ) {

var hash = window.location.hash.substr( 1 );
Expand All @@ -29,7 +29,8 @@ function load_url_code() {

} else {

readURL( '5d00000100b70200000000000000381c88cdaf8125d4569ed1e6e6c09c2fe72b7d489ad9d27ce026c1d90b38e6a986e7c482f98001c7d016ca8db7da32debe67fc602659f4e96ae150d75ea26ae8e8f4056e0b845d0814a2acee3a47ec45af66fb0405385eaedd50db968497c1cbbd79f0634d5534182b2093986dae5ac7e840eb137f39f5b27efbb488f4e85faa6f4c942182673e75dca44f7ffbd8c25c5a2763cb750b9b4e14b9fd5c15ca81ed7ef88a4f77a114cd2d7f675b6a05b467bd164f4058dd3250e6fcdc9d7c195dccdc63b304e1f8c7aaccb1edb7992aa1341e96aa6e8b1ca044e70207be752de1b41e4e07843ab895b2a1995b97085afff70f5eff9d2b630a4c5e43e7ce6f977616d57c97935342e48d0ee9ad3462804ae5608b6872b9749632bf8514fea3ebf9d64b10deb3ff041395050deffbf038e3' );
// This is the default code to be loaded
readURL( lzma_compressed_code );

}
}
Expand Down