分类导航

HTML5 发布时间：2022-04-25 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了opengl – 如何使用WebGL渲染2D Sprite？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_419_4@

我正在努力使用Dart和WebGL将2D Sprite渲染到Canvas.我在网上找到很少的例子;大多数都是3D,或包含大量的意大利面条代码,没有真正解释他们正在做什么.我正在尝试做一个渲染精灵的最简单的事情.

到目前为止,我已经设法在画布上渲染绿色方块(两个三角形).我正在努力的一点,就是如何将它从绿色方块改为使用我的纹理(纹理加载和绑定正确,我相信).我认为这需要更改着色器(采用纹理合成,而不是颜色)和某些东西来传递与缓冲区中的顶点相关的纹理坐标.

此代码 also exists in a Gist.

注意：这只是一次性的样本;大多数代码都存在于构造函数中;我对代码的整洁程度并不太感兴趣;当我在屏幕上看到一个精灵时,我可以整理一下！

注意：我对使用第三方库不感兴趣;我这样做是为了学习WebGL！

<!DOCTYPE html>
<html>
  <head>
    <title>MySecondGame</title>
  </head>
  <body>
    <canvas width="1024" height="768"></canvas>

    <div style="display: none;">
      <img id="img-player" src="assets/player.png" />
    </div>

    <script id="vertex" type="x-shader">
      attribute vec2 aVertexPosition;

      void main() {
        gl_Position = vec4(aVertexPosition,0.0,1.0);
      }
    </script>
    <script id="fragment" type="x-shader">
      #ifdef GL_ES
      precision highp float;
      #endif

      uniform vec4 uColor;

      void main() {
        gl_FragColor = uColor;
      }
    </script>

    <script type="application/dart">
      import 'dart:async';
      import 'dart:html';
      import 'dart:math';
      import 'dart:typed_data';
      import 'dart:web_gl';

      Game game;

      main() {
        game = new Game(document.querySELEctor('canvas'));
      }

      class Game {
        RenderingContext _gl;
        Buffer vbuffer;
        int numItems;
        Texture playerTexture;
        double elapsedTime;
        double fadeamount;

        Game(CanvaSELER_758_11845@ent canvas) {
          _gl = canvas.getContext3d();
          playerTexture = _gl.createTexture();
          _gl.bindTexture(TEXTURE_2D,playerTexturE);
          _gl.texImage2DUntyped(TEXTURE_2D,RGBA,UNSIGNED_BYTE,document.querySELEctor('#img-player'));
          _gl.texParameteri(TEXTURE_2D,TEXTURE_MAG_FILTER,NEAREST);
          _gl.texParameteri(TEXTURE_2D,TEXTURE_MIN_FILTER,LINEAR_MIPMAP_NEAREST);
          _gl.generateMipmap(TEXTURE_2D);
          _gl.bindTexture(TEXTURE_2D,null);

          var vsScript = document.querySELEctor('#vertex');
          var vs = _gl.createShader(VERTEX_SHADER);
          _gl.shadersource(vs,vsScript.text);
          _gl.compileShader(vs);

          var fsScript = document.querySELEctor('#fragment');
          var fs = _gl.createShader(FRAGMENT_SHADER);
          _gl.shadersource(fs,fsScript.text);
          _gl.compileShader(fs);

          var program = _gl.createProgram();
          _gl.attachShader(program,vs);
          _gl.attachShader(program,fs);
          _gl.linkProgram(program);

          if (!_gl.getShaderParameter(vs,COMPILE_STATUS))
            print(_gl.getShaderInfoLog(vs));

          if (!_gl.getShaderParameter(fs,COMPILE_STATUS))
            print(_gl.getShaderInfoLog(fs));

          if (!_gl.getProgramParameter(program,LINK_STATUS))
            print(_gl.getProgramInfoLog(program));

          var aspect = canvas.width / canvas.height;
          var vertices = new Float32List.fromList([
            -0.5,0.5 * aspect,0.5,-0.5 * aspect,// Triangle 1
            -0.5,-0.5,-0.5 * aspect   // Triangle 2
          ]);

          vbuffer = _gl.createBuffer();
          _gl.bindBuffer(ARRAY_BUFFER,vbuffer);                                       
          _gl.bufferData(ARRAY_BUFFER,vertices,STATIC_DRAW);
          numItems = vertices.length ~/ 2;

          _gl.useProgram(program);

          var uColor = _gl.getUniformLOCATIOn(program,"uColor");
          _gl.uniform4fv(uColor,new Float32List.fromList([0.0,0.3,1.0]));

          var aVertexPosition = _gl.getAttribLOCATIOn(program,"aVertexPosition");
          _gl.enabLevertexAttribArray(aVertexPosition);
          _gl.vertexAttribPointer(aVertexPosition,2,FLOAT,false,0);

          window.animationFrame.then(_gameLoop);
        }

        _gameLoop(num timE) {
          elapsedTime = time;
          _update();
          _render();
          window.animationFrame.then(_gameLoop);
        }

        _update() {
          // Use sine curve for fading. Sine is -1-1,so tweak to be 0 - 1.
          fadeamount = (sin(elapsedTime/1000) / 2) + 0.5;
        }

        _render() {
          // Set colour for clearing to.
          _gl.clearColor(fadeamount,1 - fadeamount,1.0);
          // Clear.
          _gl.clear(RenderingContext.COLOR_BUFFER_BIT);

          _gl.bindTexture(TEXTURE_2D,playerTexturE);
          _gl.drawArrays(TRIANGLES,numItems);
          _gl.bindTexture(TEXTURE_2D,null);
        }
      }
    </script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>@H_262_15@ 
 (用opengl标记这个也是因为我相信WebGL / OpenGL的解决方案可能相同).
@H_419_4@
解决方法

 好的,设法使这项工作.你可以 
 see the full diff in a gist here. 
  
 
我可能错了;但似乎我期望在我设置缓冲区时将数据设置在缓冲区中;但我找不到任何方式说哪个数据是哪个缓冲区.我将代码拆分为一些设置代码： 
  
 
vbuffer = _gl.createBuffer();
_gl.bindBuffer(ARRAY_BUFFER,vbuffer);
_gl.bufferData(ARRAY_BUFFER,STATIC_DRAW);
numItems = vertices.length ~/ 2;

tbuffer = _gl.createBuffer();
_gl.bindBuffer(ARRAY_BUFFER,tbuffer);                                       
_gl.bufferData(ARRAY_BUFFER,textureCoords,STATIC_DRAW);

aVertexPosition = _gl.getAttribLOCATIOn(program,"aVertexPosition");
_gl.enabLevertexAttribArray(aVertexPosition);

aTextureCoord = _gl.getAttribLOCATIOn(program,"aTextureCoord");
_gl.enabLevertexAttribArray(aTextureCoord);

uSampler = _gl.getUniformLOCATIOn(program,"uSampler");@H_262_15@ 
 和一些渲染代码： 
  
 
_gl.bindBuffer(ARRAY_BUFFER,vbuffer);
_gl.vertexAttribPointer(aVertexPosition,0);

_gl.bindBuffer(ARRAY_BUFFER,tbuffer);
_gl.vertexAttribPointer(aTextureCoord,0);

_gl.bindTexture(TEXTURE_2D,playerTexturE);
_gl.uniform1i(uSampler,0);

_gl.drawArrays(TRIANGLES,numItems);@H_262_15@ 
 我不完全确定这是否正确(感觉我每帧都发送相同的顶点和textureCoord),但它正在工作.
@H_419_4@
        @H_419_4@
            @H_419_4@
        	

 
@H_419_4@

 

          
       

        本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。




 编程之家官方1群(满）
 编程之家官方2群(满）
 编程之家官方3群(满)
 编程之家官方4群
 编程之家官方5群(新)
 


      
      
      
                 
        上一篇：html5 – 在容器内移动固定引导导航下一篇：如何以HTML5为中心？