WebGL | 易学教程

20 WebGL使用纹理贴图

阅读更多关于 20 WebGL使用纹理贴图

案例查看地址：点击这里 WebGL中纹理的限制 WebGL中的纹理需要注意一点，所使用的图片数据的大小必须是2的阶乘，横竖的像素长度大小必须是32x32，128x128等2的阶乘的形式。当然，做一些处理的话，不是2的阶乘的图片数据也是可以用的，但是基本上作为纹理使用的图像数据的大小必须是2的阶乘。另外，看一下普通的网页就能感觉到，网页上的图片数据的读取是要花一点时间的，在进行纹理转换的话，必须是在图片读取完之后才行，这里需要做一些特殊的处理，如果对 JavaScript 不太熟悉的话可能会无从下手，这个后面会说。为什么需要纹理？因为不可能所有的图像都靠代码生成，那是在浪费生命。这一部分由于WebGL的安全机制，必须开启服务获取，或者允许浏览器访问本地文件，要不然WebGL无法获取文件。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">

WebGL学习系列-基本图形变换

阅读更多关于 WebGL学习系列-基本图形变换

前言经过前面的学习，我们已经可以绘制基本的图形了。本小节将介绍基本的图形变换，介绍在WebGL中，如何对基本的图形进行平移、旋转和缩放。平移在前面的小节中，我们已经绘制过一个三角形，那时候，它看起来是这样的：我们知道，在WebGL中，要绘制一个基本的图形，我们只需要指定顶点的位置、大小和颜色，然后调用drawArrays接口进行绘制即可。现在，我们想要实现对三角形进行一个平移，比如，把它移到右上角的地方，那如何实现呢？其实仔细想想，你会发现，我们要移动一个三角形，只需要移动它的三个顶点即可，然后WebGL将会自动在新的顶点位置把三角形绘制出来。其原理示意图如下：为了进一步说明在程序中是如何实现平移的，我们先来看下顶点着色器代码： // 顶点着色器代码(决定顶点的位置、大小、颜色) var VSHADER_SOURCE = 'attribute vec4 a_Position;\n' + 'uniform vec4 u_Translation;\n' + 'void main() {\n' + ' gl_Position = a_Position + u_Translation;\n' + // 设置顶点的位置 ' gl_PointSize = 10.0;\n' + // 设置顶点的大小 '}\n' ; 主要看到两个地方有所变动： 1、添加了 uniform vec4

webgl第13课-图形变换之旋转

阅读更多关于 webgl第13课-图形变换之旋转

需要源码可以Q群：828202939 或者点击这里希望可以和大家一起学习、一起进步！！纯手打！！书籍是PDF电子档，也在Q群里，所有的课程源代码在我上传的资源里面，本来想设置开源，好像不行！如有错别字或有理解不到位的地方，可以留言或者加微信15250969798，在下会及时修改！！！！！上一节课我们学习了图形的变换之平移这一节课我们将学习图形的变换之旋转如果你学会了图形的平移，再学习旋转的话你就会发现他们的实现方式是一样的，那就是在顶点着色器中计算顶点变换后的新坐标在学习旋转之前，我们先来看看需要知道的一些基础知识点： 1.旋转轴图形将围绕旋转轴旋转 2.旋转方向方向：顺时针或者逆时针 3.旋转角度图形旋转经过的角度 webgl中默认右手法则旋转：右手握拳，大拇指指向旋转轴的正方向，区域手指的弯曲方向就是旋转的方向旋转公式： x' = x cos 旋转角度 -y sin 旋转角度 y' = x sin 旋转角度 - y cos 旋转角度 z' = z JS的内置Math对象的sin() 和 cos() 方法可以进行三角函数为了显示出效果，本案例旋转45° 也许你们觉得这样写比较麻烦，下一课我们将学习图形的矩阵变换上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />

How to read depth texture attached to FBO in WebGL2

阅读更多关于 How to read depth texture attached to FBO in WebGL2

问题 I'm now working on the deferred shading using WebGL2.0. One primary problem I'm now facing is that I can't read the depth value from the DEPTH_ATTACHMENT. Actually I creat my own GBuffer with a DEPTH24_STENCIL8 texture as DEPTH_ATTACHMENT, then I bind this texture to the sampler and try to read the value in my fragment shader in deferred shading part like this: uniform sampler2D u_depthSampler; vec4 depthValue = texture(u_depthSampler, v_uv); Then I set the depthValue as output in my shading

Shader wireframe of an object

阅读更多关于 Shader wireframe of an object

问题 I want to see a wireframe of an object without the diagonals like Currently, I add lines according to the vertices, the problem is after I have several of those I experience a major performance degradation. The examples here are either too new for my version of Three or don't work (I commented there about it). So I want to try to implement a shader instead. I tried to use this shader: https://stackoverflow.com/a/31610464/4279201 but it breaks the shape to parts and I'm getting WebGL errors.

Ray Tracing a scene with triangle meshes with webgl 2.0, deferred shading, framebuffers [closed]

阅读更多关于 Ray Tracing a scene with triangle meshes with webgl 2.0, deferred shading, framebuffers [closed]

问题 Closed . This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed 12 months ago . after my original post was flagged as "too broad" by other stack overflow users. I will rephrase my question in less lines. I have implemented a ray marcher in shadertoy, and i understood all the math about the ray-object intersection. And i want to make the next step to ray

How to implement -toDataURL() function in node.js server?

阅读更多关于 How to implement -toDataURL() function in node.js server?

问题 I am a newbie using webgl implementation as a dependent module for my project. I am trying to use .toDataURL() function using node-webgl wrapper at server side. But I get an error station .toDataURL() is undefined. For more detail, please have a look at this link: canvas.toDataURL() is not a function - error node-webGL wrapper Well the current post is definitely not a duplicate. In the post(earlier link shared) I am trying to find an alternative way to access the data of canvas. The goal of

Morphing in WebGL shaders with mix() between more then two targets

阅读更多关于 Morphing in WebGL shaders with mix() between more then two targets

问题 I am trying to build an image slider using three.js and am having difficulties with wrapping my head around passing the appropriate state to the glsl shaders so I can transition between the slides. I can easily do it between two targets (be it textures or models) with simply easing between 0 and 1 and passing it as an attrib float like this: attribute float mix; vec4 color = mix(tex1, tex2, mix); But I can't understand how to approach it with more then 2 targets. Should I pass a number and do

How can I get my mesh has gone off screen?

阅读更多关于 How can I get my mesh has gone off screen?

问题 I cannot figure out how to detect it going off screen, can anybody help? I am using WebGL and Three.js. 回答1: You can use Frustum testing, a little like this: // Create a new Frustum object (for efficiency, do this only once) var frustum = new THREE.Frustum(); // Helper matrix (for efficiency, do this only once) var projScreenMatrix = new THREE.Matrix4(); // Set the matrix from camera matrices (which are updated on each renderer.render() call) projScreenMatrix.multiply( camera.projectionMatrix

Transparent Object hides other transparent Objects (alphaTest don't works and depthWrite = false causes some trouble)

阅读更多关于 Transparent Object hides other transparent Objects (alphaTest don't works and depthWrite = false causes some trouble)

问题 I currently have a problem with transparency. As you can see in the pictures, the non transparent objects behind the transparent object are shown. But the backside of the other transparent object is not shown, I set material.side = THREE.DoubleSide . It is visible, when I set material.depthWrite = false , but then the visible glitch happens, you can see in the second picture. I use THREE.MeshPhongMaterial and the newest Version of Three.js . Here are the values for the material you can see in

订阅 WebGL