Tuesday, August 7, 2018

Javascript Keycode

Keyboard Key Key Code
backspace 8
tab 9
enter 13
shift 16
ctrl 17
alt 18
pause/break 19
caps lock 20
escape 27
page up 33
page down 34
end 35
home 36
left arrow 37
up arrow 38
right arrow 39
down arrow 40
insert 45
delete 46
0 48
1 49
2 50
3 51
4 52
5 53
6 54
7 55
8 56
9 57
a 65
b 66
c 67
d 68
e 69
f 70
g 71
h 72
i 73
j 74
k 75
l 76
m 77
n 78
o 79
p 80
q 81
r 82
s 83
t 84
u 85
v 86
w 87
x 88
y 89
z 90
left window key 91
right window key 92
select key 93
numpad 0 96
numpad 1 97
numpad 2 98
numpad 3 99
numpad 4 100
numpad 5 101
numpad 6 102
numpad 7 103
numpad 8 104
numpad 9 105
multiply 106
add 107
subtract 109
decimal point 110
divide 111
f1 112
f2 113
f3 114
f4 115
f5 116
f6 117
f7 118
f8 119
f9 120
f10 121
f11 122
f12 123
num lock 144
scroll lock 145
semi-colon 186
equal sign 187
comma 188
dash 189
period 190
forward slash 191
grave accent 192
open bracket 219
back slash 220
close braket 221
single quote 222

Saturday, January 13, 2018

cross-origin image cannot be loaded in WebGL applications

CORS = Cross Origin Resource Sharing. It's a way for the webpage to ask the image server for permission to use the image.​ The cross origin is the security protection that is built in Google Chrome not allowing users to have access to local files (in this case your image/texture). Even in Safari, you will get "the operation is insecure" error. You have couple of options. The easiest way is to have your webgl application runs from a web server such as IIS or Apache. The other option is to open your webgl applications using Internet Explorer or Microsoft Edge browsers if you are using Windows. If you are running your webgl application from Mac using "FireFox" browser, add crossorigin="anonymous" to your image tag in HTML where your texture is getting loaded. But this won't work if you are using "Windows" operating system or any other browsers even in Mac! It only works with MAC+Firefox. So either change your image tag to this img id="texImage" src="wicker_256.jpg" crossorigin="anonymous" or simple add this var image = document.getElementById("texImage"); image.crossOrigin = ""; More on this, read: https://webglfundamentals.org/webgl/lessons/webgl-cors-permission.html