javascript - How do I make these triangles have no fill and only borders? -


i've tried following instructions various sources haven't had success. i'm new webgl , opengl. provided code , have been making tweaks every since. if has resources share can answer own question, appreciated!

here html:

<!doctype html> <html> <head> </head> <body>     <!--include a/s webgl support libraries-->     <script type="text/javascript" src="../common/webgl-utils.js"></script>     <script type="text/javascript" src="../common/initshaders.js"></script>     <script type="text/javascript" src="../common/mv.js"></script>     <script type="text/javascript" src="../common/webgl-debug.js"></script>     <script type="text/javascript" src="assignment1.js"></script>     <script id="vertex-shader" type="x-shader/x-vertex">         // glsl vertex shader code         attribute vec4 vposition;         void main()         {             gl_position = vposition;         }     </script>     <script id="fragment-shader" type="x-shader/x-fragment">         // glsl fragment shader code         precision mediump float;         uniform float u_time;         void main()         {             gl_fragcolor = vec4( abs(sin(u_time)), 1.0, 1.0, 1.0 );         }     </script> <canvas id="gl-canvas" width="512" height=" 512">> oops ... browser doesn't support html5 canvas element </canvas> </body> </html>

here javascript:

var gl; var points;  window.onload = function init(){     var canvas = document.getelementbyid( "gl-canvas" );      //    gl = webglutils.setupwebgl( canvas );  // more efficient     gl = webgldebugutils.makedebugcontext( canvas.getcontext("webgl") ); // debugging     if ( !gl ) { alert( "webgl isn't available" );                }      // 4 2d vertices using angel/shreiner utility class vac2     var vertices = [                    vec2(-0.5, -0.5),         vec2(-0.5, 0.5),         vec2(0.5, 0.5),         vec2(0.5, -0.5)     ];       //  configure webgl      gl.viewport(0, 0, canvas.width, canvas.height);     gl.clearcolor(0.0, 0.0, 0.0, 0.0);      //  load shaders , initialize attribute buffers using a/s utility initshaders      var program = initshaders( gl, "vertex-shader", "fragment-shader" );      gl.useprogram( program );      // load data gpu using a/s flatten function      var bufferid = gl.createbuffer();     gl.bindbuffer( gl.array_buffer, bufferid );     gl.bufferdata( gl.array_buffer, flatten(vertices), gl.static_draw );        // associate our shader variables our data buffer      var vposition = gl.getattriblocation( program, "vposition" );     gl.vertexattribpointer(         vposition, // specifies index of generic vertex attribute modified.         2,         // specifies number of components per generic vertex attribute.                     // must 1, 2, 3, or 4.          gl.float,  // specifies data type of each component in array.              // gl_byte, gl_unsigned_byte, gl_short, gl_unsigned_short, gl_fixed, or gl_float.          false,     // specifies whether fixed-point data values should normalized (gl_true)              // or converted directly fixed-point values (gl_false) when accessed.         0,         // specifies byte offset between consecutive generic vertex attributes.              // if stride 0, generic vertex attributes understood              // tightly packed in array.         0          // specifies pointer first component              // of first generic vertex attribute in array.                           );     gl.enablevertexattribarray( vposition );          render(); };  function render() {     gl.clear(gl.color_buffer_bit);     gl.drawarrays( gl.triangle_strip, 0, 4 ); }

there no easy way have outlines vs solid colors.

your options are

  1. draw lines using gl.lines

    you'll need change supply different vertices or indices depending on want draw. example you're drawing triangle_strip above draw outlined quad use line_loop 1 case. more complex shapes you'll need supply different indices.

    the problem gl.lines, gl.line_loop, , gl.line_strip webgl supports lines 1 pixel wide.

  2. make texture has outline, apply data

    this common method. you'll need learn textures , texture coordinates.

  3. make procedural texture

    this same above instead of using texture coordinates reference actual texture use texture coordinate in calculation draw color near edges of texture.

  4. compute outline in fragment shader

    there methods compute outlines in shader. require supply more data. here's one

  5. compute vertices draw outlines

    this 3d libraries (and 2d libraries) do


Comments

Post a Comment

Popular posts from this blog

angular - Ionic slides - dynamically add slides before and after -

hi i'm using ngfor create set of 3 slides while starting in middle i'm guaranteed able slide left or right on start. when slide right can simple listen reachedend , push slide array i'm looping. but have problem adding slide beginning. if same above , use e.g. array.unshift() or spread add item beginning, view think it's on position 0 , snaps view new slide. the code below work animates slide change index 1. slide = [0,1,2] //example loop slidechanged(event) { if(this.slides.isbeginning()){ this.slide = [this.slide[0]-1, ...this.slide]; this.slides.update(); this.slides.slideto(1) } } <ion-slides [initialslide]="1" (ionslidedidchange)="slidechanged($event)"> <ion-slide *ngfor="let item of slide"> <h1>slide {{item}}</h1> </ion-slide> </ion-slides> any appreciated! you can using ionslidenextend , ionslideprevend events slides . please...
Read more

Add a dynamic header in angular 2 http provider -

i have http interceptor built via tutorial https://scotch.io/@kashyapmukkamala/using-http-interceptor-with-angular2 the problem need have dynamic header changes automatically once changes 'mode' in app. service able tell interceptor change header, or have interceptor pull header (which string)from service each request. able throwing away patch method, call http.patch('new header string') set header string. call in service controls 'mode' setting. wondering if there way interceptor pull recent value service each request or if can add method http provider via interceptor? i've tried call service in interceptor each request returns undefined. because creating new instance of service or copying value before service fired , loaded/changed data. i don't want pass header string every http provider call because defeats purpose of having interceptor, id able set once changes or have provider fetch service before makes request. tl;dr : need add autom...
Read more

minify - Minimizing css files -

i want know how css files can minimized. currently, using external sites css minifier compress css files. however, after removing whitespaces, comments, etc, file sizes reduced 10-15%. how frameworks bootstrap manage make minimized versions kilobytes. as example, css is: body { background-color: #ff0; } the reduction goes 28 bytes 22 bytes other css files have lot more characters still smaller this. actually minifying code means it's remove thing code white space characters new line characters comments block delimiters it reduces amount of code has transferred on web , speed site load fastly.but unreadable format.
Read more