Part of the Khronos Group
OpenGL.org

The Industry's Foundation for High Performance Graphics

from games to virtual reality, mobile phones to supercomputers

Results 1 to 2 of 2

Thread: Shaders in HTML

  1. #1
    Newbie Newbie
    Join Date
    Aug 2017
    Posts
    2

    Question Shaders in HTML

    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:

    Code :
    <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?


    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!

  2. #2
    Newbie Newbie
    Join Date
    Aug 2017
    Posts
    2

    Lightbulb a fix

    Might have answered my own question.. I figured out
    gl_FragCoord.xy * 2.0 - u_resolution
    works in place of surfacePosition in a pinch.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •