PDA

View Full Version : Shaders in HTML



PeteAJ
08-01-2017, 11:24 AM
Hi! I'm new here but very interested in opengl. I have a glsl question about using varyings but this might boil down to an editor issue. I am looking at the book of shaders and using their editor (http://editor.thebookofshaders.com/). I set up so I could open what I was doing there in three.js in a html file. For instance:


<html>
<head>
</head>
<body>
<body>
<div id="container"></div>
<script src="js/three.min.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
void main() {
gl_Position = vec4( position, 1.0 );
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">

#ifdef GL_ES
precision mediump float;
#endif

#extension GL_OES_standard_derivatives : enable

uniform float u_time;
uniform vec2 mouse;
uniform vec2 u_resolution;

void main( void ) {

vec2 position = (surfacePositon+ gl_FragCoord.xy / u_resolution.xy ) + mouse / 4.0;

float color = 0.0;
color += sin( position.x * cos( u_time / 15.0 ) * 80.0 ) + cos( position.y * cos( u_time / 15.0 ) * 10.0 );
color += sin( position.y * sin( u_time / 10.0 ) * 40.0 ) + cos( position.x * sin( u_time / 25.0 ) * 40.0 );
color += sin( position.x * sin( u_time / 5.0 ) * 10.0 ) + sin( position.y * sin( u_time / 35.0 ) * 80.0 );
color *= sin( u_time / 10.0 ) * 0.5;

gl_FragColor = vec4( vec3( u_time*color, color * 0.05, sin( color + u_time / 300.0 ) * 0.75 ), 1.0 );

}

</script>
<script>
var container;
var camera, scene, renderer;
var uniforms;

init();
animate();

function init() {
container = document.getElementById( 'container' );

camera = new THREE.Camera();
camera.position.z = 1;

scene = new THREE.Scene();

var geometry = new THREE.PlaneBufferGeometry( 2, 2 );

uniforms = {
u_time: { type: "f", value: 1.0 },
u_resolution: { type: "v2", value: new THREE.Vector2() },
u_mouse: { type: "v2", value: new THREE.Vector2() }
};

var material = new THREE.ShaderMaterial( {
uniforms: uniforms,
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent
} );

var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );

container.appendChild( renderer.domElement );

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

document.onmousemove = function(e){
uniforms.u_mouse.value.x = e.pageX
uniforms.u_mouse.value.y = e.pageY
}
}

function onWindowResize( event ) {
renderer.setSize( window.innerWidth, window.innerHeight );
uniforms.u_resolution.value.x = renderer.domElement.width;
uniforms.u_resolution.value.y = renderer.domElement.height;
}

function animate() {
requestAnimationFrame( animate );
render();
}

function render() {
uniforms.u_time.value += 0.05;
renderer.render( scene, camera );
}
</script>


</body>
</html>


This opens in a browser! But if I add a varying vec2 it won't run. I was further looking at some fun examples on glslsandbox that I'd love to play with but I keep coming across a varying vec2 surfacePosition;. For instance: http://glslsandbox.com/e#41452.1. I found a little about what this varying does here (https://stackoverflow.com/questions/35617892/what-is-surfaceposition-varying-in-glslsandbox-com) but would quite like to utilize it in the Book of Shaders editor because I like being able to push what I've done to a browser window. Is the answer that I can't use varyings with this editor?


1. Does anyone have suggestions for a translation for surfacePosition? I was hoping I could say something like gl_Fragcoord.xy/u_resolution.xy in its place.
2. Can I convert varyings to uniforms? (Please excuse my inexperience here)
3. If anyone had other suggestions of things to try or editors to use? I'm guessing there's things this editor isn't set up to do?

Thanks kindly!

PeteAJ
08-03-2017, 04:05 PM
Might have answered my own question.. I figured out
gl_FragCoord.xy * 2.0 - u_resolution works in place of surfacePosition in a pinch.