首页 / WEBGL / javascript-如何在webgl中获得像素化效果？

javascript-如何在webgl中获得像素化效果？

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript-如何在webgl中获得像素化效果？，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含10503字，纯文字阅读大概需要16分钟。

内容图文

我想在webgl中模拟像atari或commodore这样的旧PC低分辨率的效果,是否可以绘制图像,然后如何使像素变大？

我是webgl的新手,应该如何开始这种效果？

我发现this有马赛克效果,但是它使用three.js,我想在没有框架的情况下进行.

解决方法:

有很多方法可以做到这一点.最简单的方法是通过将其附加到帧缓冲区来渲染为低分辨率的纹理,然后将纹理过滤设置为NEAREST将该纹理渲染到画布上.

这是一个样本.它使用的不是框架而是TWGL,只是使WebGL不再冗长的助手.如果您想将其翻译为详细的原始webgl,请参阅注释(和docs).

如果您是webgl I’d suggest starting here的新手

const vs = `
attribute vec4 position;
uniform mat4 u_matrix;

void main() {
   gl_Position = u_matrix * position;
}
`;
const fs = `
void main() {
  gl_FragColor = vec4(0, 0, 0, 1); // black
}
`;

const vs2 = `
attribute vec4 position;
attribute vec2 texcoord;

uniform mat4 u_matrix;

varying vec2 v_texcoord;

void main() {
   gl_Position = u_matrix * position;
   v_texcoord = texcoord;
}
`;
const fs2 = `
precision mediump float;
varying vec2 v_texcoord;
uniform sampler2D u_texture;
void main() {
  gl_FragColor = texture2D(u_texture, v_texcoord);
}
`;

"use strict";
const m4 = twgl.m4;
const gl = document.querySelector("canvas").getContext("webgl");
// compiles shaders, links program, looks up locations
const cubeProgramInfo = twgl.createProgramInfo(gl, [vs, fs]);
const texProgramInfo = twgl.createProgramInfo(gl, [vs2, fs2]);

const cubeArrays = {
  position: [
    1, 1, -1, 1, 1, 1, 1, -1, 1, 1, -1, -1, -1, 1, 1, -1, 1, -1, -1, -1, -1, -1, -1, 1, -1, 1, 1, 1, 1, 1, 1, 1, -1, -1, 1, -1, -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1, 1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, -1, 1, -1, 1, 1, -1, 1, -1, -1, -1, -1, -1],
  indices:  [
    0, 1, 1, 2, 2, 3, 3, 0, 
    4, 5, 5, 6, 6, 7, 7, 4, 
    8, 9, 9, 10, 10, 11, 11, 8,
    12, 13, 13, 14, 14, 15, 15, 12,
  ],
};
const quadArrays = {
  position: {
    numComponents: 2,
    data: [
      0, 0,
      1, 0,
      0, 1,
      0, 1,
      1, 0,
      1, 1,
    ],
  },
  texcoord: [
    0, 0,
    1, 0,
    0, 1,
    0, 1,
    1, 0,
    1, 1,
  ],
};
// calls gl.createBuffer, gl.bindBuffer, gl.bufferData for each array
const cubeBufferInfo = twgl.createBufferInfoFromArrays(gl, cubeArrays);
const quadBufferInfo = twgl.createBufferInfoFromArrays(gl, quadArrays);

const fbWidth = 32;
const fbHeight = 32;
// make a 32x32 pixel texture
const cubeTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, fbWidth, fbHeight, 0,
              gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

// create a depth renderbuffer
const depthBuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, depthBuffer);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, fbWidth, fbHeight);

// create a framebuffer
const fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);

// attach the texture and depth buffer to the framebuffer
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, cubeTexture, 0);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, depthBuffer);

function render(time) {
  time *= 0.001;
  twgl.resizeCanvasToDisplaySize(gl.canvas);

  // draw cube

  // this makes WebGL render to the texture and depthBuffer
  // all draw calls will render there instead of the canvas
  // until we bind something else.
  gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
  gl.viewport(0, 0, fbWidth, fbHeight);
  {
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    
    const fov = 30 * Math.PI / 180;
    const aspect = fbWidth / fbHeight;
    const zNear = 0.5;
    const zFar = 40;
    const projection = m4.perspective(fov, aspect, zNear, zFar);
    const eye = [1, 4, -7];
    const target = [0, 0, 0];
    const up = [0, 1, 0];

    const camera = m4.lookAt(eye, target, up);
    const view = m4.inverse(camera);
    const viewProjection = m4.multiply(projection, view);
    const world = m4.rotationY(time);

    gl.useProgram(cubeProgramInfo.program);
    
    // calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
    twgl.setBuffersAndAttributes(gl, cubeProgramInfo, cubeBufferInfo);
    // calls gl.uniformXXX
    twgl.setUniforms(cubeProgramInfo, {
      u_matrix: m4.multiply(viewProjection, world),
    });
    // calls gl.drawArrays or gl.drawElements
    twgl.drawBufferInfo(gl, cubeBufferInfo, gl.LINES);
  }
  
  // this make WebGL render to the canvas
  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  {
     const displayWidth = gl.canvas.clientWidth;
     const displayHeight = gl.canvas.clientHeight;
     const drawHeight = displayHeight;
     const drawWidth = fbWidth * drawHeight / fbHeight;
     const m = m4.ortho(0, gl.canvas.clientWidth, 0, gl.canvas.clientHeight, -1, 1);
     m4.translate(m, [
       (displayWidth - drawWidth) / 2, 
       (displayHeight - drawHeight) / 2,
       0], m);
     m4.scale(m, [drawWidth, drawHeight, 1], m);
     
    gl.useProgram(texProgramInfo.program);
    // calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
    twgl.setBuffersAndAttributes(gl, texProgramInfo, quadBufferInfo);
    // calls gl.uniformXXX, gl.activeTexture, gl.bindTexture
    twgl.setUniforms(texProgramInfo, {
      u_matrix: m,
      u_texture: cubeTexture,
    });
    // calls gl.drawArrays or gl.drawElements
    twgl.drawBufferInfo(gl, quadBufferInfo);
  }

  requestAnimationFrame(render);
}
requestAnimationFrame(render);

body { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block; }

<script src="https://twgljs.org/dist/3.x/twgl-full.min.js"></script>
<canvas></canvas>

渲染到纹理(如上)但分辨率更高的纹理,然后使用着色器,mip和/或线性过滤将其滤掉也是很常见的.好处是您将获得更多的抗锯齿

const vs = `
attribute vec4 position;
uniform mat4 u_matrix;

void main() {
   gl_Position = u_matrix * position;
}
`;
const fs = `
void main() {
  gl_FragColor = vec4(0, 0, 0, 1); // black
}
`;

const vs2 = `
attribute vec4 position;
attribute vec2 texcoord;

uniform mat4 u_matrix;

varying vec2 v_texcoord;

void main() {
   gl_Position = u_matrix * position;
   v_texcoord = texcoord;
}
`;
const fs2 = `
precision mediump float;
varying vec2 v_texcoord;
uniform sampler2D u_texture;
void main() {
  gl_FragColor = texture2D(u_texture, v_texcoord);
}
`;

"use strict";
const m4 = twgl.m4;
const gl = document.querySelector("canvas").getContext("webgl");
// compiles shaders, links program, looks up locations
const cubeProgramInfo = twgl.createProgramInfo(gl, [vs, fs]);
const texProgramInfo = twgl.createProgramInfo(gl, [vs2, fs2]);

const cubeArrays = {
  position: [
    1, 1, -1, 1, 1, 1, 1, -1, 1, 1, -1, -1, -1, 1, 1, -1, 1, -1, -1, -1, -1, -1, -1, 1, -1, 1, 1, 1, 1, 1, 1, 1, -1, -1, 1, -1, -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1, 1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, -1, 1, -1, 1, 1, -1, 1, -1, -1, -1, -1, -1],
  indices:  [
    0, 1, 1, 2, 2, 3, 3, 0, 
    4, 5, 5, 6, 6, 7, 7, 4, 
    8, 9, 9, 10, 10, 11, 11, 8,
    12, 13, 13, 14, 14, 15, 15, 12,
  ],
};
const quadArrays = {
  position: {
    numComponents: 2,
    data: [
      0, 0,
      1, 0,
      0, 1,
      0, 1,
      1, 0,
      1, 1,
    ],
  },
  texcoord: [
    0, 0,
    1, 0,
    0, 1,
    0, 1,
    1, 0,
    1, 1,
  ],
};
// calls gl.createBuffer, gl.bindBuffer, gl.bufferData for each array
const cubeBufferInfo = twgl.createBufferInfoFromArrays(gl, cubeArrays);
const quadBufferInfo = twgl.createBufferInfoFromArrays(gl, quadArrays);

// using mips only works if we make texture power of 2 (in WebGL1)
// WebGL2 doesn't have that limit
const fbWidth = 128;
const fbHeight = 128;
// calls gl.createTexture, gl.bindTexture, gl.texImage2D, gl.texParameteri
// calls gl.createRenderbuffer, gl.bindRenderbuffer, gl.renderbufferStorage
// calls gl.createFramebuffer, gl.bindFramebuffer, gl.framebufferTexture2D, gl.framebufferRenderbuffer
const fbInfo = twgl.createFramebufferInfo(gl, [
  { format: gl.RGBA, min: gl.LINEAR_MIPMAP_LINEAR, wrap: gl.CLAMP_TO_EDGE, },
  { format: gl.DEPTH_STENCIL, },
], fbWidth, fbHeight);

// extract the created texture
const cubeTexture = fbInfo.attachments[0];


const lowResFBWidth = 32;
const lowResFBHeight = 32;
const lowResFBInfo = twgl.createFramebufferInfo(gl, [
  { format: gl.RGBA, mag: gl.NEAREST, wrap: gl.CLAMP_TO_EDGE, },
], lowResFBWidth, lowResFBHeight);

// get the texture what was just created.
const lowResTexture = lowResFBInfo.attachments[0];

function render(time) {
  time *= 0.001;
  twgl.resizeCanvasToDisplaySize(gl.canvas);

  // draw cube to the texture
  
  // calls gl.bindFramebuffer, gl.viewport
  twgl.bindFramebufferInfo(gl, fbInfo);
  {
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    
    const fov = 30 * Math.PI / 180;
    const aspect = fbWidth / fbHeight;
    const zNear = 0.5;
    const zFar = 40;
    const projection = m4.perspective(fov, aspect, zNear, zFar);
    const eye = [1, 4, -7];
    const target = [0, 0, 0];
    const up = [0, 1, 0];

    const camera = m4.lookAt(eye, target, up);
    const view = m4.inverse(camera);
    const viewProjection = m4.multiply(projection, view);
    const world = m4.rotationY(time);

    gl.useProgram(cubeProgramInfo.program);
    
    // calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
    twgl.setBuffersAndAttributes(gl, cubeProgramInfo, cubeBufferInfo);
    // calls gl.uniformXXX
    twgl.setUniforms(cubeProgramInfo, {
      u_matrix: m4.multiply(viewProjection, world),
    });
    // calls gl.drawArrays or gl.drawElements
    twgl.drawBufferInfo(gl, cubeBufferInfo, gl.LINES);
  }
  
  // first generate mips
  gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
  gl.generateMipmap(gl.TEXTURE_2D);
  
  // draw the texture to the lowResTexture.

  // calls gl.bindFramebuffer, gl.viewport 
  twgl.bindFramebufferInfo(gl, lowResFBInfo);
  drawTexture(gl, cubeTexture, fbWidth, fbHeight, lowResFBWidth, lowResFBHeight);
  
  // draw the low-res texture to the canvas
  
  // calls gl.bindFramebuffer, gl.viewport 
  twgl.bindFramebufferInfo(gl, null);
  drawTexture(gl, lowResTexture, lowResFBWidth, lowResFBHeight, gl.canvas.clientWidth, gl.canvas.clientHeight);

  requestAnimationFrame(render);
}
requestAnimationFrame(render);

function drawTexture(gl, texture, srcWidth, srcHeight, dstWidth, dstHeight) {
   const drawHeight = dstHeight;
   const drawWidth = srcWidth * drawHeight / srcHeight;
   const m = m4.ortho(0, dstWidth, 0, dstHeight, -1, 1);
   m4.translate(m, [
     (dstWidth - drawWidth) / 2, 
     (dstHeight - drawHeight) / 2,
     0], m);
   m4.scale(m, [drawWidth, drawHeight, 1], m);

  gl.useProgram(texProgramInfo.program);
  // calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
  twgl.setBuffersAndAttributes(gl, texProgramInfo, quadBufferInfo);
  // calls gl.uniformXXX, gl.activeTexture, gl.bindTexture
  twgl.setUniforms(texProgramInfo, {
    u_matrix: m,
    u_texture: texture,
  });
  // calls gl.drawArrays or gl.drawElements
  twgl.drawBufferInfo(gl, quadBufferInfo);
}

body { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block; }

<script src="https://twgljs.org/dist/3.x/twgl-full.min.js"></script>
<canvas></canvas>

内容总结

以上是互联网集市为您收集整理的javascript-如何在webgl中获得像素化效果？全部内容，希望文章能够帮你解决javascript-如何在webgl中获得像素化效果？所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/666815.html

来源：【匿名】

【上一篇】javascript-如何在three.js或WebGL中模拟“溢出：隐藏”？【下一篇】基于HTML5的WebGL设计汉诺塔3D游戏_PHP教程

更多 ►

【javascript-如何在webgl中获得像素化效果？】教程文章相关的互联网学习教程文章

[WebGL入门]二十三，反射光的光照效果【图】

注：文章译自http://wgld.org/，原作者杉本雅広(doxas)，文章中如果有我的额外说明，我会加上［lufy：］，另外，鄙人webgl研究还不够深入，一些专业词语，如果翻译有误，欢迎大家指正。本次的demo的运行结果各种各样的光照上次，以及上上次，介绍了通过顶点着色器来实现光照效果。最开始介绍了从平行光源发出的光，上次介绍了平行光源的缺点，以及对应这个缺点的方法，就是环境光源。这次是光照处理的第三篇，进一步介绍反射光照。...

jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】【图】

本文实例讲述了jQuery+HTML5实现WebGL高性能烟花绽放动画效果。分享给大家供大家参考，具体如下：运行效果：完整代码如下： <!DOCTYPE html> <html class=" -webkit- js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations cssc...

基于HTML5和WebGL的碰撞效果实现【图】

这是公司大神写的一个放官网上给用户学习的例子，我一开始真的不知道这是在干嘛，就只是将三个形状图元组合在一起，然后可以同时旋转、放大缩小这个三个图形，点击“Animate”就能让中间的那一个图元单独绕着某一个点旋转，表单最上方的“Axis”真的完全不知道拿来干嘛用的，觉得好累赘，而且是官网的demo，也没有解释。。。所以我今天得任务就是完全剖析这个例子！首先让我们来看下这个案例：我们来看看如何操作这个3d交互模型，可...

WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)【图】

本文实例讲述了WebGL利用FBO完成立方体贴图效果的方法。分享给大家供大家参考，具体如下：这篇主要记录WebGL的一些基本要点，顺便也学习下如何使用FBO与环境贴图。先看下效果图(需要支持WebGL，Chrome,火狐，IE11)。主要实现过程如下，先用FBO输出当前环境在立方体纹理中，再画出当前立方体，最后画球，并且把FBO关联的纹理贴在这个球面上。开始WebGL时，最好有些OpenGL基础，在前面讲Obj完善与MD2时，大家可能已经发现了，因为着...

javascript – WebGL使用深度图绘制2D图像以实现伪3D效果【代码】

我正在学习WebGL,在WebGLFundamentals页面的帮助下完成了这一点,这帮助我了解缓冲区,着色器和所有这些东西是如何工作的.但现在我想达到一定的效果,我在这里看到：https://tympanus.net/Tutorials/HeatDistortionEffect/index3.html 我知道如何制作热变形效果,我想要达到的效果是图像上的深度.这个演示有一个教程,但它并没有真正解释如何做到这一点,它说我必须有一个灰度图,其中白色部分是最接近的,黑色部分是最重要的.但我真的不明...

实例详解jQuery和HTML5实现WebGL高性能烟花绽放动画效果【图】

本文主要介绍了jQuery+HTML5实现WebGL高性能烟花绽放动画效果,可实现烟花升空爆炸的绚丽动画效果,完成以后非常好看，希望能帮助到大家掌握jQuery和HTML5实现WebGL高性能烟花绽放动画效果。运行效果：完整代码如下：<!DOCTYPE html> <html class=" -webkit- js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backg...

WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)_javascript技巧【图】

WebGL three.js学习笔记之阴影与实现物体的动画效果【图】

实现物体的旋转、跳动以及场景阴影的开启与优化本程序将创建一个场景，并实现物体的动画效果运行的结果如图：运行结果完整代码如下：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Three.js</title><script src="../../../Import/three.js"></script><script src="../../../Import/stats.js"></script><script src="../../../Import/Setting.js"></script><script src="../../../Import/OrbitControls....