WebGL

Drawing a circle with triangles WebGL

由 混江龙づ霸主 提交于 2019-12-22 13:58:10
问题 I'm new to WebGL and was trying to draw a circle with triangle_fan. I set up the variables var pi = 3.14159; var x = 2*pi/100; var y = 2*pi/100; var r = 0.05; points = [ vec2(0.4, 0.8) ]; //establish origin And then drew the circle using this for loop. for(var i = 0.4; i < 100; i++){ points.push(vec2(r*Math.cos(x*i), r*Math.sin(y*i))); points.push(vec2(r*Math.cos(x*(i+1)), r*Math.sin(y*(i+1)))); } The issue is that I am actually pushing in the second point again when i increases which I don't

JavaScript Image only loads on refresh

由 早过忘川 提交于 2019-12-22 13:12:11
问题 I'm currently struggling with a very annoying problem on my game engine... I can't figure out why the images are not loading on the first time the page loads, and to make this work I have to refresh it. Here's my current code: Texture creation: /** * @param {GLContext} context Context * @param {boolean} clamp Clamp * @param {Integer} filter Filter */ this.create = function(filename, context, filter, clamp) { this.filename = filename; this.context = context; var gl = context.GL; this.id = gl

JavaScript Image only loads on refresh

由 烈酒焚心 提交于 2019-12-22 13:12:04
问题 I'm currently struggling with a very annoying problem on my game engine... I can't figure out why the images are not loading on the first time the page loads, and to make this work I have to refresh it. Here's my current code: Texture creation: /** * @param {GLContext} context Context * @param {boolean} clamp Clamp * @param {Integer} filter Filter */ this.create = function(filename, context, filter, clamp) { this.filename = filename; this.context = context; var gl = context.GL; this.id = gl

How do I create resizable objects in THREE.JS

由 亡梦爱人 提交于 2019-12-22 12:37:37
问题 Lets say I have a simple cube and some variables specifying its width, height and depth. How do I update my THREE mesh when the w/h/d changes? (I have everything else like changelisteners etc). Do I update vertices directly? Or is it easier to just redraw everything? 回答1: I think easiest would be to create your cube with 1 unit dimensions (1x1x1). Then set the dimensions by scaling it: mesh.scale.x = width; mesh.scale.y = height; mesh.scale.z = depth; Not actually sure if mesh supports scale,

Converting webGL html to SVG

由 夙愿已清 提交于 2019-12-22 10:57:40
问题 I am using R, with the misc3d and rpanel libraries, to create a 3d image in webGL. I then need to embed the image into a PDF via Latex. The 3d image renders fine and looks great - but I'm thinking I need to convert the webGL HTML file into an SVG or some other kind of vector graphics file which can be embedded in Latex. Any suggestions on how to accomplish this? 回答1: Maybe I am wrong but this way doesn't make sense to me. You have 3D coordinates You render objects based on 3D coordinates to a

three.js - zoom in/out complete tube geometry

由 血红的双手。 提交于 2019-12-22 10:53:48
问题 I've created a tube geometry with data of 200 points loaded from external javascript file in JSON format. Please find the below code. <!DOCTYPE html> <html lang="en"> <head> <title>3d Model using HTML5 and three.js</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style> body { font-family: Monospace; background-color: #f0f0f0; margin: 0px; overflow: hidden; } </style> </head> <body> <input type="button"

Three.js antialiasing not working on Chrome

由 ♀尐吖头ヾ 提交于 2019-12-22 09:27:25
问题 I'm currently running Chrome v31 and antialiasing seems to not be working at all. No errors in either browsers. Possibly relevant code: var renderer = new THREE.WebGLRenderer( { antialias: true } ); In Safari it renders fine: vs Chrome: 回答1: It seems to be a rendering issue with Chrome, perhaps you have the 32 bit Chrome installed? You can do two things to increase the quality. First set a renderer attribute renderer.shadowMapType = THREE.PCFSoftShadowMap; // options are THREE.BasicShadowMap

Using Video as texture with Three.js

由 淺唱寂寞╮ 提交于 2019-12-22 09:01:25
问题 I am trying to create a simple rectangle with a .mp4 video as texture. As per three.js documentation(http://threejs.org/docs/#Reference/Textures/Texture) this should be straight forward. When I am putting link of video, all I am getting is a black colored box with no texture on it. I have tested code by replacing video with a jpg image and it works fine. Can someone please explain me what I am doing wrong. I have already seen the examples in which video is played by first linking it to a

AlphaFunctions in WebGL?

由 时光总嘲笑我的痴心妄想 提交于 2019-12-22 08:29:29
问题 Is it possible to achieve an transparency effect where fragments with alpha lower than 0.5 are discarded and fragments with alpha higher than 0.5 are rendered rendered opaque? From what I've read, glEnable(GL_ALPHA_TEST); glAlphaFunc(GL_GREATER, 0.5); would be what I'm looking for but unfortunately, AlphaFunction is not defined in WebGL. Is there a workaround? My problem is, that transparent fragments write into the depth buffer and thus prevent farther fragments from beeing rendered: alpha

Drawing multiple 2D images in WebGL

由 落爺英雄遲暮 提交于 2019-12-22 08:01:12
问题 I've been following a couple of tutorials on html5rocks, and I managed to make a javascript program which displays ONE image on a canvas using webGL. I have posted the code I have for this below. The problem is, it seems there is nobody out there who shows you how to draw more than ONE object in webGL. I've never worked directly with webGL before, so it's not very intuitive for me. How can I modify this code to draw each object in the imageObjectArray ? (notice that now I'm just drawing
订阅 WebGL