How does website like SketchFab protect their 3d model on WebGL? - javascript

I am recently experimenting how to protect a 3d model for WebGL. I know it's impossible to be perfect but I still want it to have some level of security.
Let's take Sketchfab as reference. I see that there is software 3D ripper that can rips the model correctly. But not Ninja Ripper, as it only returns a broken mesh. In my own prototype, i tried to apply offset on vertice of my model, and write a simple vert/frag shader to neutralize offset. Unfortunately , this method seems not working. Ninja Ripper can rip it with no visible problem.
May i get some suggestion on this?

Related

For ThreeJS, 'm looking for a Helper class or utility that works like AxisHelper

In working with Three.js and I’ve run across several useful Helper classes that really make displaying and or modifying the scene much easier. There is one tool out there that I can’t seem to find again. It is kind of like the AxisHelper however it has a plane between the axis when you mouse over that area allowing the user to move the object along the xy, xz, or yz plane depending on what you pick. I’ve drawn an example of what it adds to the object in order to help the user move the object along the plane. If anyone knows of this tool or maybe an example of something that uses a utility like this, it would be great if you could point it out to me. Thanks.
I expect you are looking for TransformControls. There is a three.js example of its use here.
TransformControls is not part of the library -- it is part of the examples. You must include it explicitly in your project.
three.js r.80

Rendering 4 million points in Three.js

Although I'm yet to touch Three.js, I know that it simply abstracts away many of the boiler-plate that comes with WebGL.
As a result of this, and a learn-by-example style documentation, what utility of Three.js should I use for displaying 4 million points which will be mostly static, but animate to a new position on an uncommon click event?
I'm assuming the use of VBO or FbO would be needed, but how are these functionalities encapsulated into Three.js, if at all?
Thank you.

Textured 3D model using three.js with <canvas> (not WebGL)

Three.js is commonly used with WebGL, but I am interested in using its CanvasRenderer, because of compatibility issues. However, I require textured models.
I have seen this one demo, and none else, showing that it is possible to have a textured mesh created in a 3D program and rendered with Three.js. This demo even has animations, but I just need as much as textured meshes.
I'd like to know if there is a way to do this without crafting my own solution. Specifically I'm looking for a way to export from something like Blender and be able to import it with Three.js using the Canvas renderer.
Also, I know the speed implications, I need simple low-poly output.
Have you considered using the Blender exporter?

Converting a Maya scene to JavaScript or WebGL

I have some time and I'd like to convert a Maya scene to WebGL or render it to a canvas if possible without WebGL. The model is of a desk lamp consisting of primitives and meshes, I've parented parts to the joints instead of binding them to the skeleton and now I want to use a JS library or WebGL to render, then animate with mouse movement and/or touch event. If I can get the model onto a canvas, or into a WebGL enabled application while conserving the parented relationships, I could then write a few functions to bind joint rotation to mouse movements, I just need a little help with actually exporting and importing my Maya scene while conserving relationships. Thanks in advance.
You can try Three.js WebGL library for that. They have exporters from 3D models to JSON written in python here.
For example you can try to export your model in obj and then convert it using convert_obj_three.py.
Then you can load your model into canvas using THREE.JSONLoader method. There is a lot of examples on internet.
If your scene is already in Maya then www.inka3d.com should be the right thing for you. Inka3d supports joints, also objects parented to joints, and you can easily change the rotate parameters from javascript in your exported scene using the same parameter names as in maya.
If you are no coder, you might try Verge3D for Maya. It supports skeletal animation and you can rotate your joints with mouse/touch by using visual scripting (namely the "when dragged" and "set rotate" puzzles).

3D JS Engine for 2D development?

I'm about to jump into some simple game development with Javascript. I would like to one day transition to 3D development but for now am only going to be doing 2D "top down" objects.
I know that this isn't ideal but I feel like it will help me get familiar with the 3D "environment".
I am using Three.js as it appears to be very well developed and I like that it can do Canvas, WebGL and SVG. However, my very first problem I've come across is, I don't know how to "move" an object. Using just Canvas I can easily take an object I have rendered and modify it's .x or .y property to "move" it. However, for Three.js objects so far all I've found is object.rotation.x, etc. I can move the camera, but this doesn't work because I need objects to move individually.
So I guess what I'm looking for is any resources into Three.js for 2D development, or developing a 2D top-down game in a 3D environment.
The Getting Started article is pretty good.
LearningThree.js got a series on "let's make a 3D Game".
There is a nice searchable reference available too.
Note that the project moves super fast so the API might change
here and there, so keep an eye out on github and when you
update always read the change log to see if you need to update your code.
Gooduck!.

Categories

Resources