精华内容
下载资源
问答
  • Egret渲染模式WebGL渲染

    2021-01-26 11:27:05
    WebGL渲染1.介绍WebGL 兼容性2.使用WebGL 渲染判断当前的渲染模式#WebGL 与脏矩形#其他注意事项# 1.介绍 WebGL 是一套用于渲染 2D 和 3D 图形的标准图形库,其标准是由 Khronos、AMD、爱立信、谷歌、Mozilla、...

    1.介绍

    WebGL 是一套用于渲染 2D 和 3D 图形的标准图形库,其标准是由 Khronos、AMD、爱立信、谷歌、Mozilla、Nvidia 以及 Opera 等共同制定。

    WebGL 通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定,可以为 HTML5 Canvas 提供硬件 3D 加速渲染。 Egret Engine 2D 提供了 WebGL 渲染模式。只需开启 WebGL 渲染,就能获得硬件加速。

    WebGL 提供了底层的渲染 API,对于传统 Web 开发者来说使用 WebGL API 是比较复杂的,需要补充大量的 OpenGL ES 相关知识。 但在 Egret Engine 中使用 WebGL 却十分方便, 只需在程序开始时选择开启 WebGL 渲染。

    无需担心 WebGL 标准的兼容性问题。在开启 WebGL 渲染模式下,如果浏览器不支持将自动切换到 Canvas 渲染模式下。

    WebGL 兼容性

    使用 WebGL 渲染可以获得硬件加速渲染,提升性能。因此希望可以在所有环境中使用 WebGL 渲染。目前 WebGL 正在获得更多更广泛的支持。

    PC浏览器兼容性
    ChromeChrome 8 开始支持。
    FirefoxWebGL 在 Firefox 4 及以上版本默认支持。
    SafariSafari 5.1 开始支持 (Lion 版本系统已经使用)。
    OperaOpera 12 alpha 及以上版本。
    IEIE 11 开始支持。
    手机浏览器兼容性
    ChromeAndroidChrome 30 开始在支持 GL_EXT_robustness 扩展的设备上支持.
    腾讯x5内核QQ浏览器以及X5 tbs 2.x: android 4.0以下不支持webgl功能,4.0以上会根据手机的gl指令进行检查从而最终决定是否开启webgl功能

    2.使用

    WebGL 渲染

    在 Egret 项目根目录中可以找到 index.html 文件。该文件是 Egret 项目的入口,包含初始化设置。

    在 index.html 中有 Egret 的启动函数。如果要开启 WebGL 渲染,在其中传入参数即可,代码如下。

    egret.runEgret({ renderMode: "webgl" });
    
    

    当然也可以指定渲染模式为 Canvas :

    egret.runEgret({ renderMode: "canvas" });
    
    

    目前默认的渲染模式为 webGL。

    判断当前的渲染模式#

    可以通过 Capabilities 类的 renderMode 来判断当前的渲染模式。

    console.log(egret.Capabilities.renderMode);

    上面一行代码在 Canvas 模式下将打印 canvas,在 WebGL 模式下将打印 webgl;

    WebGL 与脏矩形#

    由于在一些浏览器上兼容性问题比较严重,目前暂时在 WebGL 下关闭了的脏矩形渲染。

    其他注意事项#

    可以在 Egret 程序的入口中开启 WebGL。如果浏览器不支持 WebGL 渲染将自动切换到 Canvas 渲染模式上。

    使用 WebGL 渲染可以得到性能提升。但在使用很多文本和矢量绘图的情况下,可能有更多的开销,起不到提升性能的作用。因为在 WebGL 渲染模式下文本和矢量绘图是需要在 Canvas 中缓存下来再渲染到 WebGL 中。由于多了在 Canvas 渲染的过程,如果使用大量的文本或者矢量绘图将不能得到相应的性能提升。

    在 WebGL 下如果要使用 Texture对象的toDataURL()方法把纹理转换为 base64 字符串,那么纹理图片应放在同一服务器下,引用不同的服务器下的资源将不成功。

    当然 WebGL 标准正在普及,在手机上有些特性支持还不是很友好。手机上非 Chrome 浏览器现在对不规则遮罩支持还不是很好,在使用 WebGL 渲染器时可以尽量避免使用不规则遮罩。

    展开全文
  • WebGL渲染2D图形

    千次阅读 2020-01-24 11:57:53
    渲染图形。WebGL现在已经是HTML5 Canvas的绘制上下文之一。 因此在使用上的流程和OpenGL ES存在了诸多相似之处,函数名和参数也几乎是相同的。 ... <canvas id="main-canvas"></...

    WebGL是OpenGL ES 2.0的Web标准,它结合JavaScript在HTML5的<canvas></canvas>上渲染图形。WebGL现在已经是HTML5 Canvas的绘制上下文之一。

    因此在使用上的流程和OpenGL ES存在了诸多相似之处,函数名和参数也几乎是相同的。

    首先需要一个进行WebGL绘制的载体。可以在html里面直接写标签,也可以在js中创建DOM。

    ...
    <canvas id="main-canvas"></canvas>
    ...
    <script>
      const mainCanvas = document.querySelector("#main-canvas");
    </script>

    接下来主要是通过getContext()获取WebGL渲染上下文: 

    function createGLContext(canvas) {
      let names = ["webgl", "experimental-webgl"];
      let context = null;
      for (let i=0; i < names.length; i++) {
        try {
          context = canvas.getContext(names[i]);
        } catch(e) {}
        if (context) {
          break;
        }
      }
      if (context) {
        context.viewportWidth = canvas.width;
        context.viewportHeight = canvas.height;
      } else {
        alert("Failed to create WebGL context!");
      }
      return context;
    }
    
    const gl = createGLContext(mainCanvas);

    当然,如果是自己平时用来测试,可以写得很简单:

    const gl = mainCanvas.getContext("webgl");

    这样,就获取到了在canvas上渲染webgl的上下文。

    接下来,在canvas上一切的渲染操作,最终都是要依靠这个gl变量来控制的。可以通过变量gl来使用WebGL API了。

    着色器准备

    需要先准备好着色器的源码,然后将源码编译、链接。

    下面准备着色器的源码。着色器(shader)是由专门的着色器语言(Shadering Language)编写的,在OpenGL ES中,使用的是GLSL(OpenGL Shadering Language,一种类C++语言)。着色器是成对出现的,分别是顶点着色器:

    <script type="notjs" id="vertex-shader-2d">
        attribute vec4 a_position;
    
        void main() {
            gl_Position = a_position;
        }
    </script>

    和片段着色器:

    <script type="notjs" id="fragment-shader-2d">
        precision mediump float;
    
        void main() {
            gl_FragColor = vec4(1, 0.3, 0.5, 1);
        }
    </script>

    顶点着色器接受一些输入,输出的是裁剪平面的顶点坐标。

    因为最终在canvas上渲染图形还是要使用JavaScript而不是GLSL,所以需要获取这些GLSL代码,然后编译处理成JavaScript的对象。

    // 获取着色器源码
    const vertex_shader_source = document.querySelector("#vertex-shader-2d").text,
        fragment_shader_source = document.querySelector("#fragment-shader-2d").text;

    先编译着色器:

    // 编译
    function setupShader(gl, type, source) {
        let shader = gl.createShader(type);    // 先创建空着色器对象
        gl.shaderSource(shader, source);       // 载入着色器源码
        gl.compileShader(shader);              // 编译
    
        let success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
        if (success) {
            return shader;
        }
    
        console.log(gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
    }

    然后链接顶点着色器和片段着色器,生成一个着色器程序的js对象:

    // 链接
    function createProgram(gl, vertexShader, fragmentShader) {
        let program = gl.createProgram();            // 先创建一个空的着色器程序
        gl.attachShader(program, vertexShader);     // 载入编译好的顶点着色器
        gl.attachShader(program, fragmentShader);   // 载入编译好的片段着色器
        gl.linkProgram(program);                     // 链接
    
        let success = gl.getProgramParameter(program, gl.LINK_STATUS);
        if (success) {
            return program;
        }
    
        console.log(gl.getProgramInfoLog(program));
        gl.deleteProgram(program);
    }

     然后调用该函数,program变量就是包含了这一对着色器源码的js对象:

    let program = createProgram(gl, vertex_shader_source, fragment_shader_source);

    因为在着色器中有一个输入值,即顶点着色器中的a_position,着色器接收输入值必须从缓冲区中获取,而获取到的值需要在着色器中的正确位置放入,所以要找到顶点着色器中a_position的位置:

    let position_attribute_location = gl.getAttribLocation(program, "a_position");

    缓冲区准备

    着色器设置好了之后,就要开始准备数据,作为着色器的输入了。

    上文说过,作为着色器的输入数据,必须是在缓冲区中的数据。而现在没有缓冲区,也没有数据,所以接下来创建这两个东西,然后把数据放入缓冲区中。

    先创建缓冲区:

    let position_buffer = gl.createBuffer();

    然后使用ARRAY_BUFFER绑定点,绑定到这个position_buffer(使用ARRAY_BUFFER说明要用顶点数组方式绘图):

    gl.bindBuffer(gl.ARRAY_BUFFER, position_buffer);

     缓冲区准备好了,接下来准备数据:

    let positions = [
        0, 0,
        0, 0.2,
        0.7, 0,
        -0.5, -0.5,
        -0.4, -0.2,
        -0.7, 0,
    ];

    然后通过ARRAY_BUFFER绑定点,将数据放到缓冲区中:

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

    准备画布

    由于WebGL的裁剪空间是一个横纵坐标都是在[-1, 1]范围内的矩形,而我们的画布的尺寸一般不是这个,所以需要作一下尺寸上的映射:

    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

     然后清空一下画布:

    gl.clearColor(0, 0, 0, 0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    渲染

    要开始渲染了。首先我们要指定着色器程序:

    gl.useProgram(program);

    然后启用a_position这个输入值(属性):

    gl.enableVertexAttribArray(position_attribute_location);

     之后准备将缓冲区的数据输送到着色器:

    var size = 2;
    var type = gl.FLOAT;
    var normalize = false;
    var stride = 0;
    var offset = 0;
    gl.vertexAttribPointer(position_attribute_location, size, type, normalize, stride, offset);

    对这里参数的说明:

    • size=2表示每次迭代读取两个数据,即x和y。由于顶点着色器中gl_Position的类型是vec4,包含x,y,z,w四个数据,而这里只需要前两个x和y。
    • type=gl_FLOAT表示使用的是32为浮点类型的数据。
    • normalize=false表示不需要归一化数据。
    • offset=0表示从缓冲区的开始位置读取数据。

    最后设置图元类型、通过drawArrays(),使用顶点数组中的顶点数据绘制:

    var primitiveType = gl.TRIANGLES;
    var offset = 0;
    var count = 6;
    gl.drawArrays(primitiveType, offset, count);

    结果:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>GLSL-test</title>
      </head>
    
      <body>
        <canvas id="main-canvas"></canvas>
    
        <!-- 顶点着色器 -->
        <script type="notjs" id="vertex-shader-2d">
          attribute vec4 a_position;
    
          void main() {
              gl_Position = a_position;
          }
        </script>
    
        <!-- 片段着色器 -->
        <script type="notjs" id="fragment-shader-2d">
          precision mediump float;
    
          void main() {
              gl_FragColor = vec4(1, 0.3, 0.5, 1);
          }
        </script>
    
        <script>
          // 全局变量
          let gl;
    
          // 准备WebGL上下文
          function prepareContext() {
            // 使用Canvas
            let main_canvas = document.querySelector("#main-canvas");
            main_canvas.setAttribute("width", "640");
            main_canvas.setAttribute("height", "640");
            gl = main_canvas.getContext("webgl");
            if (!gl) {
              alert("无法使用WebGL!");
            } else {
              console.log(gl);
            }
          }
    
          // 编译
          function setupShader(gl, type, source) {
            let shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);
    
            let success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
            if (success) {
              return shader;
            }
    
            console.log(gl.getShaderInfoLog(shader));
            gl.deleteShader(shader);
          }
    
          // 链接
          function linkShader(gl, vertexShader, fragmentShader) {
            let program = gl.createProgram();
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);
            let success = gl.getProgramParameter(program, gl.LINK_STATUS);
            if (success) {
              return program;
            }
    
            console.log(gl.getProgramInfoLog(program));
            gl.deleteProgram(program);
          }
    
          // 创建缓冲区,并填入顶点数据
          function createBuffer(data) {
            gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
          }
    
          (function main() {
            // 环境上下文准备
            prepareContext();
    
            // 着色器准备
            const vertex_shader_source = document.querySelector("#vertex-shader-2d").text,
              fragment_shader_source = document.querySelector("#fragment-shader-2d").text;
    
            // 编译
            let vertex_shader = setupShader(gl, gl.VERTEX_SHADER, vertex_shader_source),
              fragment_shader = setupShader(gl, gl.FRAGMENT_SHADER, fragment_shader_source);
    
            // 链接
            let shaderProgram = linkShader(gl, vertex_shader, fragment_shader);
            let position_attribute_location = gl.getAttribLocation(shaderProgram, "a_position");
    
            // 准备输入数据
            createBuffer([0, 0, -0.3, 0.2, 0.2, 0.5, -0.5, -0.5, -0.4, -0.2, -0.7, 0]);
    
            // 准备画布
            gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
            gl.clearColor(0, 0, 0, 0);
            gl.clear(gl.COLOR_BUFFER_BIT);
    
            // 加载着色器,准备读取缓冲区的数据
            gl.useProgram(shaderProgram);
            gl.enableVertexAttribArray(position_attribute_location);
            gl.vertexAttribPointer(position_attribute_location, 2, gl.FLOAT, false, 0, 0);
    
            // 执行绘制
            gl.drawArrays(gl.TRIANGLES, 0, 6);
          })();
        </script>
      </body>
    </html>

    参考

    https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API/Tutorial

    https://webglfundamentals.org/webgl/lessons/zh_cn/

    https://thebookofshaders.com/?lan=ch

    展开全文
  • 在本周进行开发时,我遇到了WebGL不能跨域渲染图片的问题。 图片是以这样的方式获取的: 'http://xxx.xxx.xxxx/get_img?id=1' 如何在不能使用服务器转发的情况下,解决跨域渲染问题呢? 设计思路 最原始的LoadImage...

    开始之前

    在本周进行开发时,我遇到了WebGL不能跨域渲染图片的问题。
    图片是以这样的方式获取的:

    'http://xxx.xxx.xxxx/get_img?id=1'
    

    如何在不能使用服务器转发的情况下,解决跨域渲染问题呢?

    设计思路

    最原始的LoadImage:

    Graphics.loadImage = function(src){
      return new Promise((resolve) => {
        Graphics._image = new Image();
        Graphics._image.addEventListener('load', resolve);
        Graphics._image.src = src;
      });
    };
    

    Canvas的权限没有WebGL那么严格,所以我想到了利用Canvas进行一次中转。
    但同时又要保证async正常工作。
    另外上面的代码其实还有一个历史遗留问题,就是忘记了removeEventListener,在这里一并解决:

    Graphics.loadImage = function(src){
      return new Promise((resolve) => {
        Graphics._image = new Image();
        //允许Canvas跨域渲染
        Graphics._image.setAttribute("crossOrigin",'anonymous')
        let func1 = function(){
          let canvas = document.createElement('canvas');
          let ctx = canvas.getContext('2d');
          canvas.width = Graphics._image.width;
          canvas.height = Graphics._image.height;
          ctx.drawImage(Graphics._image, 0, 0);
          Graphics._image.removeEventListener('load', func1);
          let func2 = function(){
            Graphics._image.removeEventListener('load', func2);
            resolve();
          }
          Graphics._image.addEventListener('load', func2);
          Graphics._image.src = canvas.toDataURL();
        }
        Graphics._image.addEventListener('load', func1);
        Graphics._image.src = src;
      });
    };
    
    展开全文
  • 为了表面有石头纹样效果,找一张大理石图片做贴图过滤一下颜色;魔改一下光照模型,贴图过滤diffuse而不过滤specular,这样使得表面反色不受影响而产生表面光滑的效果; 片元着色器 ... fragColor = vec4...

    水晶体效果

    本文示例用随机几何体、光照、纹理贴图、着色器整合起来绘制一个水晶簇。通过调整着色器,可以产生岩浆、蓝宝石等各种效果。

    示例效果图:

    27个单晶45度随机分布的蓝色水晶簇。

    uv

    77个单晶180度随机分布的红色水晶簇。

    uv

    制作随机水晶体生成器

    很多三维库的几何体基本都是规则几何体,没有随机的美感,因此捣鼓了一个随机水晶生成器,源码地址:github.com/guoweish/ve…

    实现思路如下:

    • 生成单个水晶顶点

    uv

    • 生成水晶簇顶点

    uv

    实现步骤如下:

    • 一个圆周上取多边形点,使用随机角度,形成不同宽度面
      ...
      angle = i / faceNumber * PI * 2 + r * angleDithringFactor * angleDithringUnit;
      px = Math.sin(angle) * polygonCircleRadius;
      py = Math.cos(angle) * polygonCircleRadius;
      ...
    复制代码
    • 随机缩放圆半径,圆周上同角度取多边形点,形成不同柱体半径
      ...
      pxd = Math.sin(angle) * polygonCircleRadius* (circleRadiusDithringFactor + radiusDithringDistance);
      pyd = Math.cos(angle) * polygonCircleRadius* (circleRadiusDithringFactor + radiusDithringDistance);
      ...
    复制代码
    • 形成多边形棱柱的上下两层顶点
      ...
      vertexs.topPositions.push(px);
      vertexs.topPositions.push(py);
      ...
    复制代码
    • 增加正对圆心的顶点,形成水晶柱顶点
      ...
      vertexsCon = [0, cylinderHeight+conHeight, 0];
      ...
    复制代码
    • 生成一个水晶体几何体
      ...
      vertexs = [...vertexsCylinderDown, ...vertexsCylinderTop, ...vertexsCon];
      ...
    复制代码
    • 矩阵变换缩放、旋转单个水晶体的顶点,并复制顶点
      ...
      let scaleMatrix = new Matrix4();
      scaleMatrix.setScale(scaleFactor, scaleFactor, scaleFactor);
      let rotateMatrix = new Matrix4();
      rotateMatrix.setRotate(rotateAngle, rotateCenter.x, rotateCenter.y, rotateCenter.z);
      ...
      let vScaledRotated = rotateMatrix.multiplyVector4(vScaled);
      ...
    复制代码
    • 生成水晶簇几何体
      ...
      let extendedIndices = extendIndices(cristalTransformed.indices, currentIndicesLength);
      cluster.indices = cluster.indices.concat(extendedIndices);
      cluster.positions = cluster.positions.concat(cristalTransformed.positions);
      cluster.uvs = cluster.uvs.concat(cristal.uvs);
      ...
    复制代码

    渲染几何体

    用纯色shader简单渲染一下是否顶点和索引正确;

    • 片元着色器
      fragColor = vec4(0.6, 0.6, 0.6, 1.0);
    复制代码

    uv

    添加光照

    增加光照,使用Blinn-Phong模型;

    • 片元着色器
      vec3 diffuse = max(dot(normal, ec_lightDirection), 0.0) * lightColor * lightIntensity * baseColor;
    
      vec3 viewDirection = -normalize(ec_position);
      vec3 halfAngle = normalize(viewDirection + ec_lightDirection);
      float specularFactor = clamp(dot(normal, halfAngle), 0.0, 1.0);
      float spec = pow(specularFactor, specularIntensity);
      vec3 specular = clamp(spec * specularColor, 0.0, 1.0);
    
      fragColor = vec4(diffuse + specular + ambient, 1.0);
    复制代码

    着色器添加渐变的祖母绿效果

    为了看上去像祖母绿宝石效果,用纹理做一个渐变;用pow函数使得渐变非线性,用mix函数融合得颜色,看上去效果更自然;

    • 片元着色器
      ...
      float colorMixFactor = pow(v_uv.y, 3.0);
      ...
      vec3 baseColor = mix(CRISTAL_COLOR, GEM_COLOR_GREEN,  colorMixFactor);
      ...
    复制代码

    uv

    使用贴图增强表面细节

    为了表面有石头纹样效果,找一张大理石图片做贴图过滤一下颜色;魔改一下光照模型,贴图过滤diffuse而不过滤specular,这样使得表面反色不受影响而产生表面光滑的效果;

    • 片元着色器
      ...
      fragColor = vec4(diffuse + diffuse * textureFilter + specular + AMB_COLOR, 1.0);
    复制代码

    uv

    结语

    可以使用perlin噪音和fbm让随机几何体的视觉效果自然,比如大小个体比例和空间位置的分布;光照可以改用pbr模型,比Blinn-Phong会更好,计划下一篇更新尝试(希望有空填坑-_-!!)。

    关于作者

    郭不耐 github.com/guoweish

    参考文献

    Webgl Programing Guide

    OpenGl Shading Language

    The Book of Shaders

    ShaderToy

    转载于:https://juejin.im/post/5c7290b36fb9a049b07dfb98

    展开全文
  • WebGL加载图片

    千次阅读 2018-11-15 18:42:50
    WebGL目前已经被大多数浏览器所支持,但是不同浏览器对图片文件的加载都所以差异。加载文件分为使用web服务器端数据和本地数据两种方式,以下就此问题进行讨论。 关键字(key words) WebGL, Image, Texture, ...
  • 案例查看地址:点击这里WebGL的另一项强大的技术,使用WebGL渲染三维图形,然后将渲染结果作为纹理贴到另一个三维物体上去。实际上,把渲染结果作为纹理使用,就是动态地生成图像,而不是向服务器请求加载外部图像。...
  • WebGL渲染的三维图像作为纹理

    千次阅读 2019-01-11 15:09:53
    WebGL渲染三维图形,然后将渲染结果做为纹理贴到另一个三维物体上去。实际上,把渲染结果作为纹理使用,就是动态的生成图像,而不是向服务器请求加载外部图像。在纹理图像被贴上图形之前,我们还可以对其做一些额外...
  • webGL图片纹理

    2020-09-04 18:49:31
    webGL几何坐标系:x(-1, 1) y(-1, 1) gl.createTexture() —— 创建并初始化一个WebGLTexture对象,即创建一个纹理; gl.bindTexture(target, texture) 将给定的texture绑定到目标,其中texture参数为创建的纹理...
  • WebGL:显示图片

    2020-08-20 14:20:28
    WebGL显示图片 简述 WebGL显示图片相对来说还是比较简单,跟Android,Python,IOS,C++等的用法都是差不多的,具体的opengl概念可以自己搜索。下面的介绍主要是基于Vue框架来设计做的Demo,不用vue的也可以简单的把...
  • WebGL文字渲染的那些问题

    千次阅读 2018-04-17 00:04:00
    通常解决纹理频繁更新问题就要用到one draw all方法,放到纹理上就是把所有纹理图片生成一张大图片的方式   一、阻止纹理重复上传  我们需要一张大纹理,先将所有的内容绘制在大纹理上,需要显示局部纹理的时候...
  • webgl的使用过程中,我们通常会想对texture进行多级处理并对其贴在表面显示 如对较精准的边缘检测,要先后使用灰度shader、模糊shader、边缘shader来进行处理,而每次的处理对象则是上一次处理后的texture,这...
  • [WebGL入门]四,渲染准备

    万次阅读 多人点赞 2014-07-31 00:21:32
    使用WebGL进行3D渲染,这次说了下面几个必须要做的准备。 最低限度,需要HTML,canvas标签,处理WebGL的javascript代码,顶点着色器和片段着色器的代码。 另外,比如要描画3D模型的模型数据,图片文件等当然有时候也...
  • WebGL 单通道wireframe渲染

    千次阅读 2018-08-28 12:03:30
    不过在实际的图形渲染中,边的宽度不可能是0,而应该是一个大于0的值,所以一般可以指定一个要绘制的线宽width,如果任何一个点的重心坐标(x,y,z)中的人一个分量的值小于这个线宽width,可以认为在边上。...
  • 1、使用谷歌浏览器打开html文件,报错ncaught Error: WebGL unsupported in this browser 解决: 改用火狐浏览器 或者Microsoft Edge浏览器, 参考:https://github.com/pixijs/pixi.js/issues/5694 ...
  • 在原始WebGL 2中实现不同复杂度的渲染算法
  • WebGL可以加载图片纹理,图片可以根据设定的坐标变化,设置图片的尺寸等等。 一般在加载图片的时候,关键的是设置图片的像素位置坐标,如下边的坐标形式,按照顺序排列图片的位置。 图片的像素位置设置好以后,设置...
  • WebGL——粒子化图片

    2019-08-21 04:04:16
    最近在学习webGL原生,给的3d项目又不是很多,就想到了其实2d的项目也可以拿webGL练习,在接到这个项目之后,脑子里蹦出个要做出粒子的效果,大致思路已经有了,就是获取图片的有效像素作为point的xy坐标,z轴的不同...
  • webgl的初见(二维) 你是谁? WebGL经常被当成3D API,人们总想“我可以使用WebGL和一些神奇的东西做出炫酷的3D作品”。 事实上WebGL仅仅是一个光栅化引擎,它可以根据你的代码绘制出点,线和三角形。 想要利用...
  • 在web端上,渲染循环的关键调用函数是:requestAnimationFrame 函数的说明:该函数提供一个回调处理,承诺在在下一帧重绘之前调用传入回调函数
  • webgl——使用FBO实现离屏渲染

    千次阅读 2017-09-09 17:06:00
    在3D应用中我们经常会使用离屏渲染来进一步绘制场景...在OpenGLES当中使用FBO实现离屏渲染的案例已经有很多了,当我想将其移植到WebGL当中时却发现可供参考的案例十分的少,于是我花了几天时间研究,并在这里做以总结。
  • html5+webgl 三维街景的渲染

    千次阅读 2012-04-12 17:48:24
    又看到google街景和soso街景效果很炫,就产生了小试牛刀的想法,我何不把手头的图片变成渲染成三维街景放到网上呢。于是开始搜集相关信息,经过5天的尝试,终于有了初步的效果;  首先,感谢...
  • 本文作者:木的树关于小区域水波渲染以及焦散的技术原理,推荐下面两篇资源:https://github.com/martinRenou/threejs-causticshttps://zh...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,149
精华内容 2,059
关键字:

webgl渲染图片