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. 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 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?
- 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.
- Can I convert varyings to uniforms? (Please excuse my inexperience here)
- 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!