WebGL

Blending with HTML background in WebGL

扶醉桌前 提交于 2019-12-07 05:17:19
问题 I am drawing flat colors and textures into WebGL canvas. My colors and textures have varying alpha values and I want them to be blended correctly. I want to have transparent background (they should be blended with HTML content, which is under canvas). In WebGL, I use gl.clearColor(0, 0, 0, 0); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); gl.enable(gl.BLEND); It works correctly, when HTML background is black. But when I set a JPG pattern as a background of , I draw black triangle (alpha

Hello world example of WebGL parallelism

倖福魔咒の 提交于 2019-12-07 05:16:38
问题 There are many abstractions around WebGL for running parallel processing it seems, e.g.: https://github.com/MaiaVictor/WebMonkeys https://github.com/gpujs/gpu.js https://github.com/turbo/js But I am having a hard time understanding what a simple and complete example of parallelism would look like in plain GLSL code for WebGL. I don't have much experience with WebGL but I understand that there are fragment and vertex shaders and how to load them into a WebGL context from JavaScript. I don't

Using gl_FragDepth in WebGL

喜夏-厌秋 提交于 2019-12-07 04:39:33
问题 I am writing a 3D application in webgl, and need to provide my own depth data that is contained within a texture, my current code does this: VS: varying vec2 vUv; void main() { vUv = uv; } FS: uniform sampler2D depthTex; varying vec2 vUv; void main() { gl_FragDepth = texture2D(depthTex, vUv).r; } however gl_FragDepth is disabled in opengl-es (and therefor webgl) is there anyway to somehow enable it, or any way to provide my own depth data that doesnt involve heavy manipulation of render

Implementing depth testing for semi-transparent objects

你离开我真会死。 提交于 2019-12-07 03:38:42
I've been carefully trolling the internet for the past two days to understand depth testing for semi-transparent objects. I've read multiple papers/tutorials on the subject and in theory I believe I understand how it works. However none of them give me actual example code. I have three requirements for my depth testing of semi-transparent objects: It should be order independant. It should work if two quads of the same objects are intersection each other. Both semi-transparent. Imagine a grass object that looks like a X when viewed from above: It should correctly render a semi-transparent

What's the purpose of magic 4 of last row in matrix 4x4 for 3D graphics?

蹲街弑〆低调 提交于 2019-12-07 02:26:49
问题 When I read the book about WebGL, I've seen the next matrix description: There is an information about the last row in book ( WebGL Beginner's Guide Beginner's Guide Diego Cantor, Brandon Jones ): The mysterious fourth row The fourth row does not bear any special meaning. Elements m4, m8, m12 are always zero. Element m 16 (the homogeneous coordinate) will always be 1. So, if the last row is always [ 0, 0, 0, 1 ] , I don't understand the next: Why is it necessary be strictly [ 0, 0, 0, 1 ] ,

Webgl: alternative to writing to gl_FragDepth

℡╲_俬逩灬. 提交于 2019-12-07 02:21:54
问题 In WebGL, is it possible to write to the fragment's depth value or control the fragment's depth value in some other way? As far as I could find, gl_FragDepth is not present in webgl 1.x, but I am wondering if there is any other way (extensions, browser specific support, etc) to do it. What I want to archive is to have a ray traced object play along with other elements drawn using the usual model, view, projection. 回答1: There is the extension EXT_frag_depth Because it's an extension it might

Why do I need to define a precision value in webgl shaders?

我与影子孤独终老i 提交于 2019-12-06 17:39:09
问题 I'm trying to get this tutorial to work but I ran into two issues, one of which is the following. When I run the code as is I get an error in the fragment shader saying: THREE.WebGLShader: gl.getShaderInfoLog() ERROR: 0:2: '' : No precision specified for (float) . So what I did was specifying a precision for every float/vector I define like so varying highp vec3 vNormal . This eliminates the error but I don't get why? I can't find any other example where precision values are added to variable

爬虫3-爬虫防范

独自空忆成欢 提交于 2019-12-06 16:13:18
目录 1. 服务器端的检测 2. 客户端的检测 ——参考博客 https://www.zhuyingda.com/blog/article.html?id=17 机器人协议 爬虫领域有一个“白道手段”——robots协议,这是一个君子协议,即用allow和disallow声明各个页面的爬取授权,但除了商业搜索引擎的爬虫程序,野生爬虫根本不会管你这个(明白了scrapy框架中的ROBOTSTXT_OBEY 默认为True) 1. 服务器端的检测 服务器端针对user-agent、referer、cookie等字段进行检查,但这种检查方式存在明显的缺点,这些字段都是可以轻易伪造的,甚至还能不断变换这些字段和ip代理,伪装成多个用户在访问,所以这种检查方式还是不太靠谱。 另一种检查方式是,服务器端可以检查浏览器http头指纹,根据声明的浏览器厂商和版本,来鉴别http header中的各字段是否符合该浏览器的特征。典型的就是PhantomJS 1.X版本采用的Qt框架,在http头里面有明显的Qt框架网络请求特征,可以被服务器直接识别拦截 还有一种变态的检测机制,服务器对所有的页面请求,在http response中种下一个cookie token,然后在这个页面内异步执行一些的ajax接口里面去校验来访请求是否含有cookie token,并将token传回表明这是一个合法的浏览器

Showing Coordinate Lines of a 3D earth

蹲街弑〆低调 提交于 2019-12-06 16:01:56
Here is a 3D earth made based on Three js I want to find the location of Longitude and Latitude of the currently clicked location and show the coordinate lines What should be the strategy to define those diversion lines? How could I map my texture to it's correct equivalent Longitude/Latitude? Edit 1 : My question in a simpler form: How can I get the x, y of the pattern image which was clicked inside the sphere? 来源: https://stackoverflow.com/questions/10431632/showing-coordinate-lines-of-a-3d-earth

How to map texture image onto a part of a sphere, or how to cut out (intersect) a rectangle of a sphere's surface?

做~自己de王妃 提交于 2019-12-06 15:07:33
问题 I am working with WebGL using three.js and I have an image that I want to project onto the (inner) surface of a sphere. The problem I am facing is how to limit the extent of that mapping to a horizontal and vertical field of view. Imagine projecting an image from the centre of a sphere onto a rectangular section of it. I suspect I can do this one of 2 ways, but am unsure about how to do either... 1) Map the texture onto the sphere based on the field of view angles. Mapping the image straight